CSS Tooltips are small pop-up boxes that appears when user hovers over an element, providing additional information or more context. Tooltips are styled and positioned using CSS properties inset, translateX, translateY etc. In this tutorial we will learn how create, position and style tooltips using CSS.
Demo Tooltip Examples
The following section shows examples of demo tooltips. The tooltip will be visible when you hover over the texts below.TopRightLeftBottom
Table of Contents
How to Create Tooltips in CSS?
Basic Tooltip
Positioning Tooltips
Tooltip Arrows
Fade In Tooltips
Advantages of Tooltips
How to Create Tooltips in CSS?
We will be following below mentioned steps to create tooltips using CSS and HTML.
Setting Up the Element: Create the element you want to hover over to trigger the tooltip such as, a button, an image, or any other HTML element.
Create the Tooltip Text: Use <span> element to create tooltip container and include tooltip texts there. We will hide this initially using visibility: hidden property in CSS.
Position the Tooltip: Using CSS positioning properties, we will place the tooltip element at right location around container. We have set ‘position: absolute’ on the tooltip and ‘position: relative’ on the container.
Styling the Tooltip: Modify the appearance of the tooltip by setting the background-color, text-color, padding, etc.
Display the Tooltip on Hover: For displaying the tooltip when user hovers over the target element, we have used CSS hover effect. This displays the tooltip.
Basic Tooltip
The following example demonstrates how to create a basic tooltips using CSS. The tooltip is displayed when the user hovers over the text.
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style></head><body><h3>Hover over the text below to see the tooltip</h3><div class="tooltip">
Hover over this text
<span class="tooltiptext"> This is a tooltip </span></div></body></html></pre>
Positioning Tooltips
Using CSS positioning rules we can position tooltips anywhere around main container such as top, bottom, left or right.
To position a tooltip, first we need to set 'position: relative;' property to element container of tooltip. It allows child elements with 'position: absolute' to be positioned relative to the element container. The position of absolutely positioned element can be easily adjusted by using inset properties like top, bottom, right and left.
/* Tooltip on top */
.tooltip-top .tooltip-text {
bottom: 125%;
left: 50%;
transform: translateX(-50%);
}
/* Tooltip on bottom */
.tooltip-bottom .tooltip-text {
top: 125%;
left: 50%;
transform: translateX(-50%); /* To center on top side */
}
/* Tooltip on left */
.tooltip-left .tooltip-text {
top: 50%;
right: 125%;
transform: translateY(-50%);
}
/* Tooltip on right */
.tooltip-right .tooltip-text {
top: 50%;
left: 125%;
transform: translateY(-50%);
}
</style></head><body><div class="container"><div class="tooltip-container tooltip-top"><button class="button">Top </button><span class="tooltip-text">Tooltip on top</span></div><div class="tooltip-container tooltip-right"><button class="button">Right </button><span class="tooltip-text">Tooltip on right</span></div><div class="tooltip-container tooltip-left"><button class="button">Left </button><span class="tooltip-text">Tooltip on left</span></div><div class="tooltip-container tooltip-bottom"><button class="button">Bottom</button><span class="tooltip-text">Tooltip on bottom</span></div></div></body></html></pre>
Tooltip Arrows
To create an arrow for tooltip that appears from a specific side of the tooltip, add "empty" content after tooltip, using the pseudo-element ::after and content property. The arrow then can be shaped and colored using border property.
We set color only for one side of border, this will result in a triangular shaped border on top side as the content is empty. To learn more about how to create arrow in CSS, visit our free tutorial on CSS arrows.
/* Arrow pointing up for top tooltip */
.tooltip-top .tooltip-text::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-color: black transparent transparent transparent;
}
/* Arrow pointing left for right tooltip */
.tooltip-right .tooltip-text::after {
top: 50%;
left: -10px;
transform: translateY(-50%);
border-color: transparent black transparent transparent;
}
</style></head><body><div class="container"><div class="tooltip-container tooltip-top"><button class="button">Top </button><span class="tooltip-text">Tooltip on top</span></div><div class="tooltip-container tooltip-right"><button class="button">Right </button><span class="tooltip-text">Tooltip on right</span></div></div></body></html></pre>
Fade In Tooltips
The CSS fade in tooltip or tool tip animation is a tooltip that appears gradually with a fading effect, creating a smooth and visually appealing transition.
To create a fade in tooltip, first you need to set opacity of tooltip element as 0, then for hovered state of tooltip element set opacity as 1. Now use transition to smoothly change opacity from 0 to 1.
Tooltips give extra info without making the webpage messy. They help users understand different parts of the webpage better.
CSS tooltips can be customized and put in different positions for different screens and devices. This makes them useful for all types of websites, even those that change sizes on different screens.
CSS tooltips are highly customizable, it allows developers to style them to match the website's design theme, including colors, fonts, and animations.
Implementing CSS tooltips is relatively simple and doesn't require complex JavaScript or additional libraries.
The box-sizing property in CSS is used to define how the total width and height of an element is calculated. By default, the width and height of an element includes its content, padding, and border. However, with the box-sizing property, you can alter this behavior to include or exclude the padding and border from the width and height calculation.
In older version of CSS (CSS2), the default way in which the box model worked made the element look bigger than the dimensions that were passed to it (width and height).
width + padding + border = actual visible/rendered width of an element’s box
height + padding + border = actual visible/rendered height of an element’s box
CSS box sizing property
The CSS box-sizing property is useful in adjusting the behaviour of the layout of the elements.
Possible Values
The box-sizing CSS property can have a value, that is a keyword, either of one of the following:
content-box: This is the default value. When this value is passed to box-sizing property, it returns the default behavior, where padding or/and border are added in the total width and height of the element.
border-box: When this value is passed to box-sizing property, it tells the browser to adjust the padding or margin values, that are passed to an element. This results in shrinking the content area and absorbing the border or/and padding specified for the element. It is the default styling used for <table>, <select>, <button>, and <input> elements.
padding-box value is not supported by any browser and hence can not be passed to the box-sizing property.
Applies to
All the HTML elements that accept width or height.
The example given above shows a clear difference between the box-sizing: border-box and box-sizing: content-box property values. Here the box-sizing: border-box property ignores the padding value in calculation of total width and height. Whereas the box-sizing: content-box property value includes the padding value in the calculation.
For a smooth, fluid and intuitive responsive design, the box-sizing: border-box value can be set in the following manner:
* {
box-sizing: border-box;
}
The above syntax may not give desired results, as it ignores the pseudo-elements. So there is another syntax which includes the pseudo-elements for the reset.
*, *:before, *:after {
box-sizing: border-box;
}
This universal box sizing method will make the use of box-sizing: content-box | padding-box difficult. Hence, there is one more syntax that may be more useful and apt in such situations.
This universal box-sizing reset syntax is more useful and gives more flexibility to the users.
Though every current browser supports the box-sizing: border-box, unprefixed; but some older versions of the browsers need support. In order to provide that support you may need to use the prefixes -webkit and -moz in the following manner:
CSS provide several properties to design multiple column layout for webpages. The multiple column layout is used generally for layout designing in newspapers, online blogs, books, etc. In this chapter we will discuss how to create and style multiple column layout using HTML and CSS.
Table of Contents
CSS Create Multiple Columns
Setting Column Width
Spanning Columns in Multiple Column Layout
Specify Gap Between Columns
CSS Column Rules
Multiple Column Layout Related properties
CSS Create Multiple Columns
In CSS, we can use the column-count property to specify number of columns for displaying texts inside any element. Let us see an examples:
Example
<!DOCTYPE html><html><head><style>
.multicol-col-count {
column-count: 3;
}
</style></head><body><h2> Three Column Layout </h2><div class="multicol-col-count">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse mol
</div></body></html></pre>
Setting Column Width
To make column layout, it is not necessary to use column-count property, we can also use column-width property. Number of columns will be determined automatically based on width of column specified. Let see an example.
Example
<!DOCTYPE html><html><head><style>
.multicol-col-width {
column-width: 100px;
}
</style></head><body><p><strong> Column Width 100px </strong></p><div class="multicol-col-width">
Lorem ipsum dolor sit amet, con sec tetuer ad ipis cing el
sed diam nonummy nibh eui smod tincidunt ut laoreet dolo
magna aliquam erat volutpat. Ut wisi enim ad minim veni,
quis nostr ud exerci tation ulla mc orper suscipit lob ort
nisl ut aliq uip ex ea comm odo cons equat. Duis au tem
eum iriure dolor in hen drerit in vul put ate ve lit esse mol
estie con se quat, vel ill
</div></body></html></pre>
CSS Specify the Gap Between Columns
To specify gap between columns, we can use column-gap property. Let see an example.
Example
<!DOCTYPE html><html><head><style>
.multicol-col-width {
column-width: 100px;
column-gap: 40px;
}
</style></head><body><p><strong> Column Gap 40px </strong></p><div class="multicol-col-width">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse mol
estie consequat, vel illum dolore eu feugiat nulla facilisis
</div></body></html></pre>
CSS Column Rules
In CSS multiple column layout, we can add rules (or lines) between columns using column rule properties. Following are column-rule properties in CSS:
column-rule-style: Defines the style of the line between columns (e.g., solid, dashed).
column-rule-color: Sets the color of the line between columns.
column-rule-width: Specifies the width (thickness) of the line between columns.
column-rule: A shorthand property to set the style, color, and width of the line between columns.
Let see an example for these properties.
Example
<!DOCTYPE html><html><head><style>
.multicol-col-width {
column-count: 3;
column-rule-style: dashed;
column-rule-color: red;
column-rule-width: 3px;
}
</style></head><body><div class="multicol-col-width">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse mol
estie consequat, vel illum dolore eu feugiat nulla facilisis
averunt lectores legere me lius quod ii legunt saepius.
</div></body></html></pre>
CSS Spanning Columns in Multiple Column Layout
If you want to add a heading, or any other elements that spans across all the columns in layout, You can use column-span property. The value of this property following:
column-span: all - The heading will span over every other column in layout.
column-span: none - The heading will be placed as a seperate column.
.colspan-none {
column-span: none;
background-color: lightskyblue;
}
.colspan-all{
column-span: all;
background-color: lightskyblue;
}
</style></head><body><div class="multicol-col-rule"><h1 class="colspan-none" >Heading on First Columns</h1><p>
Lorem ipsum dolor sit amet, consectetuer adipi
scing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
sit amet, conse ctetuer adip iscing elit, sed diam nonu
mmy nibh euis mod tincidunt ut laoreet dolore magna aliq
am erat volutpat.
</p></div><div class="multicol-col-rule"><h1 class="colspan-all" >Heading spanning across all columns</h1><p>
Ut wisi enim ad minim veniam, quis nostrud exerci ta
tion ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros
</p></div></body></html></pre>
Multiple Column Layout Related properties
Following table shows all the properties that are supported in CSS for multiple column layout.
Property
Description
Example
column-count
Specifies the number of columns an element is divided into when displayed in a multi-column layout.
Try It
column-fill
Specifies how to fill columns.
Try It
column-gap
Sets the size of the gap between an element's columns.
Try It
column-width
Sets the column width in a multi-column layout.
Try It
column-rule
Shorthand property that sets the color, style, and width of the line drawn between columns in a multi-column layout.
Try It
column-rule-color
Sets the color of the line drawn between columns in a multi-column layout.
Try It
column-rule-style
Sets the style of the line drawn between columns in a multi-column layout.
Try It
column-rule-width
Sets the width of the line drawn between columns in a multi-column layout.
Try It
column-span
Defines whether an element should span across one column or all columns, in a multi-column layout.
CSS animations allows to create smooth transitions between different styles without using JavaScript. For example,
What is CSS Animation?
In CSS we can dynamically change styles of elements based on time duration, user interaction or state changes called CSS animations. It is implemented using the @keyframes rule to create the animation and the animation property to apply it to an element.
Table of Contents
CSS @keyframes Rule
Animation Delay Property
Set Animation Iteration Count
Animation Direction Property
Animation Timing Function
Set Animation Fill Modes
Animation Shorthand Property
List of CSS Animation Properties
The @keyframes Rule
The @keyframes rule is used to define keyframes for animation specifying how the animated element look at various stage of animation. Consider following code that defines a keyframe rule.
This code will define animation for element with class .box, the name of animation is colorChange, run for 5 seconds and it repeats infinite number of times.
The keyframe rule is defined for animation named colorChange.
At 0% of total duration of animation( ie, 0 seconds) the background color will be red.
At 50% of total time( ie, 2.5 seconds) the background color changes to green.
At 100% of total duration( ie, 5 seconds) color changes to blue.
Animation Delay Property
We can set delay for starting an animation using animation-delay property. Check out following example
You can also set negative value for animation-delay properties. If you are using a negative value -n, then the animation will start as if it had already been playing for n seconds.
Example
In this example ball will start to move left after 2 seconds.
We can set number of times a animation should repeats itself using animation-iteration-count property.
The CSS specification does not support negative values for this property. It can take value as a positive integer (e.g., 1, 2, 3, etc.) or keyword 'infinite'
Example
In this example we set ball iteration count to infinite.
animation-name: moveRight;
/* Set duration */
animation-duration: 2s;
/* Set number of time animation repeats */
animation-iteration-count: infinite;
}
The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
The animation-fill-mode property can have the following values:
none: The animation will not apply any style before or after it starts. This is default.
forwards: At end of animation element will keep the style set by the last keyframe rule.
backwards: At end of animation element will keep the style set by the first keyframe rule.
both: The animation will follow the rules for both forwards and backwards.
Check out output of following code for more understanding:
The following are the animation property's sub-properties:
Property
Description
Example
animation-composition
Indicates the composite operation to apply when many animations are having simultaneous effects on the same property.
Try It
animation-delay
Indicates whether the animation should begin at the beginning of the animation or somewhere along the way, as well as the amount of time that should pass between an element loading and the start of an animation sequence.
Try It
animation-direction
Indicates if the initial iteration of animation should be forward or backward and if iterations after that should continue in the same direction or change direction each time the sequence is executed.
Try It
animation-duration
Indicates how long it takes for an animation to finish one cycle.
Try It
animation-fill-mode
Describes the pre-run and post-run styling that an animation applies to its target.
Try It
animation-iteration-count
Indicates how many times an animation should recur.
Try It
animation-name
It gives the name of the @keyframes at-rule that describes the keyframes of an animation.
Try It
animation-play-state
Indicates whether an animation sequence should be played or paused.
Try It
animation-timing-function
Describes the acceleration curves that are used to specify the keyframe transitions in an animation.
CSS transition property allows you to animate changes in an element’s style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries.
CSS transition property is a shorthand property for
transition-property
transition-duration
transition-timing-function
transition-delay
transition-behavior (This property is on an experimental basis and may not be supported).
Possible Values
<length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
Applies to
All elements, ::before and ::after pseudo-elements.
The value for the transition property is defined as one of the following:
The none value indicates that there will be no transitions on this element. This is the default value.
Commas are used to separate one or more single-property transitions.
A single-property transition specifies the transition for one specific property or all properties. This includes:
A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as:
A <custom-ident> representing a single property.
The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state
If no value is specified, all value will be assumed, and the transition will apply to all changing properties.
Specify zero or one <easing-function> value indicating the easing function to be used.
Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay.
If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword.
CSS transition – With Two Values
The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to greenyellow −
}
</style></head><body><div class="box">Hover over me</div></body></html>
CSS transition – delay Value
The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 0.5s −
}
</style></head><body><div class="box">Hover over me</div></body></html>
CSS transition – easing Function
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration −
}
</style></head><body><div class="box">Hover over me</div></body></html>
CSS transition – easing Function and delay
The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 0.7s −
}
</style></head><body><div class="box">Hover over me</div></body></html>
CSS transition – behavior Value
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function −
}
</style></head><body><div class="box">Hover over me</div></body></html>
CSS transition – Applied To Two Properties
The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 4s −
CSS Styling Text involves modifying the appearance of text content by setting proper color, alignment, letter-spacing, and indention to make it more visually appealing. This chapter demonstrates how to style texts on web pages using CSS properties.
How to Style Text in CSS?
We can style text in the following ways to style texts in CSS.
Change Color: The default color of text on a webpage will be black. You can change this according to your webpage theme, using the color property in CSS.
Set Alignment: You can use the text-align property in CSS to specify the alignment (center, left, right) of text inside a container.
Text Decoration: The text-decoration property in CSS can be used to add effects like underline, overline, or strike-through to texts.
Shadow Effect: If you want to create a shadow around text in your webpage you can use text-shadow property in CSS. This can create a 3D effect or a subtle glow around the text.
Change Font Style: The font-style property allows you to style the text as normal, italic, or oblique.
Properties for Styling Text
The following table lists CSS properties for styling text:
Property
Description
color
Sets the color of the text.
text-align
Sets the alignment of the text.
text-align-last
Sets the alignment of the last line of a block of text.
direction
Sets the direction of the text.
text-indent
Sets the indentation of the first line of the text.
letter-spacing
Specifies the space between the letters of a word.
word-spacing
Specifies the space between the words in a block of text.
white-space
Controls the white space flow inside the text in an element.
text-decoration
A shorthand property for setting the text decoration.
text-decoration-line
It specifies the type of line the text decoration will have.
text-decoration-style
It specifies the type of line drawn as a text decoration such as solid, wavy, dotted, dashed, or double.
text-decoration-color
It sets the color of the text-decoration line.
text-decoration-thickness
It sets the thickness of the text-decoration line.
text-justify
It controls how spaces are distributed between words and characters to align text.
text-transform
Transforms the text in either uppercase, lowercase, or capitalize.
line-height
It controls the amount of space between lines of text within an element.
text-emphasis
Applied emphasis marks to text.
text-shadow
Adds shadow to the text.
line-break
Controls how to set the rule for a line break.
word-break
Controls how to set the rule for a word break.
text-combine-upright
Combines multiple typographic character units into the space of a single typographic character unit.
text-orientation
Sets the orientation of the text characters in a line.
text-underline-offset
Adds special visual effects to the text.
text-overflow
Controls how hidden overflow content is displayed to users.
Setting Text Color in CSS
To set the text color, you can use the color property. The color can be specified with color name, Hexadecimal value, rgb/rgba value, or hsl/hsla value.
Example
In this example, we have set the text color of paragraphs using the color property.
The text in a webpage can be aligned horizontally and vertically inside a container. To set the alignment of the text, we use the following CSS properties.
The text-align property specifies the horizontal alignment of text in a container (left, right, center, justify).
The vertical-align property is used to align the text vertically at the top, bottom, baseline, and middle. This property is used with inline elements, inline-block elements, and table cells.
Example
In this example, we have used text-align and vertical-align properties to set the horizontal and vertical alignment of the text.
<!DOCTYPE html><html><head><style>
th{
vertical-align: bottom;
border: 2px solid;
width: 200px;
height: 150px;
}
</style></head><body><h2>Text Alignment</h2><p style="text-align: left;">Text Left Alignment.</p><p style="text-align: right;">Text Right Alignment.</p><p style="text-align: center;">Text Center Alignment.</p><table><th>This is vertical alignment</th></table></body></html></pre>
Aligning the Last Line in CSS
To set the alignment for the last line of a block of text, you can use the text-align-last property. It is useful when text-align: justify; is used to align the last line properly.
Example
In this example, we have used the text-align-last property to align the last line differently.
<!DOCTYPE html><html><head><style>
p {
width: 300px;
text-align: justify;
text-align-last: right;
}
</style></head><body><h2>text-align-last property</h2><p>This is an example of text alignment. The last line of this paragraph will be aligned differently than the rest of the text.</p></body></html></pre>
Aligning Text with text-justify
The text-justify property specifies the justification method of text when text-align: justify; is applied. The text remains unaffected in modern browsers. Try running the code in Firefox.
Example
In this example, we have used the text-justify property to control text justification.
<!DOCTYPE html><html><head><style>
p {
width: 300px;
text-align: justify;
text-justify: inter-word;
}
</style></head><body><h2>text-justify property</h2><p>This paragraph demonstrates how the text-justify property works. It adjusts the spacing between words.</p></body></html></pre>
Setting Text Direction in CSS
The text direction refers to the orientation of text characters in a document or element. You can use the direction property to set the text direction. This property accepts two values which are as follows:
ltr (Left-to-Right): It is the default value, used for languages that are written from left to right, like English.
rtl (Right-to-Left): It is used for languages that are written from right to left, such as Arabic or Hebrew. When using rtl, the text will be aligned right by default.
Additionally, CSS provides a shorthand property, unicode-bidi, to control the bidi algorithm, which specifies how characters with different writing directions are displayed when they appear in the same paragraph.
Example
In this example, we have used the direction property to set the text direction of paragraphs.
Right to Left
</p><p style = "direction: ltr;">
Left to Right
</p></body></html></pre>
Applying Text Decoration in CSS
You can use the text-decoration property for adding extra decoration to the text, such as adding a line (underline, strikethrough, overline), color, style, and thickness to the line.
It is a shorthand property for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.
Syntax
The syntax for the text-decoration property is as follows:
In this example, we have used the text-decoration property to apply overline, line-through, and underline styles with different colors, thicknesses, and line types.
<!DOCTYPE html><html><body><h2>Text Decoration</h2><p style="text-decoration: overline solid red 5px;">
Overline text decoration.
</p><p style="text-decoration: line-through solid green 1px;">
Line-through text decoration.
</p><p style="text-decoration: underline dashed 2pt blue;">
Underline text decoration.
</p></body></html></pre>
Using CSS text-transform for Text Styling
To change the appearance of text, the text-transform property is used. It transforms the text in various ways such as converting the text to uppercase, or lowercase, capitalizing the first letter of each word, or even capitalizing all letters.
Example
In this example, we have used the text-transform property to transform the text to uppercase, lowercase, and capitalize.
<!DOCTYPE html><html><head><style>
p{
font-family: arial, sans-serif;
font-size: 1em;
}
</style></head><body><h2>Text Transform</h2><p style="text-transform: capitalize;">
capitalizes the first character of each word.
</p><p style="text-transform: uppercase;">
Transforms all text to uppercase.
</p><p style="text-transform: lowercase;">
Transforms all text to Lowercase.
</p></body></html></pre>
Adding Text Emphasis in CSS
To apply emphasis marks on a block of text, you can use the text-emphasis property. These marks are typically used to highlight specific content or to indicate pronunciation or stress in certain languages.
It is a shorthand property for text-emphasis-style and text-emphasis-color.
Example
In this example, we have used the text-emphasis property to apply emphasis marks to the text.
<!DOCTYPE html><html><head><style>
p{
font-family: arial, sans-serif;
font-size: 1em;
}
</style></head><body><h2>Text Emphasis</h2><p style="text-emphasis: dot;">
The text is emphasized using dot.
</p><p style="text-emphasis: circle red;">
The text is emphasized using red circle.
</p><p style="text-emphasis: triangle;">
The text is emphasized using triangle.
</p></body></html></pre>
CSS Text Indentation Property
To add space between the margin and the first line of text, you can use the text-indent property. A proper indentation improves the readability and clarity of text on a page.
Example
In this example, we have used the text-indent property to indent the first line of the text of the paragraphs.
To adjust the space between the letters of a text, you can use the letter-spacing property. The space can be increased or decreased between the letters.
Example
In this example, we have used the letter-spacing property to increase and decrease the space between the letters of the text.
Word spacing normal.
</p><p style="word-spacing: 100px;">
Word spacing increased.
</p><p style="word-spacing: -2px;">
Word spacing decreased.
</p></body></html></pre>
Wrapping Text with white-space Property
The white-space property controls how you can handle the white space inside an element. It allows you to manage the handling of spaces, tabs, and line breaks in the text.
Example
Here is an example of the white-space property using different values to control the white space inside the text.
<!DOCTYPE html><html><head><style>
p{
border: 2px solid;
padding: 5px;
width: 50%;
}
</style></head><body><h2>White-space property</h2><p style="white-space: normal;">
This is a paragraph with the white-space property set
to normal. The text will wrap when necessary, and
extra spaces and line breaks are ignored.
</p><p style="white-space: nowrap;">
This is a paragraph with the white-space property set
to nowrap. The text will not wrap to the next line, even
if it overflows the container.
</p><p style="white-space: pre;">
This is a paragraph with white-space property set to pre.
The text will respect all spaces and line breaks. Means,
the text will be displayed as it is in HTML code.
</p><p style="white-space: pre-wrap;">
This is a paragraph with the white-space property set to
pre-wrap. The text will respect all spaces and line breaks,
but will wrap when necessary.
</p><p style="white-space: pre-line;">
This is a paragraph with the white-space property set
to pre-line. The text will collapse spaces and wrap when
necessary, but will respect line breaks.
</p></body></html></pre>
CSS Line-Break Property
To control how line breaks are handled in text, we use the CSS line-break property. This property is useful for handling line breaks in languages like Japanese, Chinese, or Korean. You can use values such as auto, loose, normal, strict, and anywhere with this property.
Example
In this example, we have used the line-break property with different values to control how the text breaks across lines based on language rules.
<!DOCTYPE html><html><head><style>
p{
border: 2px solid;
padding: 5px;
width: 50%;
}
</style></head><body><h2>Line-break property</h2><p style="line-break: auto;">
This paragraph uses the line-break property set to auto.
Line breaking is determined based on the default rules.
</p><p style="line-break: loose;">
This paragraph uses the line-break property set to loose.
Line breaking is done more frequently, typically used in
CJK (Chinese, Japanese, Korean) text.
</p><p style="line-break: normal;">
This paragraph uses the line-break property set to normal.
Line breaking follows the standard rules for the language
being used.
</p><p style="line-break: strict;">
This paragraph uses the line-break property set to strict.
Line breaking is restricted, typically preventing breaks
between characters that are normally kept together.
</p><p style="line-break: anywhere;">
This paragraph uses the line-break property set to anywhere.
Line breaks can happen at any point, even if it means
breaking words in unconventional places.
</p></body></html></pre>
CSS Word-Break Property
The word-break property controls the behavior of word breaking and word wrapping in text. It handles the words when they are too long to fit within their container. You can use values such as normal, break-all, keep-all, and break-word with this property.
Example
In this example, we have used the word-break property with different values to control how the word breaks to fit their container.
This paragraph uses the word-break property set to <strong>normal</strong>.
Words will break only at normal word boundaries (such as
spaces or hyphens).
</p><p style="word-break: break-all;">
This paragraph uses the word-break property set to <strong>break-all</strong>.
Words will break at any character to prevent overflow,
even in the middle of a word.
</p><p style="word-break: keep-all;">
This paragraph uses the word-break property set to <strong>keep-all</strong>.
Words will only break at normal word boundaries, but CJK text
characters will not break unless necessary.
</p><p style="word-break: break-word;">
This paragraph uses the word-break property set to <strong>break-word</strong>.
Words will break at normal boundaries or wherever necessary
to prevent overflow.
</p></body></html></pre>
CSS line-height Property
To specify the height of a line of a text, you can use the CSS line-height property . It controls the spacing between lines.
Example
In this example, we have used the line-height property to increase the space between lines.
<!DOCTYPE html><html><head><style>
p {
width: 300px;
line-height: 2;
}
</style></head><body><h2>line-height property</h2><p>This paragraph has a line height of 2, making the text more readable and spaced out.</p></body></html></pre>
Creating Text Shadows with CSS
The text-shadow property is used to add a shadow effect to the text. It allows you to create a shadow behind the text by specifying the shadow's horizontal and vertical offsets, blur radius, and color.
You can apply multiple shadows by separating each shadow with a comma. The order of the shadows matters, with the first shadow being closest to the text.
Example
In this example, we have used the text-shadow property to apply different shadow effects to the paragraphs, including single and multiple shadows with different offsets, colors, and blur radii.
<!DOCTYPE html><html><head><style>
.txt1 {
text-shadow: 2px 2px 5px grey;
}
.txt2 {
text-shadow: -2px -2px 3px red;
}
.txt3 {
text-shadow: 3px 3px 0px blue, -3px -3px 0px yellow;
}
</style></head><body><h2>Text-shadow property</h2><p class="txt1">
This text has a grey shadow with a blur radius of 5px.
</p><p class="txt2">
This text has a red shadow with a blur radius of 3px
and offset to the top-left.
</p><p class="txt3">
This text has two shadows: a blue shadow offset to the
bottom-right and a yellow shadow offset to the top-left.
</p></body></html></pre>
CSS text-orientation Property
To control the text orientation in vertical writing modes, we use the text-orientation property.
Example
In this example, we have used the text-orientation property to rotate the text vertically.
<!DOCTYPE html><html><head><style>
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style></head><body><h2>text-orientation property</h2><p>This text is displayed in a vertical layout using text-orientation.</p></body></html></pre>
The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.
Possible Values
<color>:
Sets the color of the shadow.
It is optional.
It can be specified either before or after the offset values.
Any value for color can be specified, such as, name, HEX or RGB value.
<offset-x><offset-y>:
Any length value, specifying the x and y values.
x value represents the shadow’s horizontal distance from text.
y value represents the shadow’s vertical distance from text.
If x and y values equal 0, the shadow appears behind the text.
<blur-radius>
Any length value, specifying the value of blur-radius.
It is optional.
To make the blur look bigger, you need to provide higher value.
If no value is passed, it is taken as 0.
Applies to
All the HTML elements.
DOM Syntax
object.style.textShadow = "5px 5px 3px red";
The first two (5px,5px) values specify the length of the shadow offset i.e the X-coordinate and the Y-coordinate.
The third value (3px) specifies the blur radius.
The last value (red) describes the color of the shadow.
CSS text-shadow – Simple Shadow Effects
Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers −
CSS caret-color property specifies the color of the cursor, which is the visible marker, also known as the text input cursor. It is used with input elements such as input forms, text boxes, textarea etc. which use the cursor and are editable.
Syntax
caret-color: auto | color | transparent | initial | inherit;
Property Values
Value
Description
auto
The browser uses the currentColor for the caret. Default.
color
The color of the caret can be specified in different formats (color names, hex, rgb etc.).
transparent
The caret is not visible.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Caret Color Property
The following examples explain the caret-color property with different values.
Caret Color Property with Auto Value
To let the browser decide the color of the cursor, which uses the current text color, we use the auto value. The current text color will be applied to the cursor. This is shown in the following example.
caret-color: auto (color of the text will
be applied to caret)
</label><input type="text" value="Default cursor color."
class=" inp text"
/><textarea rows="10"
class=" inp textarea">Default caret color.
</textarea></div></body></html></pre>
Caret Color Property with Color Values
To give a color of our choice to the cursor, we can specify the color in different format (color names, hex values, rgb values, hsl values etc.). The specified color will be applied to the cursor. This is shown in the following example.
caret-color: transparent (cursor color
will not be visible)
</label><input type="text" value="transparent caret."
class="inp"
/><textarea rows="10"
class=" inp">transparent caret.
</textarea></div></body></html></pre>
CSS box-decoration-break property specifies how the background, border, border-image, box-shadow, margin, padding and clip-path of an element should behave when the content is broken across multiple lines or columns. It controls whether these properties should be continuous or fragmented across the line breaks.
It means that the padding, border, and background of the element will be rendered as if the content were not broken, resulting in continuous rendering across line breaks. Default Value
clone
Each box fragment is rendered individually with its defined border, padding, and margin wrapping it. The border-radius and box-shadow are applied to each fragment separately.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Box Decoration Break Property
The following examples explain the box-decoration-break property with different values.
Box Decoration Break Property with Slice Value
To let the box decoration properties be rendered continuously such that they break at the edges of the element fragment, we use the slice value. This is shown in the following example.
CSS
<br>
box-decoration-break property
<br>
with slice
<br>
Value.
<br>
See how the
<br>
properties are applied
<br>
to the elements.
</span></body></html>
Box Decoration Break Property with Clone Value
To let each individual element fragment have individual box decoration properties separately, we use the clone value. The value treats each element broken across multiple lines as individual element and applies the properties to each of them. This is shown in the following example.
CSS box-shadow property adds a shadow effect around an element. One or more shadow effects can be added, separated by commas. The box shadow is described by horizontal and vertical offsets relative to the element, blur, spread radius and color.
It defines the horizontal offset. Positive values place the shadow to the right of box, negative values place the shadow to the left of box. Required.
v-offset
It defines the vertical offset. Positive values place the shadow below the box, negative values place the shadow above the box. Required
blur
It defines the blur radius. Higher values have higher blur. Optional.
spread
It defines the spread radius. Positive values increases size of shadow, negative values decreases size of shadow. Optional
color
It defines the color of the shadow. Different formats of color can be used. Default is color of text. Optional
inset
It changes the outer shadow to inner shadow.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Box Shadow Property
The following examples explain the box-shadow property with different values.
Box Shadow Property with Box Shadow
To set a shadow to a box, we require to specify atleast two values, one for the horizontal offset and the other for the vertical offset. Depending on the signs of the values, the position of the shadow changes accordingly. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>
.container {
display: grid;
justify-content: center;
align-items: center;
gap: 30px;
}
.boxes {
padding: 50px;
text-align: center;
font-weight: bold;
}
.first {
background-color: lightcoral;
box-shadow: 10px 10px;
}
.second {
background-color: lightblue;
box-shadow: 10px -10px;
}
.third {
background-color: lightgreen;
box-shadow: -10px 10px;
}
.fourth {
background-color: lightgrey;
box-shadow: -10px -10px;
}
</style></head><body><h2>
CSS box-shadow property
</h2><p>
Positive horizontal offset places the shadow
to the right of box and negative horizotal offset
places the shadow to the left of box.
</p><p>
Positive vertical offset places the
shadow below the box and negative values places
it above the box.
</p><div class="container"><p class="first boxes">
box-shadow: 10px 10px
</p><p class="second boxes">
box-shadow: 10px -10px
</p><p class="third boxes">
box-shadow: -10px 10px
</p><p class="fourth boxes">
box-shadow: -10px -10px
</p></div></body></html></pre>
Box Shadow Property with Blur
To set a blur to the shadow of a box, we require to specify three values. The first two values are the horizontal and vertical offsets while the third value is for the blur, higher the third value greter will be the blur. This is shown in the following example.
.third {
background-color: lightcoral;
box-shadow: 10px 10px 40px;
}
</style></head><body><h2>
CSS box-shadow property
</h2><p>
The third value decides the blur,
greater the value more is the blur.
</p><div class="container"><p class="first boxes">
box-shadow: 10px 10px 10px
</p><p class="second boxes">
box-shadow: 10px -10px 20px
</p><p class="third boxes">
box-shadow: -10px 10px 40px
</p></div></body></html></pre>
Box Shadow Property with Spread Value
To set the size of the shadow of a box, we require to specify four values. The first two values are the horizontal and vertical offsets while the third value is for the blur, the fourth value decides the size of the shadow, positive values result in larger shadows while negative values result in smaller shadows. This is shown in the following example.
.second {
background-color: lightblue;
box-shadow: 10px 10px 20px 15px;
}
.third {
background-color: lightblue;
box-shadow: 10px 10px 40px -5px;
}
</style></head><body><h2>
CSS box-shadow property
</h2><p>
The fourth value decides the size of the shadow,
positive value results in larger shadow while negative
value results in smaller shadow.
</p><div class="container"><p class="first boxes">
box-shadow: 10px 10px 10px 5px
</p><p class="second boxes">
box-shadow: 10px -10px 20px 14px
</p><p class="third boxes">
box-shadow: -10px 10px 40px -5px
</p></div></body></html></pre>
Box Shadow Property with Color Value
To set a color to the shadow of a box, we require to specify atleast three values. The first two values are the horizontal and vertical offsets while the third value is for the color, the color can be specified along with blur and spread as well. The color can be specified in different format (eg. color names, hexadecimal values, rgb values etc.). This is shown in the following example.
.third {
background-color: lightcoral;
box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%);
}
</style></head><body><h2>
CSS box-shadow property
</h2><p>
The color can be specified as third parameter,
fourth parameter of even fifth parameter.
The specified color will be applied to the shadow.
</p><div class="container"><p class="first boxes">
box-shadow: 10px -10px grey
</p><p class="second boxes">
box-shadow: 10px 10px 20px rgb(51, 204, 0)
</p><p class="third boxes">
box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%)
</p></div></body></html></pre>
Box Shadow Property with Inset Value
To let the box shadow appear inside the element and not outside the element, we use the inset value. This is shown in the following example
.first {
background-color: lightgreen;
box-shadow: 10px -10px red inset;
}
.second {
background-color: lightgreen;
box-shadow: 10px 10px 20px rgb(51, 204, 0) inset;
}
</style></head><body><h2>
CSS box-shadow property
</h2><p>
The inset value places the
shadow within the elment.
</p><div class="container"><p class="first boxes">
box-shadow: 10px -10px red inset
</p><p class="second boxes">
box-shadow: 10px 10px 20px rgb(51, 204, 0) inset
</p></div></body></html></pre>
Box Shadow Property with Multiple Shadows
To have multiple shadows for a box, each style must be comma separated. The shadows will appear in the order specified in box-shadow property. This is shown in the following example.
.second {
background-color: lightgreen;
box-shadow: 5px 5px red,
10px 10px blue,
15px 15px green;
}
</style></head><body><h2>
CSS box-shadow property
</h2><p>
Number of shadows can be altered by
specifying the different styles and
separating them by commas.
</p><div class="container"><p class="first boxes">
box-shadow: multiple shadows
</p><p class="second boxes">
box-shadow: multiple shadows
</p></div></body></html></pre>