Understanding CSS Syntax and Selectors

In this article, Mytour will introduce you to basic syntax and selectors in CSS. Additionally, if you are new to CSS, readers can refer to some CSS lessons already available on Mytour for more detailed information.

Understanding CSS Syntax and Selectors

1. CSS Syntax

CSS Style Rules consist of a selector, property, and its value. The selector points to the HTML element where CSS Style is applied. CSS properties are separated by semicolons.

CSS syntax looks like this:

selector {

// CSS properties

}

- For Example:

Below is an illustrative example of CSS syntax:

The output is in the form: Mytour.

2. CSS Selectors

CSS Selectors are used to select HTML elements based on element name, id, attributes, etc. Selectors can simultaneously select one or multiple different elements.

3. Element Selector

The Element selector in CSS is used to select HTML elements requiring styling. In the selector declaration, it includes the name of the HTML element and the CSS properties applied to that element, enclosed within curly braces {}.

- Syntax of Element selector:

The syntax of Element selector is as follows:

element name {

// CSS properties

}

- For example:

The output appears as: Mytour.

ID selector

The ID selector is used to style a specific ID. The id attribute is a unique identifier in HTML documents. The ID selector is used with the character #.

- Syntax of ID selector:

#id_name {

// CSS properties

}

- For example:

The output appears as: Mytour.

4. Class selector

The Class selector is used to select all elements within a specific class attribute. To select elements within a specific class, we use the (.) character followed by the full name of a class (class name). The full name of the class is used to style CSS properties for the given class.

- Syntax of Class selector:

.class_name {

// CSS attribute

}

- For example:

Here is an example of Class selector:

The output is: Mytour.

In this article, readers have explored CSS syntax and selectors with Mytour. If there are any questions, feel free to leave comments below the article for clarification.

In the upcoming CSS tutorials, Mytour will further guide you on embedding CSS into HTML.