CSS Syntax

In this tutorial, we will learn how to define CSS rules in a stylesheet, which you can use to set the style of HTML elements through CSS properties. Different HTML elements may have different CSS properties that can be set. CSS properties can be organized into CSS rules. CSS rules combine a set of CSS properties and apply all properties to the HTML elements that match the CSS rule.

Understand CSS Syntax

A CSS stylesheet consists of a set of rules that are interpreted by the web browser and then applied to the corresponding elements in the document, such as paragraphs, headings, etc.

CSS rules have two main parts, a selector and one or more declarations:

The selector specifies which element in the HTML page the CSS rule applies to.

while the declarations within the block determine the formatting of the element on the web page. Each declaration contains an attribute and a value, and these values are separated by a colon (:）separated by a semicolon (;);）ends with a semicolon (;) and the declaration group is enclosed in curly braces{}.

This property is the style attribute you want to change. They can be font, color, background, etc. Each attribute has a value, for example, the color attribute can have a value blueor#0000FFetc.

h1　{color:blue;text-align:center;}

To make CSS more readable, you can place one declaration on each line, as shown below:

h1　{
　　　　color: blue;
　　　　text-align: center;
　　　}

In the above exampleh1is a selector,colorandtext-alignis a CSS property, and the givenblue (h1text color within the tag is blue)andcenter(h1text centered within the tag)are the corresponding values of these properties.

Write comments with CSS

Comments are usually added to make the source code easier to understand. They can help other developers (or you in the future when editing the source code) understand what you are trying to do with CSS. Comments are important to programmers but are ignored by browsers.

CSS comments start with/*to end*/as shown in the following example:

/*　This is a CSS comment　*/
h1　{
　　　　color: blue;
　　　　text-align: center;
}
/*　This is a multi-line CSS comment that spans across more than one line　*/
p {
　　　　font-size:　18px;
　　　　text-transform: uppercase;
}

You can also comment out part of the CSS code for debugging, as shown below:

h1　{
　　　　color: blue;
　　　　text-align: center;}
/*p {
　　　　font-size:　18px;
　　　　text-transform: uppercase;}
*/

Case Sensitivity in CSS

Although CSS property names and many property values are not case-sensitive. However, CSS selectors are case-sensitive, for example:.maincontentWith.mainContentare two different class class selectors and are case-sensitive.

Therefore, for safety reasons, you should assume that all components of CSS rules are case-sensitive.

InNext ChapterIn this section, you will learn various types of CSS selectors.