Category: CSS

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

ID Selectors in CSS

CSS ID selector selects a single element with a particular value for the id attribute. An id in CSS is denoted by the “#” (hash) symbol. The same class can be applied to multiple elements, but an id is unique for an element.

Syntax

The syntax for the CSS id selector is as follows:

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

ID Selector for Styling a div Element

CSS ID selector can be used to select various elements such as div, p , section, etc.

Example

In this example, we have used an ID selector to style the div element. We have used background-color, color, padding, border, and text-align properties to style and center the text in the div element.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #myId {
        background-color: #04af2f;
        color: white;
        font-size: 20px;
        font-family: Verdana, sans-serif;
        padding: 10px;
        border: 1px solid black;
        text-align: center;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="myId"&gt;
    This is a div element having various styles.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


ID Selector with Pseudo-Classes



CSS ID selector can be used with pseudo classes to add interactivity to the element such as changing text color on hovering any link.



Example



In this example, we have used hover pseudo-class to change the link text color upon hovering over it.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #myId {
    color: #04af2f;
    }
    #myId:hover {
        color: #031926;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;a href="#" id="myId"&gt;
    Hover over this link to change its color.
&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using ID Selector with Forms



CSS ID selector can be used with forms to design the form elements.



Example



In this example, we have used an id selector on form elements like buttons and input fields. We have designed the input field and changed the appearance of the submit button.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #user {
        border: 2px solid black;
        border-radius: 5px;
        font-size: 16px;
        font-family: Verdana, sans-serif;
    }
    #btn {
        background-color: #031926;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;form&gt;&lt;label for="username"&gt;Username:&lt;/label&gt;&lt;input type="text" id="user" name="username" 
           placeholder="Enter your username"&gt;&lt;br&gt;&lt;br&gt;&lt;button type="submit" id="btn"&gt;Submit&lt;/button&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


ID Selector for Animations



CSS ID selector can be used with CSS animations for creating smooth animation effects.



Example



In this example, we have used an id selector to animate a bouncing ball. CSS keyframes specify the frame sequence and translateY() function of the transform property to control the bouncing of the ball.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    
    #animated {
        width: 100px;
        height: 100px;
        background-color: #04af2f;
        font-family: Verdana, sans-serif;
        text-align: center;
        line-height: 100px;
        color: white;
        border-radius: 50%;
        animation: bounce 1s infinite;
    }
    @keyframes bounce {
        0%, 100% {
            transform: translateY(20px);
        }
        50% {
            transform: translateY(0);
        }
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="animated"&gt;Bounce&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Id Selector with Transition



CSS ID selector can be used with CSS transition for creating a smooth transition from one state to another.



Example



In this example, we have used scale() function and background-color property to change the size and color of div box when hovered over it.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #box {
        width: 400px;
        height: 100px;
        background-color: #04af2f;
        text-align: center;
        font-family: Verdana, sans-serif;
        line-height: 100px;
        color: white;
        border-radius: 10px;
        transition: all 0.5s ease;
        margin: auto;
    }
    #box:hover {
        background-color: #031926;
        transform: scale(0.95);
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="box"&gt;Hover Over this div Element&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Universal Selectors

Universal Selectors in CSS

CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*). Universal selector is used to set a similar style for the entire document.

Syntax

The syntax for the CSS universal selector is as follows:

*{margin: 0;padding: 0;}

Using Universal Selector Setting Background Color

To set the background color and text color of the web page, universal selector is used:

Example

Let us see an example to set the background color and text color of the HTML document.

<!DOCTYPE html><html lang="en"><head><title>Universal Selectors</title><style>
    * {
        background-color: #04af2f;
        color: white;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Universal Selector Setting Border



We have used the Universal Selector to set the border of the HTML document.



Example



Here is an example of setting the border of an HTML web page.



<!DOCTYPE html><html lang="en"><head><title>Universal Selectors</title><style>
    * {
        border: 2px solid #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using Universal Selector Setting Font



Use the universal selector to set a similar font for all the elements in the web page.



Example



Here is an example to set the font and font size of the document.



<!DOCTYPE html><html lang="en"><head><title>Universal Selectors</title><style>
    * {
        font-size: 16px;
        font-family: Verdana, sans-serif;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Cascading in CSS?

CSS Cascading

Cascading in CSS refers to a process where a browser determines which rule to apply on any element when various conflicting rules exist. The cascade follows a structured order to specify which style rule will take precedence over other style rules.

Key Factors of CSS Cascading

The key factors for deciding which CSS rule will take priority are mentioned below:

1. Specificity

Specificity refers to, how specific rules have been defined. For example: rules defined using the ID selector take priority over rules defined using the class selector if both selectors are used on the same element.

<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    #txt {
        color: #04af2f;
    }
    .txt {
        color: blue;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to &lt;span id="txt" class="txt"&gt;Tutorials Point&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


2. Importance



The styles marked with !important have higher priority over other rules. For example, if both inline and internal css, are used on an element. Then the rule that is marked as !important will take priority.



Example



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .txt {
        color: #04af2f <strong>!important</strong>;
    }
    
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to &lt;span class="txt" style="color: yellow;"&gt;Tutorials Point&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


3. Source Order



Source order refers to, the order in which a CSS rule is defined on any element. The rule defined later takes the priority over rule defined earlier.



Example



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    .txt {
        color: red;
    }
    
    .txt {
        color: #04af2f;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to &lt;span class="txt"&gt;Tutorials Point&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Cascading Hierarchy



If the CSS rules are applied from multiple sources on an element, then priority is decided on the basis of below mentioned criteria.




!important: Styles marked with !important get the highest priority.



Inline CSS Styles defined using inline CSS gets higher priority after !important.



Internal CSS Styles are defined under the style tag in the head section.



External CSS Styles are separately defined in another .css file and using <link> tag, it is defined in the main HTML document.



User/Browser styles: These are the default browser or user-defined preferences.





Priority Order: !important > Inline CSS > Internal CSS > External CSS > User/Browser Styles.




CSS Specificity



CSS specificity plays an important role in deciding which CSS rule to apply to an element when multiple CSS rules are defined for the same element. The more specific the CSS rule is, the higher priority that CSS rule will get. A point system is used to calculate the CSS specificity. The point system for selectors is mentioned below:




Inline CSS: 1000 points



ID Selector: 100 points



Classes, Attributes, and Pseudo-Classes: 10 points



Elements and Pseudo-Elements: 1 point




/*Lowest Priority*/p{color: red;}/*1 point*//*Higher Priority than Element Selector*/.myId{color: blue;}/*10 points*//*Second Highest Priority*/#myClass{color: green;}/*100 points*//*Highest Priority*/
<p style="color: #04af2f;">
Welcome to Tutorials Point</p>




CSS Rule Overriding



CSS Rule overriding occurs when multiple styles are applied to the same element. CSS uses specificity, importance, and source order to decide which rule should be applied.



Example



In this example, we have used two element selectors on the p element. Based on source order the latter used style has been applied in the last paragraph.



<!DOCTYPE html><html lang="en"><head><title>Document</title><style>
    p {
        color: aqua;
    }
    #txt {
        color: red;
    }
    
    .txt {
        color: #04af2f;
    }
    p {
        color: blueviolet;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p id="txt"&gt;Welcome to Tutorials Point&lt;/p&gt;&lt;p class="txt"&gt; 
    This is CSS example for Overriding 
    rule in CSS.
&lt;/p&gt;&lt;p&gt;This is third paragraph.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

user select Property
CSS user-select property determines whether text can be selected by the user, with no effect on content loaded as part of a browser’s user interface (chrome) other than textboxes.

While user-select is not inherited, its initial “auto” value often makes it behave as if it is inherited. WebKit/Chromium-based browsers implement the property as inherited, which violates the specification and will cause problems. Chromium has been resolving these problems to align with the specified behavior.

Possible Values
- none − The element’s and sub-elements’ text is not selectable, but these elements may be present in the Selection object.
- auto − The auto value is determined as follows:
  - The value used for the ::before and ::after pseudo-elements is none.
  - For editable elements, the used value is contain.
  - If the parent of this element has a user-select value all, then the used value is all.
  - If the parent of this element has a user-select value none, then the used value is none.
  - The used value is text.
- text − The user can select the text.
- contain − Allows the selection to begin within the element, but contains the selection to the boundaries of that element.
- all − The content of the element must be selected atomically: If a selection contains part of an element, it must also include all of its descendants. If a double-click or context-click happens in a sub-element, the highest ancestor with this value will be chosen.
Applies To

All elements.

Syntax
```
user-select: none | auto | text | contain | all;
```
CSS user-select – none Value

The following example demonstrates the user-select: none property preventing users from selecting the text −
```
<html><head><style> 
   .text-none {
  -webkit-user-select: none; 
  user-select: none;   }
</style></head><body><p>This text should be selectable.</p><p class="text-none">This text cannot be selected.</p></body></html>
```
CSS user-select – auto Value

The following example demonstrates the user-select: auto property used to select the text −
```
<html><head><style> 
   p {
  -webkit-user-select: auto; 
  user-select: auto;   }
</style></head><body><p>This text should be selectable.</p></body></html>
```
CSS user-select – text Value

The following example demonstrates the user-select: text property allows the users to select the text −
```
<html><head><style> 
   p {
  -webkit-user-select: text; 
  user-select: text;   }
</style></head><body><p>This text should be selectable.</p></body></html>
```
CSS user-select – all Value

The following example demonstrates the user-select: all property allows the users to select the text within a single click −
```
<html><head><style> 
   p {
  -webkit-user-select: all; 
  user-select: all;   }
</style></head><body><p>This text can be selected with a single click.</p></body></html>
```
CSS user-select – contain Value

The following example demonstrates the user-select: contain property allows the users to select the text within the paragraph’s boundaries −
```
<html><head><style> 
   p {
  -webkit-user-select: contain; 
  user-select: contain;   }
</style></head><body><p>This text can be selected within the paragraph's boundaries.</p></body></html>
```
August 20, 2025

accent color Property

CSS accent-color property determines the accent color that can be applied to user-interface controls such as radio button, checkboxes, buttons etc. This property gives the flexibility to assign color of user’s choice to the user-interface control.

Syntax

accent-color: auto | color | initial | inherit;

Value	Description
auto	The browser selects the accent color. Default value.
color	It specifies the color to be used. Different formats (rgb, hex, color-name, etc) can be used.
initial	This sets the property to its initial value
inherit	This inherits the property from the parent element

Examples of CSS Accent Color Property

Below examples will explain the accent-color property with different values.

Setting Default Color

To allow the browser to give the color to the user-interface controls, the auto value can be used. This is shown in the example below.

Example

<!DOCTYPE html><html><head><style>
    input {
        accent-color: auto;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS accent-color property&lt;/h2&gt;&lt;div&gt;&lt;input type="checkbox" id="check" checked&gt;&lt;label for="check"&gt;accent-color: auto&lt;/label&gt;&lt;/div&gt;&lt;div&gt;&lt;input type="radio" id="clicked" checked&gt;&lt;label for="clicked"&gt;accent-color:auto&lt;/label&gt;&lt;/div&gt;&lt;div&gt;&lt;input type="range" id="pull"&gt;&lt;label for="pull"&gt;accent-color:auto&lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Customizing Color



To apply color of our choice to the user-interface controls, we can specify the color in different formats. This is shown in the example below. Three different formats have been used - color name, color rgb value and color hexadecimal value.



Example



<!DOCTYPE html><html><head><style>
    input[type=radio] {
        accent-color: #ffa500;
    }
    input[type=range] {
        accent-color: rgb(55, 255, 0);
    }
    progress {
        accent-color: red;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS accent-color property&lt;/h2&gt;&lt;h3&gt;accent-color for radio buttons&lt;/h3&gt;&lt;input type="radio" id="radio1" name="gender" checked&gt;&lt;label for="radio1"&gt;Male&lt;/label&gt;&lt;/br&gt;&lt;input type="radio" id="radio2" name="gender"&gt;&lt;label for="radio2"&gt;Female&lt;/label&gt;&lt;h3&gt;accent-color for a range&lt;/h3&gt;&lt;label for="ran"&gt;Range&lt;/label&gt;&lt;/br&gt;&lt;input type="range" id="ran" name="range_val" min="0" max="5"&gt;&lt;h3&gt;accent-color for a progress&lt;/h3&gt;&lt;label for="prog"&gt;Progress&lt;/label&gt;&lt;/br&gt;&lt;progress id="prog" name="prog_val" value="60" max="100"&gt;60%&lt;/progress&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

offset Property

The CSS shorthand property offset makes it easier for an element to animate along a certain path.

It has many characteristics that together comprise an offset transform.
With this transform, a specified point inside the element (offset-anchor) is aligned to a certain path position (offset-position) at various points along the route (offset-distance).
It also allows the element to be optionally rotated (offset-rotate) to follow the path’s direction.

Constituent Properties

The offset property is a shorthand for the following CSS properties:

offset-anchor
offset-distance
offset-path
offset-position
offset-rotate

Possible Values

The following list of values is accepted by offset shorthand property.

offset-anchor – Defines a point within the element that aligns with an offset position on the path.
offset-path – Defines the path along which the element is animated.
offset-distance – Defines how far along the path the element is placed.
offset-rotate – Optionally rotates the element to align with the direction of the path.
auto – All properties are reset to their default values.

Applies to

Transformable elements

Syntax

offset = [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

CSS offset – path value

The following example demonstrates the usage of offset shorthand property with path value.

Open Compiler

<html><head><style>
@keyframes slide {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
.container {
    width: 400px;
    height: 200px;
    border: 2px solid #3498db;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.text {
    position: absolute;
    font-size: 28px;
    color: #3954cc;
    animation: slide 6s ease-in-out infinite alternate;
    offset: path('M 10 100 Q 50 50 90 100 T 170 100 T 250 100');
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
</style></head><body><div class="container"><div class="text">This is Sliding Text</div></div></body></html>

CSS offset – path and auto value

The following example demonstrates the usage of offset shorthand property with path and auto value.

Open Compiler

<html><head><style>
@keyframes orbit {
    0% {
        offset-distance: 0%;
        offset-rotate: 0deg;
    }
    100% {
        offset-distance: 100%;
        offset-rotate: 360deg;
    }
}
#planet {
    width: 60px;
    height: 60px;
    background-color: #0000A0;
    border-radius: 50%;
    position: absolute;
    animation: orbit 6s linear infinite;
    offset: path('M 200 200 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0') auto;
}
#sun {
    width: 100px;
    height: 100px;
    background-color: #ffd700;
    border-radius: 50%;
    position: absolute;
    left: 28%;
    top: 33%;
    transform: translate(-50%, -50%);
}
</style></head><body><div id="sun"></div><div id="planet"></div></body></html>

CSS Offset – Related Properties

Following table lists related properties to offset property:

Property	Description
offset-anchor	Specifies the position inside an element’s box that acts as the offset path.
offset-distance	Specifies where element should be positioned.
offset-path	Specifies element’s path inside its parent container.
offset-rotate	Specifies the orientation or direction of an element as it moves along the specified offset-path.
offset-position	Provide an element’s starting location along a route.

August 20, 2025

min inline size Property

CSS min-inline-size property sets the minimum inline size of an element. The direction of the inline is determined by the writing-mode property. The property has no effect, if the content fits well within the inline size of the element.

Syntax

min-inline-size: auto | length | percentage | initial | inherit;

Property Values

Value	Description
auto	No width limit is set with this value. Default.
length	It sets the min-inline-size of the element using length units (e.g. px, em, rem etc.)
percentage	It sets the min-inline-size of the element using percentage value relative to the size of the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Min Inline Size Property

The following examples explain the min-inline-size property with different values.

Min Inline Size Property with Auto Value

To not set any specific limit on the inline-size of an element, we use the auto value. The size of the element depends on the length of the content. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .container {
     background-color: lightgreen;
     min-inline-size: auto;
     display: inline-block;
  }   </style></head><body><h2>
  CSS min-inline-size property   </h2><h4>
  min-inline-size: auto   </h4><div class="container"><p>
    TutorialsPoint offers extensive online courses.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Min Inline Size Property with Length Values



To set the inline size of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the element. If the content is greater than the size of the element, the element will grow to accomodate the content. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: lightgreen;
     margin: 10px;
     display: inline-block;
  }
  .size1 {
     min-inline-size: 400px;
  }
  .size2 {
     min-inline-size: 30em;
  }   </style></head><body><h2>
  CSS min-inline-size property   </h2><h4>
  min-inline-size: 400px   </h4><div class="container size1"><p>
    TutorialsPoint offers extensive online courses.
  &lt;/p&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-inline-size: 30em   </h4><div class="container size2"><p>
    TutorialsPoint offers extensive online courses.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Min Inline Size Property with Percentage Values



To set the inline size of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the element. If the content is greater than the size of the element, the element will grow to accomodate the content. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 100px;
  }
  .container {
     display: inline-block;
     background-color: lightgreen;
  }
  .size1 {
     min-inline-size: 50%;
  }
  .size2 {
     min-inline-size: 75%;
  }   </style></head><body><h2>
  CSS min-inline-size property   </h2><h4>
  min-inline-size: 50% (of the 
  size of the containing element)   </h4><div class="outer-container"><div class="container size1"><p>
        TutorialsPoint offers extensive online courses.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-inline-size: 75% (of the 
  size of the containing element)   </h4><div class="outer-container"><div class="container size2"><p>
        TutorialsPoint offers extensive online courses.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Min Inline Size Property with Writing Mode



The min-inline-size property can be used in combination with the writing-mode property which determines the inline direction. In horizontal-mode, the inline-size grows from left to right. In vertical-mode, the inline-size grows from top to bottom (or bottom to top). This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 100px;
  }
  .container {
     display: inline-block;
     background-color: lightgreen;
     min-inline-size: 55%;
  }
  .horizontal {
     writing-mode: horizontal-lr;
  }
  .vertical {
     writing-mode: vertical-lr;
  }   </style></head><body><h2>
  CSS min-inline-size property   </h2><h4>
  min-inline-size: 55% (of the size of the 
  containing element); writing-mode: horizontal-lr;   </h4><div class="outer-container"><div class="container horizontal"><p>
        TutorialsPoint offers extensive online courses.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-inline-size: 55% (of the size of the 
  containing element); writing-mode: vertical-lr;   </h4><div class="outer-container"><div class="container vertical"><p>
        TutorialsPoint offers extensive online courses.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

max inline size Property

CSS max-inline-size property sets the maximum inline size of an element. The direction of the inline is determined by the writing-mode property. The property has no effect, if the content fits well within the inline size of the element.

Syntax

max-inline-size: auto | length | percentage | initial | inherit;

Property Values

Value	Description
auto	No width limit is set with this value. Default.
length	It sets the max-inline-size of the element using length units (e.g. px, em, rem etc.)
percentage	It sets the max-inline-size of the element using percentage value relative to the size of the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Max Inline Size Property

The following examples explain the max-inline-size property with different values.

Max Inline Size Property with Auto Value

To not set any specific limit on the inline-size of an element, we use the auto value. The size of the element depends on the length of the content. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .container {
     background-color: lightgreen;
     max-inline-size: auto;
     display: inline-block;
  }   </style></head><body><h2>
  CSS max-inline-size property   </h2><h4>
  max-inline-size: auto   </h4><div class="container"><p>
     TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides,
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Max Inline Size Property with Length Values



To set the inline size of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the element. If the content is greater than the size of the element, it will overflow. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: lightgreen;
     margin: 10px;
     display: inline-block;
  }
  .size1 {
     max-inline-size: 160px;
  }
  .size2 {
     max-inline-size: 6.5em;
  }   </style></head><body><h2>
  CSS max-inline-size property   </h2><h4>
  max-inline-size: 160px   </h4><div class="container size1"><p>
     TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides,
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  max-inline-size: 6.5em   </h4><div class="container size2"><p>
     TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides,
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Max Inline Size Property with Percentage Values



To set the inline size of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the element. If the content is greater than the size of the element, it will overflow. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 150px;
  }
  .container {
     display: inline-block;
     background-color: lightgreen;
  }
  .size1 {
     max-inline-size: 45%;
  }
  .size2 {
     max-inline-size: 55%;
  }   </style></head><body><h2>
  CSS max-inline-size property   </h2><h4>
  max-inline-size: 45% (of the size 
  of the containing element)   </h4><div class="outer-container"><div class="container size1"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides,
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  max-inline-size: 55% (of the size 
  of the containing element)   </h4><div class="outer-container"><div class="container size2"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides,
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Max Inline Size Property with Writing Mode



The max-inline-size property can be used in combination with the writing-mode property which determines the inline direction. In horizontal-mode, the inline-size grows from left to right. In vertical-mode, the inline-size grows from top to bottom (or bottom to top). This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 150px;
  }
  .container {
     display: inline-block;
     background-color: lightgreen;
     max-inline-size: 65%;
  }
  .horizontal {
     writing-mode: horizontal-lr;
  }
  .vertical {
     writing-mode: vertical-rl;
  }   </style></head><body><h2>
  CSS max-inline-size property   </h2><h4>
  max-inline-size: 65% (of the size of the 
  containing element); writing-mode: horizontal-lr;   </h4><div class="outer-container"><div class="container horizontal"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides,
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  max-inline-size: 65% (of the size of the 
  containing element); writing-mode: vertical-rl;   </h4><div class="outer-container"><div class="container vertical"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides,
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

mix blend mode Property

CSS mix-blend-mode property determines how the content of an element should blend with the content of its parent and the element’s background.

Syntax

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

Property Values

Value	Description
normal	No blending occurs.
multiply	It darkens colors by multiplying the background and foreground colors.
screen	It lightens colors by inverting, multiplying, and inverting again.
overlay	It combines multiply and screen, preserving highlights and shadows.
darken	It retains the darker color from overlapping elements.
lighten	It retains the lighter color from overlapping elements.
color-dodge	It brightens the background by decreasing the color of the element.
color-burn	It darkens the background by increasing the color of the element.
difference	It subtracts the colors to create a high-contrast effect.
exclusion	It is similar to difference, but with softer contrast effects.
hue	It preserves luminance and saturation, altering only the hue.
saturation	It Preserves luminance and hue, altering only the saturation.
color	It combines hue and saturation of the element with luminance.
luminosity	It preserves hue and saturation, altering only the luminosity.

Examples of CSS Mix Blend Mode Property

The following examples explain the mix-blend-mode property with different values.

Mix Blend Mode Property with Normal Value

To prevent an element from interacting with other layers, we use the normal value. The element is rendered as is without any interaction with underlying layers. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: normal;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: normal   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Multiply Value



To multiply the background and foreground colors, resulting in a darker color, we use the multiply value. It results in rich shadows. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: multiply;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: multiply   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Screen Value



To brighten the colors by inverting both layers, multiplying them, and then inverting the result, we use the screen value. It produces a brightening effect. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: screen;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: screen   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Overlay Value



To enhances contrast by darkening dark areas and lightening light areas, we use the overlay value. It combines multiply and screen preserving highlights and shadows. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: overlay;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: overlay   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Darken Value



To compare the background and foreground colors, retaining the darker color, we use the darken value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: darken;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: darken   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Lighten Value



To retain the lighter color from overlapping elements, we use the lighten value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: lighten;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: lighten   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Color Dodge Value



To brighten the background by decreasing the foreground colors intensity, we use the color-dodge value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: color-dodge;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: color-dodge   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Color Burn Value



To darken the background by increasing the foreground colors intensity, we use the color-burn value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: color-burn;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: color-burn   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Difference Value



To subtract the colors of the overlapping layers, resulting in high-contrast effect, we use the difference value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: difference;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: difference   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Exclusion Value



To subtract the colors of the overlapping layers, resulting in a soft contrast effect, we use the exclusion value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: exclusion;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: exclusion   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Hue Value



To preserve the luminance and saturation of the background while altering only the hue of the element, we use the hue value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: hue;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: hue   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Saturation Value



To preserve luminance and hue, modifying only the saturation of the element, we use the saturation value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: saturation;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: saturation   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Color Value



To combine the hue and saturation of the element with the luminance of the background, we use the color value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: color;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: color   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Mix Blend Mode Property with Luminosity Value



To preserve the hue and saturation of the element, altering only the luminance, we use the luminosity value. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: #6666ff;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .container&gt;img {
     mix-blend-mode: luminosity;
  }   </style></head><body><h2>
  CSS mix-blend-mode property   </h2><h4> 
  mix-blend-mode: luminosity   </h4><div class="container"><img src="/css/images/content.png" 
  alt="img" height=250 width=300/&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 20, 2025

Category: CSS

Group Selectors in CSS

Syntax

CSS Group Selectors Example

Group Selectors Example with Pseudo-classes

ID Selectors in CSS

Syntax

ID Selector for Styling a div Element

Example

ID Selector with Pseudo-Classes

Example

Using ID Selector with Forms

Example

ID Selector for Animations

Example

Id Selector with Transition

Example

Universal Selectors in CSS

Syntax

Using Universal Selector Setting Background Color

Example

Using Universal Selector Setting Border

Example

Using Universal Selector Setting Font

Example

CSS Cascading

Key Factors of CSS Cascading

1. Specificity

2. Importance

3. Source Order

CSS Cascading Hierarchy

CSS Specificity

CSS Rule Overriding

Possible Values

Applies To

Syntax

CSS user-select – none Value

CSS user-select – auto Value

CSS user-select – text Value

CSS user-select – all Value

CSS user-select – contain Value

Syntax

Examples of CSS Accent Color Property

Setting Default Color

Example

Customizing Color

Example

Constituent Properties

Possible Values

Applies to

Syntax

CSS offset – path value

CSS offset – path and auto value

CSS Offset – Related Properties

Syntax

Property Values

Examples of CSS Min Inline Size Property

Min Inline Size Property with Auto Value

Example

Min Inline Size Property with Length Values

Example

Min Inline Size Property with Percentage Values

Example

Min Inline Size Property with Writing Mode

Example

Syntax

Property Values

Examples of CSS Max Inline Size Property

Max Inline Size Property with Auto Value

Example

Max Inline Size Property with Length Values

Example

Max Inline Size Property with Percentage Values

Example

Max Inline Size Property with Writing Mode

Example

Syntax

Property Values

Examples of CSS Mix Blend Mode Property

Mix Blend Mode Property with Normal Value