About CSS Syntax basics

Source: Internet
Author: User
Tags html tags tag name
1. Basic grammar
The definition of CSS is composed of three parts: selectors (selector), attributes (properties), and values (value).
The basic format is as follows:
selector {Property:value}
(Selector {property: value})
A selector can be a variety of forms, typically the HTML tag you want to define a style for, such as body, P, TABLE ..., you can define its properties and values by this method, and the attributes and values are separated by colons:
Body {Color:black}
Selector body is the main part of the page, color is the control of the color of the text, black is the color of the value, the effect of this example is to make the text in the page is dark.
If the value of a property is composed of more than one word, you must enclose the value in quotes, such as the name of the font that is often a combination of several words:
P {font-family: "Sans serif"}
(define paragraph font as sans serif)
If you need to specify multiple properties for a selector, we use semicolons to separate all the attributes and values:
p {text-align:center; color:red}
(The paragraph is centered, and the text in the paragraph is red)
To make your defined style sheet easy to read, you can use the writing form of a branch:
P
{
Text-align:center;
Color:black;
Font-family:arial
}
(The paragraph is centered, the text in the paragraph is black, and the font is Arial)
2. Selector Group
You can combine selectors of the same attributes and values to write, separating the selectors with commas, which reduces the style repetition definition:
H1, H2, H3, H4, H5, h6 {Color:green}
(This group includes all the header elements, and the text for each heading element is green)
P, table{font-size:9pt}
(Text size in paragraphs and tables is 9th words)
The effect is exactly equivalent to:
p {font-size:9pt}
Table {FONT-SIZE:9PT}
3. Class Selector
With the class selector you can define different styles for the same element category, and when defining a class selector, add a point number to the name of the custom class. If you want two different paragraphs, one paragraph aligned to the right, and one paragraph centered, you can define two classes first:
p.right {Text-align:right}
P.center {Text-align:center}
And then use it not in a different paragraph, just add the class argument you defined in the HTML tag:
<p class= "Right" > This paragraph is right-aligned
</p>
<p class= "center" >
This paragraph is arranged in the center
</p>
Note: The name of the class can be any English word or a combination of the beginning and the number in English, generally with its function and effect briefly named.
There is also a use of the class selector to omit the HTML tag name in the selector so that several different elements can be defined in the same style:
. Center {Text-align:center}
(The class selector for the definition. Center is centered in the text)
Such a class can be applied to any element. Here we make the H1 element (Heading 1) and the P element (paragraph) grouped into the "center" class, which causes the styles of the two elements to follow the ". Center" class selector:
&LT;H1 class= "center" >
This title is centered.
<p class= "center" >
This paragraph is also arranged in the center
</p>
Note: This class selector, which omits HTML tags, is the most commonly used CSS method, and it is convenient for us to apply a predefined class style to any element.
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.