CSS creation
May 03, 2021 CSS
Table of contents
2. How to insert a style sheet
7. Multiple styles cascade into one
CSS creates
When you read a style sheet, the browser formats the HTML document based on it.
How to insert a style sheet
There are three ways to insert a style sheet:
- The external style sheet
- The internal style sheet
- Inline style
The external style sheet
External style sheets are ideal when styles need to be applied to many pages. W ith an external style sheet, you can change the appearance of the entire site by changing a file. E ach page is linked to a style sheet using the label. The label is at the head (of the document).
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The browser reads the style declaration from .css mystyle and formats the document based on it.
External style sheets can be edited in any text editor. T he file cannot contain any html tags. S tyle sheets should be based on . T he CSS extension is saved. Here's an example of a style sheet file:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
Do not leave spaces between property values and units.
If you use "margin-left: 20 px" instead of "margin-left: 20px," it works only in IE 6, but does not work in Mozilla/Firefox or Netscape.
The internal style sheet
When a single document requires a special style, you should use an internal style sheet.
You can
<style>
style sheet at the head of the document, as follows:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline style
Inline styles lose many of the advantages of style sheets because of the mixing of performance and content. Use this method with caution, for example, when a style needs to be applied only once on an element.
To use inline styles, you need to use style properties within the relevant labels. T he Style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph:
Multiple styles
If some properties are defined by the same selector in different style sheets, property values are inherited from more specific style sheets.
For example, an external style sheet has three properties for the H3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
The internal style sheet has two properties for the H3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If this page with an internal style sheet is linked to an external style sheet at the same time, H3 gets the style:
color:red; text-align:right;
font-size:20pt;
That is, color properties are inherited from external style sheets, while text-alignment and font-size are replaced by rules in internal style sheets.
Multiple styles cascade into one
Style sheets allow style information to be specified in a variety of ways. S tyles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets inside the same HTML document.
Cascade order
Which style is used when the same HTML element is defined by more than one style?
In general, all styles are stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest priority.
- Browser default settings
- The external style sheet
- Internal style sheet (inside the head label)
- Inline style (inside HTML elements)
Therefore, the inline style (inside the HTML element) has the highest priority, which means that it takes precedence over the following style declarations: style declarations in labels, style declarations in external style sheets, or style declarations in browsers (default).
Tip: If
you use a style for an external file and define the style in the internal style, the internal style sheet replaces the style for the external file.
Multi-style priorities are well understood
Priority is used by the browser to determine and apply to an element by determining which property values are most relevant to the element.
Priority is determined only by matching rules made up of selectors.
Priority is a weight assigned to a specified CSS declaration, which is determined by the value of each selector type in the matching selector.
Multi-style priority order
The following is a list of selectors with a step-by-step increase in priority, with the number 7 having the highest priority:
- Universal Selector
- Element (type) selector
- Class selector
- Property selector
- Pseudo class
- ID selector
- Inline style
The exception to the !important rule
When the !important rule is applied to a style declaration, it overrides any other declaration in the CSS, regardless of where it is in the declaration list. N evertheless, the important rule has nothing to do with priority. Using !important is not a good habit because it changes the cascading rules of your style sheet, making it difficult to debug.
Some rules of experience:
- Always wants to optimize and consider using the priority of style rules to solve the problem instead of !important
- Only uses ! important only on specific pages that need to cover the full station or external css, such as the referenced ExtJs or YUI
- Never Never never use ! important on station-wide CSS
- Never Never never use ! important in your plug-in
Weight calculation:
Here's an explanation of the figure above:
- Inline style sheets have weights of up to 1000
- The weight of the ID selector is 100
- The Class class selector has a weight of 10
- The HTML tag selector has a weight of 1
Using the weight of the selector for calculated comparison, em displays blue, and we provide a detailed code reference:
<html>
<head>
<style type="text/css">
#redP p {
/ * Weight = 100 + 1 = 101 * /
Color: # f00; / * red * /
}
#redP .red em {
/ * Weight = 100 + 10 + 1 = 111 * /
Color: # 00f; / * Blue * /
}
#redP p span em {
/ * Weight = 100 + 1 + 1 + 1 = 103 * /
Color: # ff0; / * Yellow * /
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
Try it out . . .
CSS Priority Law:
- A Selectors have a weight, the greater the weight, the higher the priority;
- B When the weights are equal, the style sheet settings that appear later are better than the style sheet settings that appear first;
- C Creator's rule is higher than the viewer's: that is, the CSS style set by the web page writer takes precedence over the style set by the browser;
- D Inherited CSS styles are not as good as those later specified;
- E the "!important" rule is the highest priority in the same set of property settings;