CSS basics: basic and syntax, css basic syntax

Source: Internet
Author: User

CSS basics: basic and syntax, css basic syntax

CSS syntax

CSS Rules consist of two main parts: Selector and one or more declarations. A selector is usually an HTML element that you need to change the style.

selector {declaration1; declaration2; ... declarationN }

Each declaration consists of an attribute and a value.
Property is a style attribute ). Each attribute has a value. The attribute and value are separated by colons.

selector {property: value}

For example, the following line of code defines the text color in h1 as red, and sets the font size to 14 pixels.
In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.

h1 {color:red; font-size:14px;}

Introduce CSS styles

How to insert a style sheet? When reading a style sheet, the browser will format the HTML document based on it. There are three ways to insert a style sheet: external style sheet, internal style sheet, and inline style.

1. External Style Sheets

When a style needs to be applied to many pages, the external style sheet is ideal. When using an external style sheet, you can change the appearance of the entire site by changing a file. Use the <link> label to link to the style sheet on each page. <Link> tag in (document) header:

2. Internal Style Sheets
When a document requires a special style, you should use an internal style sheet. You can use the <style> label to define an internal style sheet in the Document Header, as shown in the following figure:

<Head> <style type = "text/css"> p {margin-left: 20px;} body {background-image: url ("images/test.gif ");} </style> 

3. because inline styles need to mix the representation and content, that is, HTML code and CSS code, this is not conducive to the document structure and is not easy to maintain. Therefore, do not use this method to introduce styles. For example, to change the color and left margin of a paragraph:

<p style="color: red; margin-left: 20px;">This is a paragraph</p>

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.