Blog

Flexbox

Flexbox organizes elements within a container along a single dimension, which can be either horizontally or vertically aligned.

What is CSS Flexbox?

CSS flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container.

In this article we will cover all the properties for managing the positioning, alignment, and gaps between elements along both the main and cross axes briefly.

Elements of Flexbox
Basic Flexbox Layout
Vertical Flexbox Layout
Flexbox Justify Content
Flexbox Align Items

Centering a Div
Flexbox Wrap Property
Flexbox Align Self
Flexbox Container Properties
Flexbox Items Properties

Elements of Flexbox

Flexbox Container: The flex container defines the outer element of flexbox, where all the child elements are present. A flexbox container can be defined by setting ‘display: flex’ or ‘display: inline-flex’.
Flexbox items: Flexbox items are direct children of flexbox container. This items can be arranged vertically and horizontally inside flexbox container based on need.
Main Axis: Main axis is primary axis along which items arranged in a container. By default this is horizontal axis.
Cross Axis: >Cross axis is perpendicular axis to primary axis. By default this is vertical axis.

Following Diagram will demonstrate the CSS Flexbox:

Basic Flexbox Layout

Flexbox is commonly used to create responsive flexbox layout.

Example

<!DOCTYPE html><html lang="en"><head><style>
  .container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     height: 100vh;
  }
  .item {
     background-color: lightcoral;
     padding: 20px;
     margin: 10px;
     border: 3px solid #ccc;
  }
   </style></head><body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div></div></body></html>

Vertical Flexbox Layout

In CSS, we can also define vertical flexbox by setting flex-direction: column.

Example

<!DOCTYPE html><html lang="en"><head><style>
  .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
  }
  .item {
     background-color: lightseagreen;
     padding: 20px;
     margin: 10px;
     border: 3px solid #ccc;
  }
   </style></head><body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div></div></body></html>

Flexbox Justify Content Property

The justify-content property is commonly used inside flexbox containers to align flexbox items inside container. There are several values possible for this property, for a complete reference of justify-content property visit our tutorial on justify-content property.

Some of the commonly used values of justify-content is noted down below. There are lot more values associated with it.

// Align Item at center of main axis
justify-content: center; 

// Align Item at start of main axis
justify-content: flex-start; 

// Align Item at end of main axis
justify-content: flex-end; 

// Align Item at left side of main axis
justify-content: left;

// Align Item at right side of main axis
justify-content: right;

Flexbox Align Items Property

The align-items property in CSS is used to align flex items across cross axis (vertical axis in a row layout, horizontal axis in a column layout) of the container. There are several values associated with this property. To learn more about align-items property visit our tutorial on CSS Align Items.

// Align items at start of cross axis of container
align-items: flex-start;

// Align items at end of cross axis of container
align-items: flex-end;

// Align items at center of cross axis of container
align-items: center;

// Align baselines of items (For items with variable sizes)align-items: baseline;

// Stretch items along cross axis to fill container
align-items: stretch;

Centering a Div using Flexbox

Centering a div element( or any other elements ) is always a challenging and most discussed problem in CSS. With the help of CSS flexbox we can easily center a div element inside a container. We have to use justify-content and align-items properties to center items, following code shows how this is done.

Example

<!DOCTYPE html><html lang="en"><head><style>

  .flex-container {
     display: flex;
     /* Center horizontally */
     justify-content: center;
     /* Center Vertically */
     align-items: center;
     border: 1px solid #ccc;
     height: 250px;
     background-color: grey;
  }

  .flex-item {
     background-color: lightblue;
     border: 1px solid #333;
     padding: 5px;
     height: 70px;
     width: 70px;
  }

</style></head><body><div class="flex-container"><div class="flex-item">

     This div is in center of container
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Flexbox Wrap Property

Flexbox with wrap property allows items within a container to move to next line when there is no enough space in a single line. This helps to maintain a responsive layout.

Following code demonstrates how to use flexbox to create a responsive layout that centers its items and wraps them to fit within the available space. For a complete guidance on flex wrap, visit our tutorial on CSS flex-wrap.

.container{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}.item{padding: 20px;margin: 10px;/* base size 100px */flex: 1 1 100px;}

Flexbox Align Self Property

In CSS, we have align-self property which can be used to override align-items property set on container. This helps to dynamically place each items at special locations inside container.

Following code shows how to use align-self property. Here we can see that align-items: stretch is not applicable to second and third items, this property is override by align-self property of items.

.container{display: flex;flex-direction: row;justify-content: space-around;align-items: stretch;height: 250px;}.item{background-color: lightpink;padding: 20px;margin: 10px;border: 1px solid #ccc;}.item:nth-child(2){/* Center 2nd item along the cross axis */align-self: center;}.item:nth-child(3){/* Align 3rd item at the end of the cross axis */align-self: flex-end;}

CSS Flexbox Container Properties

Following are all the CSS properties that can be applied to flex container.

Property	Value	Example
flex-direction	Sets the flex direction of the flex items.	Try It
flex-wrap	Sets whether flex items should wrap onto the next line	Try It
justify-content	Sets the alignment of flex items along the main axis.	Try It
align-items	Sets the alignment of flex items along the cross axis.	Try It
align-content	Sets the alignment and spacing of flex lines within the flex container.	Try It
flex-flow	Sets both the flex-direction and flex-wrap properties.	Try It

CSS Flexbox Items Properties

Following are all the CSS properties that can be applied to flex items.

Property	Value	Example
flex-grow	Sets flex item to grow within a flex container.	Try It
flex-shrink	Sets flex item to shrink in size to fit the available space.	Try It
flex-basis	Sets the initial size of a flex item.	Try It
flex	Shorthand property, combines three flex-related properties: flex-grow, flex-shrink, and flex-basis.	Try It
align-self	Sets the alignment of a specific flex item along the cross-axis.	Try It
order	Used to specify the order in which flex items appear inside their flex container.	Try It

August 20, 2025

Grid Layout

CSS Grid Layout is a two-dimensional layout system for developing responsive webpages. In this tutorial we will learn how to design a webpage layout using grid systems.

What is a Grid Layout?

Grid Layout used to enhance user experience over all the user devices by providing a responsive and flexible arrangement of HTML components over the webpage.

Grid is ideal for creating overall layout of a webpage, while flexbox is mostly used to align items inside a container.

Grid Elements
Display Grid Property
Grid Rows and Columns

Grid Gap
Grid Lines
CSS Grid Properties Reference

Grid Elements

In a grid layout system, we have two elements, Grid Container and Grid Item.

Grid Container

Grid container defines the outer element of grid, where all the child elements are present. A grid container can be defined by setting display: grid or display: inline-grid

Grid items

Grid items are all the direct elements inside grid container. This items can be arranged vertically and horizontally inside flexbox container based on need.

Display Grid Property

A HTML element become a grid container if we set value of display property as grid or inline-grid. All direct children of the grid container automatically become grid items.

grid: This value defines block level grid container, means it behave like a block element taking full width available. ( Similar to div )
inline-grid: This value defines inline level grid container, means it behave like a inline element taking as much width as it’s content. ( Similar to span )

Example

Following example show the difference between grid and inline-grid

<!DOCTYPE html><html lang="en"><head><style>
  .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
     width: 100%;
     background-color: lightblue;
  }
  .inline-grid-container {
     display: inline-grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
     background-color: lightgreen;
  }
  .grid-item {
     background-color: lightcoral;
     padding: 20px;
     text-align: center;
  }   </style></head><body><h3>Inline Grid Example</h3><p>
     Here is an example of 
     &lt;span class="inline-grid-container"&gt;&lt;span class="grid-item"&gt;1&lt;/span&gt;&lt;span class="grid-item"&gt;2&lt;/span&gt;&lt;span class="grid-item"&gt;3&lt;/span&gt;&lt;/span&gt; 
     inline grid.
   </p><h3>Grid Example</h3><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div></body></html>

Grid Rows and Columns

In CSS, we can define the number of columns and rows required in our layout. Each cell will represent a grid item. Following code shows how to define rows and columns in grid.

Example

In this example we will create two grid layout one is for row and another one is for column, each grid has row and column but showing them individually will help you to crack the rows and columns.

<!DOCTYPE html><html lang="en"><head><style>
    .grid-container {
        display: grid;
        gap: 10px;
        padding: 10px;
        width: 75%;
    }
    .grid-item {
        background-color: #4CAF50;
        border: 1px solid #ddd;
        padding: 20px;
        text-align: center;
        font-size: 1.2em;
        color: white;
    }
    .row{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
    .column{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Grid Layout Example&lt;/h1&gt;&lt;h3&gt;Grid Rows - 3 Rows X 1 Column&lt;/h3&gt;&lt;div class="grid-container row"&gt;&lt;div class="grid-item item1"&gt;
     Item 1
  &lt;/div&gt;&lt;div class="grid-item item2"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item item3"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;h3&gt;Grid Columns - 1 Row X 3 Columns &lt;/h3&gt;&lt;div class="grid-container column"&gt;&lt;div class="grid-item item1"&gt;
     Item 1
  &lt;/div&gt;&lt;div class="grid-item item2"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item item3"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Grid Gap



The grid gap properties are used to add gaps between rows and columns of grid items. We have three properties associated with this, gap, column-gap and row-gap.



The gap property can set equal gap for both row and column, while row-gap and column-gap can set different gap values for row and column. Row value and column value have more preference over gap value, so if we define all three row value and column value will override over gap value.



Example



Here in this example we tried to explain the gap between grid items.



<!DOCTYPE html><html lang="en"><head><style>
  .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 100px 100px 100px;
     /* Sets both row and column gaps to 20px */
     gap: 20px; 
     /* Make gap between rows as 10px (override) */
     row-gap: 10px; 
     /* Make gap between columns as 5px (override) */
     column-gap: 5px; 
  }
  .grid-item {
     background-color: #4CAF50;
     border: 1px solid #ddd;
     padding: 20px;
     text-align: center;
     font-size: 1.2em;
     color: white;
  }   </style></head><body><h1>Grid Gap Example</h1><div class="grid-container"><div class="grid-item">
     Item 1
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 3
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 4
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 5
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 6
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Grid Lines



In CSS, Grid items can be placed according to the imaginary ines between grid cell called grid items. The lines between columns are called column lines and lines between rows are called row lines.







CSS Grid Properties Reference



Following is the list of CSS properties related to grid:



property value Example
display Define whether an element is a grid container or an inline grid container. Try It
gap Defines the gap between rows and columns. Try It
grid-area Defines the location and size of the grid item within a grid layout. Try It
grid-column Control the placement of a grid item within the grid container in the column direction. Try It
grid-row Control the placement of a grid item within the grid container in the row direction. Try It
grid-template Specify the grid columns, grid rows and grid areas. Try It
grid-auto-columns Determines the size of automatically generated grid column tracks or a pattern of such tracks. Try It
grid-auto-rows Determines the size of automatically- generated grid rows tracks or a pattern of such tracks. Try It
grid-auto-flow Specifies arrangement of the grid item within the grid. Try It

property	value	Example
display	Define whether an element is a grid container or an inline grid container.	Try It
gap	Defines the gap between rows and columns.	Try It
grid-area	Defines the location and size of the grid item within a grid layout.	Try It
grid-column	Control the placement of a grid item within the grid container in the column direction.	Try It
grid-row	Control the placement of a grid item within the grid container in the row direction.	Try It
grid-template	Specify the grid columns, grid rows and grid areas.	Try It
grid-auto-columns	Determines the size of automatically generated grid column tracks or a pattern of such tracks.	Try It
grid-auto-rows	Determines the size of automatically- generated grid rows tracks or a pattern of such tracks.	Try It
grid-auto-flow	Specifies arrangement of the grid item within the grid.	Try It

August 20, 2025

grid Property

CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration. It’s a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-columns, grid-auto-flow and grid-auto-rows

Syntax

grid: none| grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

Property Values

Value	Description
none	It indicates no specific sizing of rows or columns. Default.
grid-template-rows / grid-template-columns	It specifies the number of rows with their heights and the number of columns with their width.
grid-template-areas	It specifies the grid layout with names.
grid-template-rows / grid-auto-columns	It specifies the number of rows with their heights and auto size of the column.
grid-auto-rows / grid-template-columns	It specifies the auto size of rows and specifies the number of columns with their width.
grid-template-rows / grid-auto-flow grid-auto-columns	It specifies the number of rows with their height, the position of auto-placed items and the auto size of columns.
grid-auto-flow grid-auto-rows / grid-template-columns	It specifies how to place auto-placed items, the auto size of the rows, and specifies the number of columns with their width.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Grid Property

The following examples explain the grid property with different values.

Grid Property with Row Height and Column Width

To define rows and columns with their sizes in a grid layout, we specify the height values for rows and width values for columns, separated by a / (e.g. 10px 10px / 20px 20px specifies 2 rows of 10px height and 2 columns of 20px width) to the grid property. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .container {
     display: grid;
     grid: 150px 100px/ auto auto auto;
     gap: 10px;
     background-color: lightblue;
  }
  .container&gt;div {
     border: 2px solid gray;
     color: white;
     text-align: center;
     padding: 30px 0px;
     margin: 10px;
     background-color: lightcoral;
  }   </style></head><body><h2>
  CSS Grid Property   </h2><p><strong>
     grid: 150px 100px / auto auto auto 
  &lt;/strong&gt;; 
  There are two rows: first row's height is 150px,
  second row's height is 100px. There are three 
  columns: all colums have auto width, meaning
  they will be adjusted according to their 
  content.   </p><div class="container"><div>
     Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;div&gt;
     Item-4
  &lt;/div&gt;&lt;div&gt;
     Item-5
  &lt;/div&gt;&lt;div&gt;
     Item-6
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Grid Property with Grid Template Area



To define sizes of certain portion of the grid layout such that elements can be placed in those portions, we provide names to the portions along with their size (e.g. "header header content content " indicates 2 rows and 2 columns) to the grid property. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     display: grid;
     grid: "header header header header" 100px
           "sidebar content content content" 100px
           "footer footer footer footer" 100px;
     padding: 10px;
     gap: 20px;
     background-color: lightblue;
  }
  .item1 {
     grid-area: header;
  }
  .item2 {
     grid-area: sidebar;
  }
  .item3 {
     grid-area: content;
  }
  .item4 {
     grid-area: footer;
  }
  .container&gt;div {
     background-color: lightcoral;
     text-align: center;
     color: white;
     padding: 20px;
  }   </style></head><body><h2>
  CSS Grid Property   </h2><p><strong>
     grid: "header header header header 100px
     sidebar content content content 100px
     footer footer footer footer 100px"
  &lt;/strong&gt;; 
  There are three rows and four columns. The header
  is first row and takes four columns, sidebar and
  content are second row and take single column 
  and 3 columns respectively and footer is third
  column and takes all four columns. All rows 
  have 100px height.   </p><div class="container"><div class="item1">
     This is header
  &lt;/div&gt;&lt;div class="item2"&gt;
     This is sidebar
  &lt;/div&gt;&lt;div class="item3"&gt;
     This is content
  &lt;/div&gt;&lt;div class="item4"&gt;
     This is footer
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Adjacent Sibling Selectors

Adjacent Sibling Selectors in CSS

CSS adjacent sibling selector or next sibling selector selects an element that is immediately after another element. It is used to select only those elements which immediately follow the first selector. Both elements should share the same parent.

Syntax

The syntax for CSS adjacent sibling selectors is as follows:

selector1 + selector2{/* property: value; */color: #04af2f
}

Example of Adjacent Sibling Selectors

In this example, the style is applied only to the p element which is just after the div element. The other p elements remain unaffected.

<!DOCTYPE html><html lang="en"><head><style>
  div{
     border: 2px solid #031926;
  }
  div + p {
     color: #04af2f;
  }   </style></head><body><p>
     This paragraph is above the div 
     and will not be green.
  &lt;/p&gt;&lt;div&gt;&lt;p&gt;
        This paragraph is inside a div 
        and will not be green..
     &lt;/p&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph 1 after the div 
     and will be green..
  &lt;/p&gt;&lt;p&gt;This paragraph 2 after the 
     div and will not be green..
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we have used an adjacent sibling selector to design the p element just after the h3 tag having the same parent element i.e. div container.



<!DOCTYPE html><html><head><style>
    .container {
        padding: 20px;
        border: 2px solid #031926;
        font-family: Verdana, sans-serif;
    }
    h3 + p {
        font-family: Verdana, sans-serif;
        font-size: 20px;
        font-style: italic;
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;h3&gt;This is an h3 tag&lt;/h3&gt;&lt;p&gt; 
        This is a p tag that immediately follows the h3 tag.
    &lt;/p&gt;&lt;p&gt;
        This is another p tag, but it does not immediately 
        after the h3 tag.
    &lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p tag which is outside the parent div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

General Sibling Selectors

General Sibling Selectors in CSS

CSS general sibling selector ( “~” ) selects all the elements that are siblings of a specified element sharing the same parent. It will select all matching siblings, not just the one immediately following. A tilde ( “~” ) symbol is used to denote the general sibling.

Syntax

The syntax for CSS general sibling selectors is as follows:

selector1 ~ selector2{/* property: value; */color: #04af2f
}

Example of General Sibling Selectors

In this example, we have used general sibling selector to change the text color of all p elements that are immediate siblings of the div element.

<!DOCTYPE html><html lang="en"><head><style>
  div{
     border: 2px solid #031926;
  }
  div ~ p {
     color: #04af2f;
  }   </style></head><body><p>
     This paragraph is above the div 
     and will not be blue
  &lt;/p&gt;&lt;div&gt;&lt;p&gt;
        This paragraph is inside a div 
        and will not be blue.
     &lt;/p&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph 1 after the div 
     and will be blue.
  &lt;/p&gt;&lt;p&gt;This paragraph 2 after the 
     div and will be blue.
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we have used a general sibling selector to change the background color and font of all the p elements after the h3 tag.



<!DOCTYPE html><html><head><style>
    .container {
        padding: 20px;
        border: 2px solid #031926;
        font-family: Verdana, sans-serif;
    }
    h3 ~ p {
        font-family: Verdana, sans-serif;
        font-size: 20px;
        font-style: italic;
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;h3&gt;This is an h3 tag&lt;/h3&gt;&lt;p&gt; 
        This is a p tag that immediately follows the h3 tag.
    &lt;/p&gt;&lt;p&gt;
        This is another p tag, but it is not immediately 
        after the h3 tag.
    &lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p tag which is outside the parent div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Descendant Selectors

Descendant Selectors in CSS

CSS descendant selector styles all the tags that are children of a particular specified tag. A single space between the parent element and child element is used to mention a descendant.

Syntax

The syntax for CSS descendant selectors is as follows:

selector_1 selector_2{/* property: value; */color: #04af2f
}

Descendant Selectors Example

In this example, we have set a border for all the p elements inside a div element. The p elements outside the div element will not have any styles applied to them.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    div p {
        border: 2px solid #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;This is a p element inside a div.&lt;/p&gt;&lt;p&gt;This is second p element inside a div&lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside the div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we have used CSS transition property with rotate() function of CSS transform property to rotate the written text of the div element with the class name container.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .container, .container2 {
        display: inline-block;
        height: 100px;
        width: 100px;
        background-color: #04af2f;
        color: white;
        font-size: 20px;
        font-family: Verdana, sans-serif;
        padding: 10px;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
    }
    .container div:hover {
        transition: transform 0.5s ease;
        transform: rotate(45deg);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div&gt;Box 1&lt;/div&gt;&lt;/div&gt;&lt;div class="container2"&gt;Box 2&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Element Selectors

Element Selectors in CSS

CSS element selectors are used to target and style specific HTML elements. These selectors are defined by simply using the element’s name in the stylesheet.

Syntax

The syntax for CSS element selectors is as follows:

element_name{/*property: value;*/color: red;}

Using Element Selectors Setting Background Color

To set the background color and text color of all <p> elements, use the element selector.

Example

The following example sets the background color and text color for all <p> elements.

<!DOCTYPE html><html lang="en"><head><title>Element Selectors</title><style>
    p {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to CSS Element Selectors&lt;/p&gt;&lt;p&gt;This is paragraph 1&lt;/p&gt;&lt;p&gt;This is paragraph 2&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Element Selectors Setting Border



The element selector can be used to add a border to all <div> elements.



Example



The following example adds a border to all <div> elements.



<!DOCTYPE html><html lang="en"><head><title>Element Selectors</title><style>
    div {
        border: 3px solid #2a9d8f;
        padding: 10px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;Welcome to CSS Element Selectors&lt;/div&gt;&lt;div&gt;This is div 1&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Element Selectors Setting Font



To apply a font style to all <li> elements, use the element selector.



Example



This example sets the font size and font family for all <li> elements.



<!DOCTYPE html><html lang="en"><head><title>Element Selectors</title><style>
    li {
        font-size: 18px;
        font-family: Verdana, sans-serif;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Welcome to Tutorials Point&lt;/h2&gt;&lt;ul&gt;&lt;li&gt;HTML&lt;/li&gt;&lt;li&gt;CSS&lt;/li&gt;&lt;li&gt;Javascript&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Child Selectors

Child Selectors in CSS

CSS child selector selects all the direct children of a particular element. This is denoted by ‘>’ (Greater than) symbol. It will not select elements that are further nested inside the child elements.

Syntax

The syntax for CSS child selectors is as follows:

selector > child-selector{/* property: value; */color: #04af2f
}

Child Selectors Example

In this example, we are changing the text color of the direct child element of div element. The para element inside the span tag remains unchanged as it is not a direct child of the div element.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .myDiv &gt; p {
        color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="myDiv"&gt;&lt;p&gt;It is a paragraph element. Direct child of div element.&lt;/p&gt;&lt;span&gt;&lt;p&gt;This is a p element inside div but not direct child of div.&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside div.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example 2



In this example, we are changing the font size and font of the direct child element of the div element.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .myDiv &gt; p {
        border: 2px solid #031926;
        font-size: 20px;
        font-family: Verdana, sans-serif;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="myDiv"&gt;&lt;p&gt;It is a paragraph element. Direct child of div element.&lt;/p&gt;&lt;span&gt;&lt;p&gt;This is a p element inside div but not direct child of div.&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside div.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Class Selectors

Class Selectors in CSS

CSS class selectors are used to select elements with a specific class attribute. The class selector is defined using a period (.) followed by the class name.

Syntax

The syntax for CSS class selectors is as follows:

.classname{/* property: value; */background-color: #04af2f;}

Basic Class Selector

To apply a background-color and text color to elements with a specific class, we have used a basic class selector.

Example

The following example applies the background color and text color to all elements with the class container.

<!DOCTYPE html><html lang="en"><head><title>Class Selectors</title><style>
    .container {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="container"&gt;This is a paragraph with class.&lt;/p&gt;&lt;p&gt;This is a paragraph without class&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Multiple Class Selectors



We can use multiple classes with any element. All the classes are separated by dot. It works only when all the class name matches.



Example



The following example adds a border and background color to div 1 and div 2 remains with default styles.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .bdr.bgColor {            
        border: 2px solid black;
        background-color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="bdr bgColor"&gt;
    This is div with background color and a border.
&lt;/div&gt;&lt;br&gt;&lt;div class="bdr"&gt;
    This is div with default styles.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Combining Class Selector with Other Selectors



Class selectors can be combined with other selectors to select specific elements.



Example



This example sets the font size and font family for only p elements having a class name container.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    p.container {
        font-size: 16px;
        font-family: Verdana, sans-serif;
        color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="container"&gt;This is a styled paragraph element.&lt;/p&gt;&lt;div class="container"&gt;This is a div without any style.&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Combining Multiple Classes



We can use multiple classes on any element to add different styles using different classes.



Example



Here is an example where we have used two different classes on div element to add a border and background color.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .bdr {
        border: 1px solid black;
        font-size: 16px;
        font-family: Verdana, sans-serif;
    }
    .bgColor {
        background-color: #04af2f;
        color: white
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="bdr bgColor"&gt;
    This is a div with a border and background color.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Class Selectors with Media Queries



We can create a responsive design by using class selectors with media queries.



Example



Here is an example where the background color of the web changes depending on the screen size.



<html><head><style>
    .bgColor {
        background-color: rgb(96, 5, 26);
        color: white;
    }
    @media (max-width: 800px) {
        .bgColor {
            background-color: #04af2f;
            color: white;
        }
    }

    @media (max-width: 700px) {
        .bgColor {
            background-color: #031926;
            color: white;
        }
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p class="bgColor"&gt;
    Try different screen sizes to see 
    change in background color.
&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Group Selectors

Group Selectors in CSS

CSS group selector applies the same style to multiple elements at a time. The names of elements can be separated by commas. Group selector keeps CSS concise and avoids redundancy.

Syntax

The syntax for the CSS group selector is as follows:

#selector_1, .selector_2, selector_3{/* property: value; */color: #04af2f
}

CSS Group Selectors Example

In this example, we have used the same style on all three elements using group selectors.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    span, #para, .myClass {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p id="para"&gt;This is a paragraph element.&lt;/p&gt;&lt;div class="myClass"&gt;This is a div element.&lt;/div&gt;&lt;br&gt;&lt;span&gt;This is a span element.&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Group Selectors Example with Pseudo-classes



In this example, we have used pseudo classes with group selectors. CSS :active pseudo-class changes the text color of the link and button on clicking while CSS :hover pseudo-class changes the background-color of the div and p element.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .link:active, #btn:active {
        color: #04af2f;
    }
    .myDiv:hover, #para:hover {
        background-color: #031926;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="myDiv"&gt;
    Hover over me
&lt;/div&gt;&lt;p id="para"&gt;This is a paragraph.&lt;/p&gt;&lt;a class="link" href="#"&gt;Click on this link.&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;button id="btn"&gt;Click me&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Blog

What is CSS Flexbox?

Table of Contents

Elements of Flexbox

Basic Flexbox Layout

Example

Vertical Flexbox Layout

Example

Flexbox Justify Content Property

Flexbox Align Items Property

Centering a Div using Flexbox

Example

Flexbox Wrap Property

Flexbox Align Self Property

CSS Flexbox Container Properties

CSS Flexbox Items Properties

What is a Grid Layout?

Table of Contents

Grid Elements

Grid Container

Grid items

Display Grid Property

Example

Grid Rows and Columns

Example

Grid Gap

Example

CSS Grid Lines

CSS Grid Properties Reference

Syntax

Property Values

Examples of CSS Grid Property

Grid Property with Row Height and Column Width

Example

Grid Property with Grid Template Area

Example

Adjacent Sibling Selectors in CSS

Syntax

Example of Adjacent Sibling Selectors

Example 2

General Sibling Selectors in CSS

Syntax

Example of General Sibling Selectors

Example 2

Descendant Selectors in CSS

Syntax

Descendant Selectors Example

Example 2

Element Selectors in CSS

Syntax

Using Element Selectors Setting Background Color

Example

Using Element Selectors Setting Border

Example

Using Element Selectors Setting Font

Example

Child Selectors in CSS

Syntax

Child Selectors Example

Example 2

Class Selectors in CSS

Syntax

Basic Class Selector

Example

Multiple Class Selectors

Example

Combining Class Selector with Other Selectors

Example

Combining Multiple Classes

Example

Using Class Selectors with Media Queries

Example

Group Selectors in CSS

Syntax

CSS Group Selectors Example

Group Selectors Example with Pseudo-classes