CSS syntax consists of three parts: selectors, attributes, and values

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags change example html selector syntax text use web
CSS Syntax

CSS syntax consists of three parts: selectors, attributes, and values:

selector {Property:value}

Selectors (selector) are usually HTML elements or tags that you want to define, attributes that you want to change, and each property has a value. Attributes and values are separated by colons and surrounded by curly braces, thus forming a complete style declaration (persons):

body {Color:blue}

The function of this line of code is to define the color of the text within the BODY element as blue. In the example above, the body is the selector, and the part that is included in the curly braces is the declaration. Declarations are made up of two parts: properties and values, color as attributes, and blue as values.

Different writing and unit

of

value

In addition to the English word red, we can also use the hexadecimal color value #ff0000:

p {color: #ff0000;}

To save bytes, we can use the abbreviated form of CSS:

p {color: #f00;}

There are also two ways to use RGB values:

p {color:rgb (255,0,0);} p {Color:rgb (100%,0%,0%);}

Note that when you use the RGB percentage, the percent symbol is written even when the value is 0 o'clock. But in other cases it is not necessary. For example, when the size is 0 pixels, the PX unit does not need to be used after 0, because 0 is 0, regardless of the unit.

Remember to write quotes

Tip: If the value is a number of words, enclose the value in quotes:

p {font-family: "sans serif";} Multiple declarations:

Tip: If you want to define more than one declaration, you need to separate each declaration with a semicolon. The following example shows how to define a centered paragraph with a red text. The last rule does not need a semicolon, because the semicolon is a separator in English, not a closing symbol. However, most experienced designers will have semicolons at the end of each statement, so the advantage is that when you add or subtract a declaration from an existing rule, you minimize the likelihood of error. Like this:

p {text-align:center; color:red;}

You should only describe one attribute per line, which will enhance the readability of the style definition, like this:

p {text-align:center; color:black; font-family:arial;} Space and Case

Most style sheets contain more than one rule, and most rules contain more than one declaration. The use of multiple declarations and spaces makes the stylesheet easier to edit:

Body {color: #000; background: #fff; margin:0; padding:0; Font-family:georgia, Palatino, serif;}

The inclusion of spaces does not affect how CSS works in the browser, and, unlike XHTML, CSS is insensitive to capitalization. There is an exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.