CSS Cascading Style Sheets

CSS Cascading Style Sheets

Generally, all styles have the following rules (the fourth has the highest priority)

1. Browser default

Browser default

2. External style sheet

External style sheet

3. Internal style sheet (inside

Tag)

Embedded style sheet (in

Label)

4. Inline style (inside an HTML element)

Intra-row style (within an HTML element)

Therefore, Styles written in HTML elements have the highest priority (those written in HTML elements), which replaces other styles.

 

CSS syntax consists of three parts: a selector, an attribute, and a value, for example: selector {property: value}

The selector is an HTML element/tag that you want to define. Each attribute can have a value. The attribute and value are separated by a colon and enclosed in braces. body {color: black}

If the value is multiple words, enclose them with double quotation marks-p {font-family: sans serif}

Note: If you want to specify multiple attributes, you must separate each attribute with a semicolon. The following example shows how to define the residence red text exercise.

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

 

To make style definitions more readable, you can describe attributes in a branch like this

P {

Text-align: center;

Color: black;

Font-family: arial

}

You can also combine selectors. Separate each selector with commas. In the following example, all the title elements are combined and their colors are green.

H1, h2, h3, h4, h5, h6 {color: green}

 

With the selector class, you can define different styles for HTML elements of the same type. For example, you want to have two different paragraphs in your document: one is right alignment and the other is centered. This tells you how to use styles to do this.

P. right {text-align: right}

P. center {text-align: center}

You must use class attributes in your HTML document (to display the effect)

 

This paragraph will be right-aligned.

 

 

This paragraph will be center-aligned.

 

Note: Each HTML element can have only one class attribute.

 

You can also omit the Tag Name and define it directly, so that you can use it in all HTML elements. In the following example, all elements with class = center in HTML can be centered in text:

. Center {text-align: center}

In the following code, both H1 and P have class = "center ". This means that both elements will follow the "center" rule of the selector.

 

This heading will be center-aligned

 

 

This paragraph will also be center-aligned.

 

 

Do not use a class with the name starting with a number. It does not work properly in Mozilla/Firefox.

 

(Id selector)

You can use the id selector to define the same style for different HTML elements.

The following style rules match any element with the id attribute value "green ".

# Green {color: green}

The above rule will match the h1 and p elements.

 

Some text

 

 

Some text

 

The following style rules match any p element with the id attribute value "green ".

P # green {color: green}

The above rule does not match the h1 element (that is, the style effect will not be generated)

 

Some text

 

 

Like the class, do not use numbers at the beginning of the id name, otherwise it will not work properly in Mozilla/Firefox.

 

How to insert a style sheet?

When the browser reads a style sheet, it will format the document according to it (style sheet. You can insert a style sheet in three ways.

1. External Style Sheet (External Style Sheet)

2. Embedded Style Sheet (Internal Style Sheet)

3. Inline Styles)

 

External style sheet:

Using External style sheets is an ideal method for applying styles to multiple webpages. In this way, you only need to change a file to change the appearance of the entire website. Use

Tags connect each page to the style sheet. Label used in the head area

 

 

 

The browser reads the style definition information from the mystyle.css file and uses it to format the document.

 

External style sheets can be written in any text editor. The file should not contain any html tags. Save it as a file suffixed with. CSS. The following is the content of a style sheet file.

Hr {color: sienna}

P {margin-left: 20px}

Body {background-image: url (images/back40.gif )}

 

Embedded style sheet

An embedded style sheet should be used when a separate document has a special style. Use

 

 

Intra-row style

The use of intra-row styles will lose the advantages of style sheets and confuse content and forms. This method is generally used when the style of individual elements needs to be changed.

Use the style attribute on related labels to add the in-row style. Style attributes can contain any CSS attributes. The example shows how to add left spacing to a paragraph and change the color to red.

 

This is a paragraph

 

 

Multiple Style Sheets

If some attributes are set to different styles by the same selector, the values are inherited (embodied) to more specific styles)

For example, an external style sheet has the h3 selector attribute.

H3 {color: red; text-align: left; font-size: 8pt}

At the same time, an embedded style sheet has such h3 selector attributes.

H3 {text-align: right; font-size: 20pt}

If the page is connected to an external style sheet while there is an embedded style sheet, the h3 attribute is changed

Color: red; text-align: right; font-size: 20pt

Color inherits from external style sheets, while text alignment and text size are replaced by embedded style sheets.