CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

Atrribute Selector
Description
CSS attribute selectors allow you to select HTML elements based on the presence or value of one or more attributes. They are a powerful way to target specific elements in your HTML markup. Attribute selectors are enclosed in square brackets [] and can take various forms.
The following sections discusses some common ways to use attribute selectors:
CSS [attribute] Selector
This selector selects elements that have specified attribute, regardless of its value.
Syntax
[attribute]
Example
Following is an example to select all the HTML elements with a "data-toggle" attribute
<html>
<head>
<style>
   [data-toggle] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute] Selector</h2>
   <div data-toggle="yes">The div with data-toggle attribute</div>
   <div>The div without data-toggle attribute</div>
   <p data-toggle="no">A paragraph with data-toggle attribute</p>
   <p>A paragraph without data-toggle attribute</p>
﻿
</body>
</html>
CSS [attribute="value"] Selector
This selector selects elements that have a specific attribute with a specific value.
Syntax
[attribute="value"]
Example
This selector selects all elements with a 'data-toggle' attribute whose value is set to 'yes'.
<html>
<head>
<style>
   [data-toggle="yes"] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute="value"] Selector</h2>
﻿
   <div data-toggle="yes">The div with data-toggle attribute</div>
   <div>The div without data-toggle attribute</div>
   <p data-toggle="no">A paragraph with data-toggle attribute</p>
   <p>A paragraph without data-toggle attribute</p>
﻿
</body>
</html>
CSS [attribute*="value"] Selector
This selector selects elements that have a specific attribute with a value containing a specific substring.
Syntax
[attribute*="value"]
Example
This selector selects all the elements with a "src" attribute which contain a "images" in the path:
<html>
<head>
<style>
   [src*="images"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute*="value"] Selector</h2>
﻿
   <img alt="Logo" src = "/css/images/logo.png" />
﻿
</body>
</html>
CSS [attribute^="value"] Selector
This selector selects elements that have a specific attribute with a value that starts with a specific string.
Syntax
[attribute^="value"]  
Example
This selector selects all elements with a "href" attribute starting with "https://"
<html>
<head>
<style>
   [href^="https"] {
      background: yellow;
      text-decoration:none;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute^="value"] Selector</h2>
﻿
   <p><a href="https://www.tutorialspoint.com">HTTPS Link</a></p>
   <p><a href="http://www.tutorialspoint.com">HTTP Link</a></p>
﻿
</body>
</html>
CSS [attribute$="value"] Selector
This selector selects elements that have a specific attribute with a value that ends with a specific string.
Syntax
[attribute$="value"]  
Example
This selector selects all elements with a "src" attribute which ends with ".png"
<html>
<head>
<style>
   [src$=".png"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute$="value"] Selector</h2>
﻿
   <img alt="Logo" src = "/css/images/logo.png" />
﻿
</body>
</html>
CSS [attribute|="value"] Selector
This selector select elements that have a specific attribute with a value that begins with a specified substring followed by a hyphen (-). This selector is often used for selecting elements with language-specific attributes, such as lang attributes, which often use hyphens to denote language subcodes.
Syntax
[attribute|="value"]
Example
This selector selects all the elements with a "lang" attribute that starts with "en" followed by a hyphen:
<html>
<head>
<style>
   [lang|="en"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute|="value"] Selector</h2>
   <div lang="en">Hello World in English!</div>
   <div lang="fr">Bonjour tout le monde en français!</div>
   <div lang="es">Hola Mundo en español!</div>
</body>
</html>
CSS [attribute~="value"] Selector
This selector is used to select elements that have a specific attribute with a value containing a specified word. The word should be a standalone word, surrounded by spaces or at the beginning or end of the attribute value.
Syntax
[attribute~="value"]   
Example
This selector select all elements with a "class" attribute containing the word "beautifyme"
<html>
<head>
<style>
   [class~="beautifyme"] {
   background-color:lightblue;
   border:2px solid red;
      }
</style>
</head>
<body>
   <h2>CSS [attribute|="value"] Selector</h2>
   <div class="beautifyme">div with <b>beautifyme</b> class</div>
   <div class="beautifyme1">div with <b>beautifyme1</b> class</div>
   <div class="beautifyme-2">div with <b>beautifyme-2</b> class</div>
</body>
</html>
Attribute Selectors For href Links
You can style elements based on their href attribute is a common attribute used on <a> elements to specify the URL that the link points to.
Here is an example 
<html>
<head>
<style>
      ul {
      list-style: none;
   }
   a[href] {
      color: rgb(11, 11, 231);
   }
   a[href="css_backgrounds.htm"] {
      color: rgb(224, 152, 18);
   }
   a[href~="css_colors.htm"] {
      color: rgb(51, 255, 0);
   }
   a[href|="css_padding.htm"] {
      color: rgb(0, 255, 255);
   }
   a[href^="css_margins.htm"] {
      color: rgb(255, 0, 55);
   }
   a[href$="css_lists.htm"] {
      color: rgb(255, 230, 0);
   }
   a[href*="css_borders.htm"] {
      color: rgb(112, 108, 108);
   }
</style>
</head>
<body>
   <ul>
      <li> <a href="css_text.htm">CSS Text</a></li>
      <li><a href=".htm">CSS Background</a></li>
      <li><a href="css_colors.htm">CSS Color</a></li>
      <li><a href="css_padding.htm">CSS Padding</a></li>
      <li><a href="css_margins.htm">CSS Margin</a></li>
      <li><a href="css_lists.htm">CSS List</a></li>
      <li><a href="css_borders.htm">CSS Borders</a></li>
   </ul> 
</body>
</html>
Attribute Selectors For Inputs
Attribute selectors can be used to select input elements based on specific criteria, such as their type, name, value, or other attributes.
Here is an example 
<html>
<head>
<style>
   input {
      display: block;
      margin: 10px;
   }
   input[type] {
      border: 1px solid #e0dd29;
   }
   input[placeholder="Password"] {
      border: 1px solid #f00;
   }
   input[name|="emailid"] {
      background-color: rgb(236, 178, 233);
   }
   input[type~="submit"] {
      background-color: rgb(88, 241, 88);
      padding: 10px;
   }
   input[value^="But"] {
      background-color: rgb(236, 149, 68);
      padding: 10px;
   }
   input[type$="box"] {
      border-radius: 5px; 
      height: 50px;
      width: 20px;
   }
   input[type*="adi"] {
      height: 50px;
      width: 20px;
   }
</style>
</head>
<body>
   <input type="text" placeholder="Username">
   <input type="password" placeholder="Password">
   <input type="email" placeholder="Email" name="emailid">
   <input type="submit" placeholder="Submit">
   <input type="button" value="Button">
   <input type="checkbox" placeholder="Checkbox">
   <input type="radio" placeholder="Radio">
</body>
</html>
Attribute Selectors For Title
To style elements based on the title attribute, you can use the CSS attribute selector title to style elements that have a title attribute containing a specific value.
Here is an example 
<html>
<head>
<style>
   span {
      display: block;
      margin: 10px;
      padding: 5px;
   }
   span[title] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(109, 177, 236);
   }
   span[title="CSS Background"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(250, 163, 192);
   }
   span[title|="CSS Border"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(245, 248, 79);
   }
   span[title^="Mar"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(255, 147, 23);
   }
   span[title$="ght"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(102, 201, 240);
   }
   span[title*="CSS Width"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(191, 14, 235);
   }
</style>
</head>
<body>
   <span title="CSS Text">A text refers to a piece of written or printed information in the form of words or characters.</span>
   <span title="CSS Background">You can set backgrounds of various HTML elements.</span>
   <span title="CSS Border"> border property is used to create a border around an element.</span>
   <span title="Margin">Setting up a margin around an HTML element.</span>
   <span title="Height">The height property sets the height of an element's content area.</span>
   <span title="CSS Width">The width sets the width of an element's content area.</span>
</body>
</html>
Attribute Selectors For Language
You can use the lang attribute to select elements based on their language. The lang attribute specifies the language of the text contained within an element.
Here is an example 
<html>
<head>
<style>
   div[lang] {
      color: red;
   }
   div[lang="fr"] {
      color: blue;
   }
   div[lang~="es"] {
      color: green;
   }
   div[lang|="de"] {
      color: orange;
   }
   div[lang^="it"] {
      color: purple;
   }
   div[lang$="ja"] {
      color: brown;
   }
   div[lang*="zh"] {
      color: teal;
   }
</style>
</head>
<body>
   <div lang="en">Hello World in English!</div>
   <div lang="fr">Bonjour tout le monde en français!</div>
   <div lang="es">Hola Mundo en español!</div>
   <div lang="ja">こんにちは、日本語で世界！</div>
   <div lang="de">Hallo Welt auf Deutsch!</div>
   <div lang="it">Ciao Mondo in italiano!</div>
   <div lang="zh">你好世界，中文！</div>
</body>
</html>
CSS Multiple Attribute Selectors
CSS multiple attribute selectors allow you to select elements based on multiple attribute values. It is use to target specific element that meet multiple criteria.
Here is an example 
<html>
<head>
<style>
   ul {
      list-style: none;
   }
   a[href] {
      color: rgb(231, 11, 194);
   }
   a[href="css_backgrounds.htm"][href$=".htm"] {
      color: rgb(224, 152, 18);
   }
   a[href="css_colors.htm"] {
      color: rgb(51, 255, 0);
   }
</style>
</head>
<body>
   <ul>
      <li><a href="css_text.htm">CSS Text</a></li>
      <li><a href="css_backgrounds.htm">CSS Background</a></li>
      <li><a href="css_colors.htm">CSS Color</a></li>
   </ul> 
</body>
</html>
CSS Attribute Selectors With Sibling Combinator
CSS attribute selectors and sibling combinators can be used together to select specific elements based on their attributes and their relationship to other elements.
General sibling combinator (~) − This combinator selects all sibling elements that follow a specified element, but are not directly adjacent to it.Syntaxselector1 ~ selector2 {
   /* CSS styles */
}
Adjacent sibling combinator (+) − This combinator selects the element that is directly after the specified element.Syntaxselector1 + selector2 {
   /* CSS styles */
}
The following example demonstrates that the adjacent sibling combinator (+) selects the paragraph immediately after the heading, while the general sibling combinator (~) selects <div> after the heading 
<html>
<head>
<style>
   h2 + p { 
      font-weight: bold;
      color:blue;
   }
   h2 ~ div {
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS Background</h2>  
   <p>You can set backgrounds of various HTML elements.</p>
   <div>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   </div>
   <p>There are many variations of passages of Lorem Ipsum available.</p>
</body>
</html>
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Atrribute Selector

Description

CSS [attribute] Selector

Syntax

Example

CSS [attribute="value"] Selector

Syntax

Example

CSS [attribute*="value"] Selector

Syntax

Example

CSS [attribute^="value"] Selector

Syntax

Example

CSS [attribute$="value"] Selector

Syntax

Example

CSS [attribute|="value"] Selector

Syntax

Example

CSS [attribute~="value"] Selector

Syntax

Example

Attribute Selectors For href Links

Attribute Selectors For Inputs

Attribute Selectors For Title

Attribute Selectors For Language

CSS Multiple Attribute Selectors

CSS Attribute Selectors With Sibling Combinator