How to use css

CSS (Cascading Style Sheets) is a language used to define web page styles. It is used together with HTML to build web pages. CSS controls the appearance and position of HTML elements to beautify web pages and improve user experience.

In this article, we will introduce the basics of CSS and how to use CSS to change the style of HTML elements.

CSS Basics

CSS consists of selectors and declarations. Selectors are used to select HTML elements to which styles should be applied, while declarations specify the styles to be applied to the selected elements.

Selectors

The following are some common selectors:

• Element selector: By specifying the HTML element name Select an element, for example:

  p {
  color: red;
  }

  Copy after login

  This will select all

  elements in the document and set their color to red.

• Class selector: Select elements by specifying the class name, for example:

  .my-class {
  background-color: yellow;
  }

  Copy after login

  This will select all elements with class="my- class" elements and set their background color to yellow.

• ID selector: Selects a single element by specifying the id, for example:

  #my-id {
  font-size: 20px;
  }

  Copy after login

  This will select the element with id="my-id" element and set its font size to 20 pixels.

• Attribute selector: Selects elements by specifying their attributes, for example:

  a[href="https://www.google.com"] {
  color: blue;
  }

  Copy after login

  This will select all ## that point to Google sites # elements, set their color to blue.

• Pseudo-classes and pseudo-elements: Select elements by specifying the element state or position, for example:

  a:hover {
  text-decoration: underline;
  }

  Copy after login
  This will select all

  Elements, underline their text on mouseover.

p {
  color: red;
}