Html CSS Syntax Rules And Selector Examples

CSS styles consist of a series of rules that are parsed by a web browser and then applied to the corresponding elements of an HTML document. This article will tell you what the CSS syntax rules are and how to use a CSS selector to select Html elements.

Table of Contents

1. CSS Syntax Rules.

CSS syntax rules consist of three parts: selectors, properties, and values.

Selector: it is composed of HTML element ID, class attribute, or element name with some special symbols. It is used to specify which HTML element to define the style for. For example, the selector P defines the style for all Html <p> tags on the web page. Please Note, the CSS selector is case sensitive.
Property Name: the CSS property name that you want to set for HTML elements, which is composed of a series of keywords, such as color, border, font, etc.
Property Value: the property value is composed of numerical value and unit or keyword, which is used to control the display effect of a certain attribute. For example, the value of the color attribute can be green.

The property name and value are separated by a colon (:), each name-value pair are separated by a semicolon (;), and all the name-value pairs belonging to the same selector will be wrapped by braces ( { } ).
Below is a CSS example. The selector is h1, then the CSS style will be applied to all the <h1> tags on the Html web page. All the text that is wrapped by the <h1> tag has a blue color, and the text will be aligned in the center.
```
h1 {
    color: blue;
    text-align: center;
}
```

2. CSS Selectors.

Selectors are composed of HTML element ID, class attribute, or element name itself with some special symbols. It is used to specify the target HTML elements that apply the style.

Selectors are an important part of CSS style rules. We can regard selectors as the matching pattern between CSS styles and HTML elements.
The style rules associated with selectors will be applied to the HTML elements specified by selectors.

2.1 Universal Selector.

The universal selector is indicated by an asterisk *, which does not match a specific HTML element, but matches every element in the HTML document.

In development, we usually use universal selectors to clear the default inner and outer margins in HTML elements, below is an example.
```
* {
    margin: 0 auto;
    padding: 0;
}
```
It is recommended not to use universal selectors too frequently in production environments. Because generic selectors match every Html element on the page, frequent use can put too much unnecessary stress on the browser.

2.2 Html Tag Selector.

A complete HTML document is composed of various tags, and tag selectors can match all tags with the same name in the document through specific tag names.

Below is a CSS style definition that uses an Html tag selector.
```
p {
    color: green;
}
```
The above P selector will apply the style to all the Html <P> tags on the Html web page.

2.3 ID Selector.

The ID selector is used to match tags with the specified ID attribute in the HTML document.

Defining an ID selector requires the hash sign ( # ) followed by the value of the ID property, below is an example.
```
#nav {
    color: blue;
}
```
The above #nav selector can match tags with the id=”nav” attribute in the Html document.

2.4 Class Selector.

2.4.1 Define CSS Style With Class Selector.

The class selector can match specific HTML tags according to the class attribute of the tag, and all qualified tags will be formatted according to the CSS style defined in the selector.

The definition of a class selector requires an English period ( . ), followed by the class name, as shown below.
```
.red {
    color: red;
}
```
The above red selector matches all tags in the document with the class=”red” attribute.

2.4.2 Define Class Selector To Special Html Tag.

Since the class attribute can be applied to different Html tags, you can also specify specific tags when defining the class selector as follows.
```
p.red {
    color: red;
}
```

The p.red selector only applies the styles in it to all Html <p> tags with the attribute class=”red” and has no effect on other tags with the class=”red” attribute.

2.4.3 Define Multiple Class Selectors.

In addition, there may be more than one class attribute in an HTML tag, for example.
```
<div class="info selected"></div>
<div class="info"></div>
```
Suppose we want to set bold for all elements whose class attribute contains info, we can define the below CSS style.
```
.info {
    font-weight:bold;
}
```

Set red font for all elements whose class attribute contains selected, we can define the below CSS style.
```
.selected {
    color: red;
}
```
To set a blue background for an element that contains both info and selected in its class attribute, it can be written as follows.
```
.info.selected {
    background: blue;
}
```
This kind of class selector composed of multiple class attribute values can be called “multi-class selector”, and the class selector defined by a single class attribute value described earlier can be called “single-class selector”.

In a multi-class selector, multiple class attributes are next to each other (such as .info.selected) and do not need to be separated by spaces.

2.5 Descendant Selector.

When a <p> tag is nested inside a <div> tag, the <p> tag can be regarded as a descendant of the <div> tag.
When we need to select the descendant tag of a tag, we can use the descendant selector.

The definition of the descendant selector is to list the tag name, class attribute, or ID attribute from outside to inside according to the nesting relationship of tags, and separate them with spaces in the middle.
The below example selector will only match all descendants <a> tags nested in the unordered list <ul><li> tag.
```
ul li a {
    text-decoration: none;
}
```

2.6 Child Selector.

Child selector is similar to the descendant selector, except that child selector only matches the direct descendant of an element (there is only one nesting level between an element and its child elements).

A child selector consists of two or more selectors separated by a greater than sign( > ).
In the below example, The p > strong selector will set the text in the first child tag <strong> of the <p> tag to red, but it has no effect on the <strong> tag in the second <p> tag.
```
p > strong {
    color:red;
}

<p>welcome to<strong>dev2qa.com</strong>!</p>
<p><em><strong>dev2qa.com</strong></em>, a dedicated coding example website</p>
```

2.7 Neighbor Sibling Selector.

The neighbor sibling selector is used to match another element immediately after an element. These two elements have the same parent element and there is no nesting relationship.

To define the neighbor sibling selector, you need to use the plus sign +. There are two neighbor elements on both sides of the plus sign, and the selector will match the elements after the plus sign.
In the below example, the h1 + p selector matches the <p> tag immediately after the <h1> tag under the same parent element. The ul.task + p selector will match the <p> tag next to and after the <ul> tag under the same parent element, and the <ul> tag must have the class = “task” attribute.
```
h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}
```

2.8 Universal Sibling Selector.

Universal sibling selector is very similar to neighboring sibling selectors, but not so strict.

Universal sibling selectors also match sibling elements under the same parent element, but sibling elements do not need to be adjacent to each other.
Defining a universal sibling selector requires a tilde ( ~ ). Both sides of the tilde are elements under the same parent element. The selector will match the element after the tilde.
In the below example, The h1 ∼ p selector matches all <p> tags after the <h1> tag under the same parent element.
```
h1 ∼ p {
    color: blue;
    font-size: 18px;
}
```

2.9 Group Selector.

Group selectors can apply the same style rules to multiple selectors, separated by a comma.
Doing so can avoid defining duplicate style rules and minimize the code in CSS style sheets. For example, in a CSS style sheet, different selectors may contain the same style rules.

In the below example CSS code, the selectors h1, h2, and h3 contain the same CSS style code font-weight: normal;.

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

At this time, you can use the group selector to define the same style rules for h1, h2, and h3, and then define different style rules between them, as shown below.
```
h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}
```

2.10 Attribute Selector.

Attribute selector is used to matching elements with specific attributes.
The definition of an attribute selector is similar to that of an Html tag selector, except that you need to add the square brackets [] after the tag to specify the attribute information of the Html tag.

In the below example, the input [type = “text”] selector matches all <input> tags with the typ =”text” attribute.
```
input[type="text"] {
   color: red;
}
```
The attribute information in square brackets [] of the attribute selector also supports the following writing methods.
[target]: select all elements with target attribute.

[target = _blank]: select all elements with target = “_blank” attribute.
[title ~ = flower]: select all elements that the title attribute contains the word “flower”.
[lang| = en]: select all elements that have the lang attribute is exactly “en” or start with “en”.