CSS - Tags Reference

Element Selectors

Element selectors, also called type selectors, target HTML elements by their tag name. To select all <p> elements on a page and apply styles to them, you would use this CSS rule:

p {
  color: black;
  font-size: 16px;
}

This rule sets the text color to black and the font size to 16 pixels for all <p> elements.

Class Selectors

Class selectors target elements based on their class attribute value. To select elements with a specific class, you use a dot (.) followed by the class name. To select all elements with the class "highlight" and apply styles to them, you would use this CSS rule:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

This rule sets the background color to yellow and the font weight to bold for all elements with the class "highlight".

ID Selectors

ID selectors target elements based on their id attribute value. To select an element with a specific ID, you use a hash (#) followed by the ID name. To select the element with the ID "header" and apply styles to it, you would use this CSS rule:

#header {
  background-color: blue;
  color: white;
  padding: 10px;
}

This rule sets the background color to blue, the text color to white, and adds 10 pixels of padding to the element with the ID "header".

An ID should be unique within a page, meaning only one element should have a specific ID. Classes can be applied to multiple elements on a page.

These basic selectors - element, class, and ID selectors - form the foundation of targeting elements in CSS. They let you apply styles to specific elements, groups of elements with the same class, or individual elements with a unique ID, giving you control over the look of your web pages.

Descendant Combinator

The descendant combinator targets elements that are descendants of another element. It is represented by a space between two selectors.

div span{
  color: red;
  font-style: italic;
}

This rule sets the text color to red and the font style to italic for all <span> elements that are descendants of <div> elements, regardless of the level of nesting.

Child Combinator

The child combinator targets elements that are direct children of another element. It is represented by a greater-than sign (>) between two selectors.

section > p {
  margin-top: 20px;
  line-height: 1.5;
}

This rule sets a top margin of 20 pixels and a line height of 1.5 for all <p> elements that are direct children of <section> elements.

Adjacent Sibling Combinator

The adjacent sibling combinator targets elements that are the next sibling of another element. It is represented by a plus sign (+) between two selectors.

h1 + h2 {
  margin-top: 10px;
  font-size: 18px;
}

This rule sets a top margin of 10 pixels and a font size of 18 pixels for all <h2> elements that are the next sibling of <h1> elements.

General Sibling Combinator

The general sibling combinator targets elements that are siblings of another element, regardless of their position. It is represented by a tilde (~) between two selectors.

h2 ~ p {
  color: green;
  text-decoration: underline;
}

This rule sets the text color to green and adds an underline to all <p> elements that are siblings of <h2> elements, regardless of their order.

Combinators add more flexibility and precision to your CSS selectors, letting you target elements based on their relationships within the document structure. They are a powerful tool for styling specific parts of your web pages.

Attribute Presence Selector

The attribute presence selector targets elements that have a specified attribute, regardless of its value. It uses square brackets ([]) containing the attribute name.

[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

This rule sets the opacity to 0.5 and the cursor to "not-allowed" for all elements that have the disabled attribute, regardless of its value.

Attribute Value Selector

The attribute value selector targets elements with a specified attribute that has a specific value. It uses square brackets ([]) containing the attribute name followed by an equals sign (=) and the attribute value in quotes.

[type="submit"] {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

This rule sets the background color to blue, the text color to white, and adds padding of 10 pixels on the top and bottom and 20 pixels on the left and right for all elements with the type attribute value of "submit".

Attribute Substring Selector

The attribute substring selector targets elements with an attribute value that contains a specified substring. It uses square brackets ([]) containing the attribute name followed by an asterisk (*=) and the substring in quotes.

[href*="example"] {
  color: red;
  text-decoration: underline;
}

This rule sets the text color to red and adds an underline to all elements with an href attribute value that contains the substring "example".

There are also other variations of the attribute substring selector:

Attribute selectors provide a powerful way to target elements based on their attributes, giving you more flexibility in styling specific elements on your web pages.

:hover Pseudo-class

The :hover pseudo-class targets an element when the mouse pointer hovers over it. It is commonly used to change the appearance of links or buttons when the user interacts with them.

a:hover {
  color: red;
  text-decoration: underline;
}

This rule changes the text color to red and adds an underline to <a> elements when the mouse pointer hovers over them.

:active Pseudo-class

The :active pseudo-class targets an element when it is being activated, such as when a button is being clicked or a link is being followed. It is used to provide visual feedback to the user that their action is being processed.

button:active {
  background-color: darkblue;
  transform: translateY(2px);
}

This rule changes the background color to dark blue and shifts the <button> element down by 2 pixels when it is being clicked, giving the impression of a physical button press.

:focus Pseudo-class

The :focus pseudo-class targets an element when it has focus, such as when a form input is selected and ready for user input. It is used to visually highlight the element that the user is currently interacting with.

input:focus {
  outline: 2px solid blue;
  background-color: lightblue;
}

This rule adds a 2-pixel solid blue outline and changes the background color to light blue for <input> elements when they have focus.

:first-child Pseudo-class

The :first-child pseudo-class targets an element that is the first child of its parent. It is used to apply styles to the first element within a group of sibling elements.

ul li:first-child {
  font-weight: bold;
  color: red;
}

This rule sets the font weight to bold and the text color to red for the first <li> element within a <ul> element.

:last-child Pseudo-class

The :last-child pseudo-class targets an element that is the last child of its parent. It is used to apply styles to the last element within a group of sibling elements.

ol li:last-child {
  font-style: italic;
  color: green;
}

This rule sets the font style to italic and the text color to green for the last <li> element within an <ol> element.

Pseudo-classes add dynamic behavior and styling possibilities to your CSS. They allow you to target elements based on their state or position, creating more interactive and visually appealing web pages.

::before Pseudo-element

The ::before pseudo-element lets you insert content before an element's content. It is used to add elements or icons.

blockquote::before {
  content: "\201C";
  font-size: 24px;
  color: gray;
}

This rule inserts an opening quotation mark (") before the content of <blockquote> elements, sets its font size to 24 pixels, and its color to gray.

::after Pseudo-element

The ::after pseudo-element lets you insert content after an element's content. It is used to add elements or clearfix hacks.

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 12px;
  color: red;
}

This rule inserts the text " (PDF)" after the content of <a> elements with an href attribute that ends with ".pdf", sets its font size to 12 pixels, and its color to red.

::first-letter Pseudo-element

The ::first-letter pseudo-element targets the first letter of an element's text content. It is used for drop caps or other typographic effects.

p::first-letter {
  font-size: 48px;
  float: left;
  margin-right: 5px;
}

This rule sets the font size of the first letter of <p> elements to 48 pixels, floats it to the left, and adds a right margin of 5 pixels, creating a drop cap effect.

::first-line Pseudo-element

The ::first-line pseudo-element targets the first line of an element's text content. It is used to style the first line of a paragraph differently.

article p::first-line {
  font-weight: bold;
  color: darkblue;
}

This rule sets the font weight to bold and the color to dark blue for the first line of <p> elements inside an <article> element.

Pseudo-elements give you a way to style parts of an element without cluttering your HTML with extra tags or classes. They let you add visual effects to your web pages using only CSS.

Inline Styles

Inline styles, defined directly on an element using the style attribute, have the highest specificity. They override any other styles applied to the same element, regardless of their selector type.

<p style="color: red; font-size: 20px;">This text will be red and 20 pixels.</p>

IDs

IDs have higher specificity than classes and attributes. If an element has an ID and a class or attribute selector targeting it, the styles defined by the ID selector will take precedence.

<style>
  #special {
    color: blue;
  }
  .highlight {
    color: yellow;
  }
</style>

<p id="special" class="highlight">This text will be blue, not yellow.</p>

Classes and Attributes

Classes and attribute selectors have higher specificity than element selectors. If an element has a class or attribute selector targeting it, along with an element selector, the styles defined by the class or attribute selector will take precedence.

<style>
  p {
    color: black;
  }
  .highlight {
    color: yellow;
  }
  [data-type="important"] {
    color: red;
  }
</style>

<p class="highlight" data-type="important">This text will be red.</p>

Calculating Specificity

Specificity is calculated using a point system. Each type of selector is assigned a value:

The selector with the highest total specificity points wins. If two selectors have the same specificity, the one that appears later in the CSS file takes precedence.

Inherited Properties

Some CSS properties, such as those related to text and fonts, are inherited by default. This means that if you set a value for one of these properties on a parent element, its child elements will automatically inherit that value unless you override it.

Examples of commonly inherited properties include:

• color
• font-family
• font-size
• font-weight
• line-height
• text-align
• text-decoration

<style>
  body {
    color: blue;
    font-family: Arial, sans-serif;
  }
  h1 {
    font-size: 24px;
  }
</style>

<body>
  <h1>This heading will be blue and use Arial font.</h1>
  <p>This paragraph will also be blue and use Arial font.</p>
</body>

The inherit Keyword

In some cases, you may want to explicitly inherit a property value from a parent element, even if that property is not inherited by default. You can use the inherit keyword to achieve this.

<style>
  div {
    border: 1px solid black;
    padding: 10px;
  }
  p {
    border: inherit;
    padding: inherit;
  }
</style>

<div>
  <p>This paragraph will have the same border and padding as the div.</p>
</div>