Generally speaking, all styles have the following rules (the fourth one has the highest priority)
1. Browser default
Browser default
2 , External style sheet
External style sheet
3. Internal style sheet (inside the
tag)Inline style sheet (inside the
tag) 4. Inline style (inside an HTML element)Inline style (within an HTML element)
So the style written in the HTML element has the highest Priority (written within an HTML element), which overrides other forms of style.
The syntax of CSS consists of three parts: a selector, a property and a value, for example: selector{property:value}
The selector is The HTML element/tag you wish to define. Each attribute can have a value. The attribute and value are separated by a colon and enclosed in curly brackets. body{color:black}
If the value is multiple words, Then use double quotes -p{font-family:"sans serif"}
Note: If you want to specify multiple attributes, you must separate each attribute with a semicolon, as in the following example Demonstrates how to define live red text exercises
-p {text-align:center;color:red}
in order to make style definition more possible For readability, you can describe the attributes in separate lines like this
p{
text-align:center;
color:black;
font-family: arial
}
can also combine selectors. Separate each selector with a comma. The example below combines all heading elements and changes their color to green
h1,h2,h3,h4,h5,h6{color:green}
Using selector classes you can define different styles for the same type of HTML elements. For example, you want to have two different styles of paragraphs in your document: one is right-aligned, and the other is centered. This shows you how to do this with styles
p.right{text-align:right}
p.center{text-align:center}
You must use the class attribute in your HTML document (to show the effect)
This paragraph will be right-aligned.
This paragraph will be center-aligned.
Note: Each HTML element can only have one class attribute
You can also omit the tag name and define it directly, so that you can use it in all HTML elements. The following example can center the text of all elements with class="center" in all HTML:
.center{text-align:center}
H1 and P elements in the following code All have class="center". This means that both elements will follow the rules of the selector "center"
This paragraph will also be center-aligned.
Do not use classes whose names begin with numbers. Doesn't work properly in Mozilla/Firefox.
(id selector)
Using id selector you can define the same style for different HTML elements
Style below The rule matches any element with an id attribute value of "green"
#green{color:green}
The above rule will match h1 and p elements
Some text
The following style The rule will match any p element with an id attribute value of "green"
p#green{color:green}
The above rule does not match the h1 element (that is, it does not Will produce style effect)
Same as class, the name of id Do not use numbers at the beginning, otherwise it will not work properly in Mozilla/Firefox.
How to insert a style sheet?
When the browser reads the style sheet, it formats the document according to it (the style sheet). There are three ways to insert a style sheet
1. External Style Sheet
2. Internal Style Sheet
3. Inline style (Inline Styles)
External style sheets:
Using external style sheets is an ideal way to apply styles to multiple web pages. This way you only need to change one file to change the appearance of the entire website. Use the tag to link each page to the style sheet. The tag is used in the head area
The browser will read the style definition information from the mystyle.css file and format the document according to it
External style sheets can be written using any text editor. The file should not contain any html tags. And save it as a file with the suffix .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)}
Inline style Table
An inline style sheet should be used when there are separate documents with special styles. Use the
