CSS border-inline is a shorthand property that sets the values for different logical inline border attributes, border-inline-width, border-inline-style and border-inline-color in one single declaration. The border-style is required. Default values of color and width will be used if not specified. The property is affected by writing mode, text-orientation and direction.
It specifies the width of element borders in inline direction. Default value is medium.
border-inline-style
It specifies the style of element borders in inline direction. Default value is none.
border-inline-color
It specifies the color of element borders in inline direction. Default value is color of the text.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Border Inline Property
The following examples explain the border-inline porperty with different values.
Defining All Values of Border Inline Property
To define the values of border-inline-width, border-inline-style and border-inline-color in one single declaration, we use the border-inline property.The following example shows how this is done.
This has border-inline property with
4px width solid style and red color
</p><p class="borders border2">
This has border-inline property with
6px width dashed style and blue color
</p><p class="borders border3">
This has border-inline property with
8px width dotted style and yellow color
</p><p class="borders border4 ">
This has border-inline property with
8px width double style and brown color
</p></div></body></html></pre>
Constituent Properties of Border Inline Property
The border-inline property is composed of properties border-inline-width, border-inline-style and border-inline-color. The following example shows how these individual properties combine to show the border-inline effect.
This has border-inline-width:4px,
border-inline-style:solid,
border-inline-color:red
</p><p class="borders border2">
This has border-inline-width:6px,
border-inline-style:dashed,
border-inline-color:blue
</p></div></body></html>
Border Inline Property with Writing Mode
The border-inline property is affected by the writing mode which decides the direction of the inline borders. In vertical writing mode, it affects the top and bottom borders while in horizontal writing mode, it affects the left and right borders. These are shown in the following example.
CSS border-block property is a shorthand property for assigning values to border-block-color, border-block-style and border-block-width in one go. The border-block-style is required parameter. If other parameters are not mentioned then default values will be used. This property depends on the direction of the block which is determined by the writing mode.
It specifies the width of the border in the block direction. Default is medium.
border-block-style
It specifies the style of the border in the block direction. Default is none.
border-block-color
It specifies the color of the border in the block direction. Default is text’s color.
initial
This sets the property to its default value.
inherit
This inherits the property from the parent element.
Examples of CSS Border Block Property
The following examples explain the border-block property with different values.
Setting the Width of Border
To set the width of the border, we use the border-block-width component of the border-block property. In the following example, we have used ‘thick’ and 10px width for border-block-width property.
#width2 {
padding: 30px;
border-block-style: solid;
border-block-width: 10px;
}
</style></head><body><h2>CSS border-block property</h2><p id="width1">
This first example shows the width property
of the border-block with thick value.
</p><p id="width2">
This second example shows the width property
of the border-block with 10px value.
</p></body></html></pre>
Setting the Style of Border
To set the style of the border, we use the border-block-style component of the border-block property. In the following example, we have used 'solid' and 'dashed' styles for border-block-style property.
#style2 {
padding: 30px;
border-block-style: dashed;
}
</style></head><body><h2>CSS border-block property</h2><p id="style1">
This first example shows the style property
of the border-block with solid value.
</p><p id="style2">
This second example shows the style property
of the border-block with dashed value.
</p></body></html></pre>
Setting the Color of Border
To set the color of the border, we use the border-block-color component of the border-block property. In the following example, we have used 'red' and 'blue' colors for border-block-color property.
#color2 {
padding: 30px;
border-block-style: solid;
border-block-color:blue;
}
</style></head><body><h2>CSS border-block property</h2><p id="color1">
This first example shows the color property
of the border-block with red value.
</p><p id="color2">
This second example shows the color property
of the border-block with blue value.
</p></body></html></pre>
Setting all Values at Once
To set the values of width, style and color at once, we can simply use the border-block property by providing all the values at once. In the following example, the width has been taken as 5px, style as dashed and color as green.
</style></head><body><h2>CSS border-block property</h2><p id="block">
This example shows the border-block property
defining all values at once.
</p></body></html></pre>
Setting Border Block with Writing Mode
The writing-mode in the context of border-block influences the direction of the border. By default, the border appears horizontally, however by changing the writing mode, the border's direction can be changed
The border property creates a border around an HTML element, such as a div, image, or text. You can customize the border by changing the border style, width, radius, and color for each side of the element. Borders help in improving the readability of the content as it provide separation of content and is also useful for highlighting important sections of the web page.
CSS Borders Example
You can try different ways to set the border in the below section and you can change the values as well.
CSS Border Interactive Example
Interactive example for CSS BordersBorder Width: pxBorder Radius: pxBorder Style: Solid Dashed Dotted Double Groove Ridge Inset Outset Border Color:
CSS Border Shorthand Property
You can use the shorthand CSS border property to specify the border width, style, and color.
Syntax
The syntax for the border shorthand property is as follows:
In this example, we have used the CSS border property to set the border of a div and paragraph element.
<html><head><style>
p {
border: solid 4px grey;
padding: 10px;
}
div{
border: darkred solid 5px;
padding: 10px;
}
</style></head><body><p> Check the borders of paragraph !!!</p><div> Check the borders of div !!!</div></body></html></pre>
Types of Border Properties
In CSS, we can style the following border properties:
border-style: It specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
border-width: It specifies the width of a border.
border-color: It specifies the color of a border.
CSS border-style Property
To specify the type of border style for an element, the border-style property is used. You can specify border style as solid, dashed, or dotted. Check out the output of the following example for all the types of border styles.
Example
In this example, we have used the border-style property to set the different border styles for each paragraph element.
You can specify different border styles for each side of the element. To set the border-style property for the individual sides of the element, we use the following CSS properties:
border-top-style: It sets the style of an element's top border.
border-bottom-style: It sets the style of an element's bottom border.
border-left-style: It sets the style of an element's left border.
border-right-style: It sets the style of an element's right border.
Example
In this example, we have used the CSS border-style property for individual sides to set the different border styles for each side of a paragraph element.
<html><head><style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
padding: 2em;
}
</style></head><body><h2>Border Style Individual Side</h2><p>Different border styles on all sides.</p></body><html></pre>
CSS border-width Property
The border-width is used to specify the thickness of a border around an element. It can have values like thin, medium, thick, or any length (in px, or em ). Let us look at an example of this.
Example
In this example, we have used the CSS border-width property to set the different border widths for each paragraph element.
Declare border-style property before declaring border-width property, else the border effect will not be seen.
Border Width For Individual Sides
You can specify different border widths for each side of an element. To set the border-width property for individual sides, use the following CSS properties:
border-top-width: Sets the width of the top border.
border-bottom-width: Sets the width of the bottom border.
border-left-width: Sets the width of the left border.
border-right-width: Sets the width of the right border.
Example
In this example, we have used the CSS border-width property for individual sides to set different border widths for each side of a paragraph element.
<html><head><style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: thick;
border-bottom-width: medium;
border-left-width: 10px;
padding: 2em;
}
</style></head><body><h2>Border Width Individual Sides</h2><p>Different border widths on all sides.</p></body></html></pre>
CSS border-color Property
The border-color is used to set the color of the border. If no color is specified for the border, the default value is currentColor i.e. the foreground color.
Example
In this example, we have used the CSS border-color property to set the border colors of paragraph elements using the color name and hex value.
Declare border-style property before declaring border-color property, else the border effect will not be seen.
Border Color For Individual Sides
You can specify different border colors for each side of an element. To set the border-color property for individual sides, use the following CSS properties:
border-top-color: Sets the color of the top border.
border-bottom-color: Sets the color of the bottom border.
border-left-color: Sets the color of the left border.
border-right-color: Sets the color of the right border.
Example
In this example, we have used the CSS border-color property for individual sides to set different border colors for each side of a paragraph element.
<html><head><style>
p {
border: solid 7px;
border-top-color: red;
border-right-color: #0000ff;
border-bottom-color: rgb(100,123,111);
border-left-color: rgba(50,123,111,0.4);
padding: 10px;
}
</style></head><body><h2>Border Color Individual Sides</h2><p>Different border colors on all sides.</p></body></html></pre>
Borders Individual Side Shorthand Property
To apply all the border properties, such as style, width, and color, to just one side of an element, we can make use of the shorthand border property for individual sides. The individual side border shorthand properties are as follows:
border-top property: It is a shorthand property for setting the top border properties.
border-bottom property: It is a shorthand property for setting the bottom border properties.
border-left property: It is a shorthand property for setting the left border properties.
border-right property: It is a shorthand property for setting the right border properties.
Syntax
The syntax for the individual side border shorthand properties is as follows:
The above code will have a 5px thick, solid, and gray border on all the sides except for the bottom where the width will be 15px.
Example
Here is an example of overriding the border shorthand property:
<html><head><style>
div {
padding: 10px;
border: 5px solid gray;
border-bottom-width: 15px;
}
</style></head><body><div> Check the borders!!! </div></body></html></pre>
Applying Borders to Inline Elements
Borders can be given to any inline element in a similar manner. The border's thickness will not have any effect on the line height of the element. If left and right borders are specified in an inline element, it will displace the text around the border. Here is an example of applying a border to an inline element.
Example
In this example, we have used the border property on span (inline element).
<html><head><style>
span {
border: 5px solid black;
background-color: silver;
}
</style></head><body><p>
Check the <span>inline elements</span> with
borders and rest has no border.
</p></body></html></pre>
CSS border-image Property
To set images as borders for another element like div, span, body, paragraph, etc, you can use the border-image property. First you need to declare the border-style property before providing an image source, else no image will be displayed as the border.
Example
Here is an example of using the border-image property to set an image as the border of
<html><head><style>
div{
background-color: #f0f0f0;
border: 20px solid transparent;
border-image: url(/css/images/border.png) 40;
padding: 20px;
}
</style></head><body><div><p>
This is an example of setting a
border image using CSS
</p></div></body></html></pre>
CSS border-radius Property
CSS border-radius property is used to specify the roundness of border edges. The value for this property can be in length (px, em) or percentages. A border radius of 50% indicates a complete circle.
Example
In this example, we have created a rounded square and a circle using the border-radius property.
Styling tables in a webpage involves using CSS properties to customize the appearance of tables. CSS properties such as border-collapse, border-spacing, and caption-side can be applied to tables to control the borders, spacing, and alignment of the table and its cells.
This chapter discusses how to set different properties of an HTML table using CSS.
CSS Table Border Styling
To style table borders, we use CSS properties like border and border-radius. You can set the border’s width, color, and style with border property on the table, rows, or individual cells.
border: CSS border property sets the width, style, and color of all four sides of the table border (e.g., border: 1px solid black;).
border-radius: CSS border-radius property rounds the corners of the table border (e.g., border-radius: 5px|50%).
Example
In this example, we have set the rounded table border using CSS border and border-radius property.
<!DOCTYPE html><html><head><style>
table {
border-radius: 10px;
border: 2px solid #031926;
width: 100%;
}
td {
border: 1px solid black;
height: 50px;
vertical-align: middle;
text-align: center;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
CSS Table Border Collapse
To merge the cell borders of the table or keep the cell borders separated, the border-collapse property is used. To merge the cell borders, collapse value is used while separate value keeps the border distinct.
Example
In the following example, we have used border-collapse property with collapse and separate values.
<!DOCTYPE html><html><head><style>
table {
border: 3px solid purple;
}
th, td {
border: 1px solid black;
padding: 6px;
}
</style></head><body><h2> border-collapse: separate </h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table><h2> border-collapse: collapse </h2><table style="border-collapse: collapse;"><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
CSS Table Border Spacing
To set the distance separating adjacent cell borders in a table, the border-spacing property is used. This property may be specified as either one or two values.
border-spacing: 2px: It applies 2px spacing to both vertical and horizontal borders.
border-spacing: 1cm 2em: In this case, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
Example
In this example, we have set the border-spacing property to 1em horizontally and 0.5em vertically.
<!DOCTYPE html><html><head><style>
table {
border-collapse: separate;
border-spacing: 1em 0.5em;
border: 3px solid;
}
td {
width: 1.5em;
height: 1.5em;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
Note: The border-spacing property only works when border-collapse is set to separate. If you set border-collapse to collapse, the border-spacing property will have no effect, and the borders will collapse into a single line.
CSS Tables Caption Side
To control the placement of the table caption, the caption-side property is used.
Example
In this example, we have used the caption-side property to place the table caption at the top and bottom of the table in the first and second table respectively.
<!DOCTYPE html><html><head><style>
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</style></head><body><table class="top"><caption>
Caption ABOVE the table
</caption><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table><br /><table class="bottom"><caption>
Caption BELOW the table
</caption><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
CSS Tables Empty Cells
To render the empty cells of the table, the empty-cells property is used. The empty-cell property is applied only to tables and table cells. It has the following two values:
show: It is the default value that indicates that empty cells should be shown with borders and spacing as if they contained content.
hide: It indicates that empty cells should be hidden and not take up any space. Borders and spacing for empty cells will not be displayed.
Example
In this example, we have used the empty-cells property with show and hide value to show and hide the empty cells respectively.
<!DOCTYPE html><html><head><style>
table {
width: 350px;
border-collapse: separate;
empty-cells: show;
}
td,th {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #999999;
}
</style></head><body><h2> Empty Cells: Show </h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td></td></tr></table><h2> Empty Cells: Hide </h2><table style="empty-cells: hide;"><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td> Data 1</td><td> Data 2</td><td></td></tr></table></body></html></pre>
CSS Table Layout
CSS table-layout property is used to control how a browser should render a table. It defines the algorithm used to lay out table cells, rows, and columns. It has the following property values:
auto: It is the default value where the browser calculates the width of columns and cells based on the content.
fixed: It sets a fixed column width based on the specified table or column width. If width isn't specified, then the first row is used to determine column width and the rest of the rows follow the same column widths irrespective of the content.
Example
In this example, the table-layout property is used with auto and fixed values.
<!DOCTYPE html><html><head><style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style></head><body><h2>Table with fixed layout</h2><table style="table-layout: fixed; "><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr></table><h2>Table with auto layout</h2><table style="table-layout: auto; "><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td>This is some longer content in Column 1</td><td>Short content</td><td>Even longer content that might wrap in Column 3</td></tr><tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr></table></body></html></pre>
Note: The fixed table layout is faster than auto, as the fixed value does not depend on the table's content but rather on the table's width.
CSS Table Contents Alignment
To align the content of table cells, CSS properties such as text-align and vertical-align properties are used.
text-align: It sets the horizontal alignment of the text content within table cells. It can have values like left, right, center, and justify.
CSS vertical-align: It sets the vertical alignment of the content within table cells. It can have values like top, bottom, and middle.
Example
In this example, we have used the text-align and vertical-align properties to align the text content horizontally and vertically.
<!DOCTYPE html><html><head><style>
table, td, th {
border: 2px solid black;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 70px;
}
</style></head><body><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td style="text-align: center;">Data Center</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td style="vertical-align: bottom">Data Bottom</td><td> Data 4</td></tr><tr><td> Data 1</td><td style="vertical-align: top">Data Top</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
Note: The default horizontal alignment of <th> and <td> is center and left respectively. The default vertical alignment of both <th> and <td> is middle.
CSS Tables Background color
To set the background color of the cell, row, or entire table, the CSS background-color property is used.
Syntax
The syntax for setting the background color of the cell, row, and table is as follows:
/* To set the background color of table */table{background-color: #f2f2f2;}/* To set the background color of a cell a row */td{background-color: #f2f2f2;}/* To set the background color of a row */tr{background-color: #ffffff;}
Example
In this example, we have set the background color of the table using the element selector. To set the background color of the row and a cell, we have used inline CSS.
<!DOCTYPE html><html><head><style>
table {
border: 2px solid black;
background-color: rgb(237, 181, 237);
width: 100%;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: middle;
text-align: center;
}
</style></head><body><h2>Background color property</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td style="background-color: #f0f0ff;"> Data 2</td><td>Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr style="background-color: #04af2f;"><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
CSS Table Text Font Styles
To style the text content of the table, we can use CSS font properties such as font-size, font-family, font-weight, etc. on the table elements.
Example
In this example, we have set the font-size and font-family of the th and td tags.
Dividers in a table are used to separate the content of the table and make it more readable. To set a vertical divider, the border-right property is used whereas border-bottom property is used to set a horizontal divider.
Example
In this example, we have set the vertical divider using the border-right property and the horizontal divider using the border-bottom property.
.vDiv {
border-right: 2px solid black;
}
</style></head><body><h2>Horizontal Divider</h2><table><tr><th class="vDiv">Header 1</th><th>Header 2</th><th>Header 3</th></tr><tr><td class="vDiv"> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td class="vDiv"> Data 1</td><td> Data 2</td><td> Data 3</td></tr><tr><td class="vDiv"> Data 1</td><td> Data 2</td><td> Data 3</td></tr></table></body></html></pre>
CSS Striped Table
A striped table is a table that has alternating background colors for rows, making it easier to read and understand the data. To create a striped table, the nth-child selector is used to apply different background colors to odd and even rows.
Example
In this example, we have used the nth-child selector to set the green and light green background color of the cells creating a striped table.
tr:nth-child(odd) {
background-color: rgba(4, 175, 47, 1);
}
tr:nth-child(even) {
background-color: rgba(4, 175, 47, 0.4);
}
</style></head><body><h2>Striped table</h2><table><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr><tr><td> Data 1</td><td> Data 2</td><td> Data 3</td><td> Data 4</td></tr></table></body></html></pre>
CSS Responsive Table
A responsive table refers to a table that adjusts and adapts its layout and formatting based on different screen sizes and resolutions. You can use the overflow-x property to add a horizontal scroll bar to the table in small screen sizes when the entire screen is not seen.
Example
In this example, we have used overflow-x property to add a horizontal scroll to adjust to smaller screens.
Links are used to navigate from one webpage to other with a single click. We can use CSS properties to style links in various ways.
CSS Links Example
We can create a link in webpage using <a> tag. With CSS we can style this to built text link, button link and image link as shown below.
CSSCSS Button
Table of Contents
States of Link
Default Styles of Links
CSS Text Link
Styling States of Link
CSS Button Links
CSS Image Links
States of Link
A link in a webpage exist in various states, and these states of link can be styled using pseudo-classes in CSS. Following are common states of link.
Link: Represents unvisited links. This state of links can be styled with :link pseudo class. (This is default state for anchor tag).
Visited: Represents the links that are already visited (present in browser’s history). This state of links can be styled with :visited pseudo class.
Hover: Represents the state when user hover’s the mouse pointer over link. This state of links can be styled with :hover pseudo class.
Active: Represents the state when user clicks the link. This state of links can be styled with :active pseudo class.
Default Styles of Links
Following are default styles applied to a link in webpage. You can modify this style using CSS.
All the links will be underlined. You can remove this by setting text-decoration property to ‘none’.
All the unvisited links will be in blue color and visited links will be purple. You can use color property to modify this
The mouse pointer changes to a little hand icon when you hover over a link. You can use cursor property to modify this.
Hovered links will be underlined and active links are styled in red.
CSS Text Link
A text content when clicked will navigate to a different webpage or a section of same page is called text link. Following example show how to make a text link.
In this article, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc.
Table of Contents
Round Cornered Images
Circular And Elliptical Images
Bordered Images
Image Filters
Image as a Card
Center an Image
Text Inside Image
Image Fade In Overlay
Round Cornered Images
The following example demonstrates how to use border-radius property to create rounded border image.
The following example demonstrates how to use border-radius: 50% property to create images in circle and ellipse shape. When height and width of image are same we will get a circular image and when they are not same we will get elliptical images.
In CSS position property can be used to position text in different locations inside an image.
First we need to set position property for image container as position: relative and position property of text as position: absolute. Now you can position of text elements using inset properties like top, bottom, right and left.
Example
<!DOCTYPE html><html><head><style>
.container {
position: relative;
border: 2px solid #ef2c2c;
}
.center {
position: absolute;
top: 45%;
width: 100%;
text-align: center;
}
.top-left {
position: absolute;
top: 12px;
left: 30px;
}
.top-right {
position: absolute;
top: 12px;
right: 30px;
}
.bottom-left {
position: absolute;
bottom: 12px;
left: 30px;
}
.bottom-right {
position: absolute;
bottom: 12px;
right: 30px;
}
img {
width: 100%;
opacity: 0.7;
}
</style></head><body><div class="container"><img src="/css/images/red-flower.jpg"
width="1000px" height="350px"><h3 class="center">
Text at Center
</h3><h3 class="top-left">
Text at Top Left
</h3><h3 class="top-right">
Text at Top Right
</h3><h3 class="bottom-left">
Text at Bottom Left</h3><h3 class="bottom-right">
Text at Bottom Right
</h3></div></body></html></pre>
Image Fade In Overlay
Fade in overlay effect shows text when you hover over the image. There are several other overlay effects, for complete understanding checkout our tutorial on CSS overlay effects.
Let's look at an example for image fade in overlay effect.
CSS transform are used to animate elements in three-dimensional space by using properties like translate, scale and rotate. In other words, these functions let you rotate, scale, and move elements along the X, Y, and Z axes, adding depth and perspective to your designs.
2D Transform
3D Transform
Table of Contents
CSS 3D Translate()
CSS 3D Rotate()
CSS 3D Scale()
CSS 3D Transform Related Properties
CSS 3D Translate()
CSS translate3d() function moves an element in 3D space by specifying offsets along the X, Y, and Z axes, where the Z-axis controls depth (distance towards or away from the viewer). The following example shows a box that moves in 3D space when hovered over. The perspective property is used to give a sense of depth for 3d effect.
/* Hover State with Different 3D Transformation */
.box:hover {
transform: translate3d(-50px, -50px, -100px);
background-color: #2ecc71;
cursor: pointer;
}
</style></head><body><div class="container"><div class="box">
3D Box
</div></div></body></html></pre>
CSS 3D Rotate()
CSS rotate3d() function allows you to rotate an element around a specified axis in 3D space by defining the X, Y, and Z components of the rotation vector and the angle of rotation. Here is an example showing a box that rotates in 3D space when we hover over it, creating a dynamic visual effect.
/* Hover State with Different 3D Rotation */
.box:hover {
transform: rotate3d(1, 1, 0, -45deg);
background-color: #2ecc71;
cursor: pointer;
}
</style></head><body><div class="container"><div class="box">
3D Box
</div></div></body></html></pre>
CSS 3D Scale()
CSS scale3d() function scales an element in 3D space by specifying scaling factors along the X, Y, and Z axes, allowing for uniform or non-uniform scaling. The following example shows a box that scales in 3D space when hovered over, creating a visually appealing zoom effect.
/* Hover State with Different 3D Scaling */
.box:hover {
transform: scale3d(1.5, 1.5, 0.5);
background-color: #2ecc71;
cursor: pointer;
}
</style></head><body><div class="container"><div class="box">
3D Box
</div></div></body></html></pre>
CSS 3D Transform Related Properties
The following table lists all the various properties that are used to transform the elements in the three-dimensional space.
Property
Description
Example
backface-visibility
CSS backface-visibility property sets the visibility of back face of an element to the user.
Try It
perspective
CSS perspective property determines the distance between the z=0 plane and the user.
Try It
perspective-origin
CSS perspective-origin property determines the position at which the user is looking at the 3D-positioned element.
Try It
rotate3d()
CSS rotate3d() function rotates an element in the three-dimensional space.
Try It
scale3d()
CSS scale3d() function scales an element in the three-dimensional space.
Try It
transform
CSS transform property transforms an element in the three-dimensional space.
Try It
translate
css translate property translates an element in three-dimensional space.
Try It
rotateZ()
CSS rotateZ() function rotates an element around the z-axis.
Try It
scaleZ()
CSS scaleZ() function scales an element up or down along the z-axis.
Try It
translateZ()
CSS translateZ() function translates an element up or down along the z-axis.
CSS transforms are used to modify the element’s shape and sizes and are responsible for movements of elements in two-dimensional space using functions like translate(), scale(), rotate(), and skew(). These functions allow you to move, scale, rotate, and skew elements along the X and Y axes, creating various visual effects and manipulations.
2D Transform
3D Transform
Table of Contents
CSS 2D Translate
CSS 2D Rotate
CSS 2D Scale
CSS 2D Skew
CSS 2D Transform Related Functions
CSS 2D Translate
CSS translate() function moves an element along the X and Y axes.
Example
The following example shows a box that moves along these axes when hovered over.
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>
CSS fonts allows to customize font style of webpages using various font related properties. In this tutorial we will understand the font styling in CSS.
What is CSS Font?
In CSS, the font property is used to style and adjust type of text used in webpage.
You can define fonts and customize their appearance by setting properties like font-family, font-size, font-weight and font-style. You can also use the shorthand property font to manipulate all the font style.
Types of CSS Fonts
Monospace Fonts: The font in which every letter have equal width.
Serif Fonts: Have small stroke at the edge of each letter.
San-Serif Fonts: Clean fonts with out any strokes.
Fantasy Fonts: Decorative fancy fonts.
Cursive Fonts: The font that resembles human handwriting.
Popular CSS Fonts
Here is a table with some popular font and their generic font-family.
Generic Font Family
Examples of Font Names
Serif
Times New Roman Georgia Garamond
Sans-serif
Arial Verdana Helvetica
Monospace
Courier New Lucida Console Monaco
Cursive
Brush Script MT Lucida Handwriting
Fantasy
Copperplate Papyrus
Setting Text Fonts
The font-family property is used to specify font name for a text content.
Example
In this example, we have used the font-family property to set the font of the paragraph element.
<html><head><style>
p {
font-family: Lucida Handwriting, Cursive;
}
</style></head><body><p >
This is a font that written in Lucida
Handwriting. THis is a font that looks
like human handwriting.
</p></body></html></pre>
Setting Text Font Size
To set the font size of the text, we use font-size property. You can use its values such as small, medium, and, large to get a variety of font sizes of the text.
Example
In this example, we have used the font-size property with its different values to set the size of the text.
.percent {
font-size: 120%;
}
</style></head><body><h2>CSS Font-Size Examples</h2><p class="small">This text has a 'small' font size.</p><p class="medium">This text has a 'medium' font size.</p><p class="larger">This text has a 'larger' font size.</p><p class="px">This text has a font size of 18px.</p><p class="percent">This text has a font size of 25%.</p></body></html></pre>
Setting Font Weight
You can use the font-weight property to set the boldness of the text.
Example
In this example, we have used the font-weight property to set the boldness of the text. The valid numeric value is from 100-900 for number class.
.number {
font-weight: 600;
}
</style></head><body><h2>CSS font-weight Property</h2><p class="normal">This text has a 'normal' font-weight.</p><p class="bold">This text has a 'bold' font-weight.</p><p class="lighter">This text has a 'lighter' font-weight.</p><p class="number">This text has a font-weight of 600.</p></body></html></pre>
Setting Font Style
To set the style of the written text, we use the font-style property. The text can be set to normal, italic or oblique.
Example
In this example, we have used font-style property to set the style of the written text.
.oblique {
font-style: oblique;
}
</style></head><body><h2>CSS font-style Property</h2><p class="normal">It has 'normal' font-style.</p><p class="italic">It has 'italic' font-style.</p><p class="oblique">It has 'oblique' font-style.</p></body></html></pre>
CSS Font Shorthand Property
You can use the font shorthand property to modify size, weight, and style of texts.
Example
In this example, we have used the font shorthand property to set font style, weight, size and family.
<html><head><style>
.font-example {
/* in-order: font style, weight, size, family */
font: italic bold 20px Arial, sans-serif;
}
</style></head><body><p class="font-example">
This is an example of text with an adjusted
font style, weight, and size using the font
shorthand property.
</p></body></html></pre>
CSS Font Related Properties
The following table lists all the CSS properties related to font:
Property
Description
Example
font-family
Specifies the font for an element.
Try It
font-size
Specifies the size of the font.
Try It
font-weight
Specifies the boldness of the font.
Try It
font-style
Specifies the style of the font (normal, italic, oblique).
Try It
font-variant
Specifies whether or not a text should be displayed in a small-caps font.