what are css style rules

CSS style rules define the visual style of HTML elements, including selectors (determining applicable elements) and declaration blocks (defining style attributes and values). Selectors include element selectors (specify element names), class selectors (specify class names), ID selectors (specify IDs) and descendant selectors (select child elements). The declaration block contains style attributes and their values ​​that are used to change the appearance of the element, such as text color, font size, and background color.

CSS Style Rules

CSS style rules are used to define the visual style of HTML elements. Each rule contains two main parts:

• Selector: Identifies the HTML element to which the rule applies.
• Declaration block: Define the element's style attributes and their values.

Selectors

Selectors can specify the target element in a variety of ways:

• Element selectors: Select an element with a specific name, such as p or div.
• Class selector: Selects elements with a specific CSS class name, such as .my-class.
• ID selector: Selects elements with a specific ID, such as #my-id.
• Descendant selector: Selects the child elements of an element, such as div p.

Declaration Block

The declaration block contains a set of style properties, each followed by a colon and a value:

• Attribute: The style attribute to be set, such as color, font-size, or background-color.
• Value: The actual value of the attribute, such as red, 12px, or #ffffff.

Example CSS Style Rules

<code class="css">p {
  color: blue;
  font-size: 16px;
}

.my-class {
  background-color: yellow;
  padding: 10px;
}</code>

The first rule applies to all paragraph (p) elements, changing their text color Set to blue and font size to 16 pixels. The second rule applies to all elements with the my-class CSS class, setting their background color to yellow and adding 10 pixels of padding.

The above is the detailed content of what are css style rules. For more information, please follow other related articles on the PHP Chinese website!