CSS (cascading style sheets) basics

CSS refers to cascading style sheets (cascading style Sheets). Style defines how HTML elements are displayed. It is usually stored in a style sheet, adding styles to HTML 4.0 to solve the problem of separating content from performance.

What style is used when the same HTML element is defined by more than one style?

Generally, all styles are stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest precedence.

1. Browser default settings
2. External style sheet
3. Internal style sheet (inside the
4. Inline style (inside HTML elements)

Therefore, the inline style (inside the HTML element) has the highest precedence, which means that it will take precedence over the style declarations in the:

CSS syntax

A CSS rule consists of two main parts: a selector, and one or more declarations.

selector {declaration1; declaration2; ... declarationn}

Selectors are usually HTML elements that you need to change the style.

Each declaration consists of an attribute and a value.

The property is the style property (style attribute) that you want to set. Each property has a value. Attributes and values are separated by colons.

selector {Property:value}

The next line of code is to define the text color within the H1 element to be red, while setting the font size to 14 pixels.

In this example, H1 is a selector, color and font-size are attributes, and red and 14px are values.

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

The following shows you the structure of the above code:

tip: use curly braces to enclose the declaration.

Grouping of selectors

You can group selectors so that the grouped selectors can share the same claims. Separate the selectors that need to be grouped with commas. In the following example, we group all the header elements. All the caption elements are green.

h1,h2,h3,h4,h5,h6{  color:green;  }

Inheritance and its problems

Depending on the CSS, child elements inherit attributes from the parent element. But it doesn't always work this way. Take a look at the following rule:

Body {     Font-family:verdana, sans-serif;     }

According to the above rule, the BODY element of the site will use the Verdana font (if the font exists in the visitor's system).

With CSS inheritance, child elements inherit the attributes owned by the highest-level elements (in this case, the body) (these child elements such as P, TD, UL, OL, UL, Li, DL, DT, and DD). No additional rules are required, and all child elements of the body should display the Verdana font, as are the child elements of the child element. And in most modern browsers, it is true.

But that is not necessarily the case in the bloody era of browser wars, when support for standards is not a business priority. For example, Netscape 4 does not support inheritance, it ignores inheritance, and also ignores rules applied to the BODY element. Ie/windows until IE6 there is a related problem, the font style inside the table is ignored. What are we supposed to be doing?

Derived selectors

You can make the markup more concise by defining the style based on the context of the element in its place.

In CSS1, selectors that apply rules in this way are called context selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derived selectors, but whatever you call them, they work the same way.

A derived selector allows you to determine the style of a label based on the context of the document. By using derived selectors reasonably, we can make the HTML code neater.

For example, if you want the strong element in the list to become italic instead of the usual bold character, you can define a derived selector like this:

li strong{    font-style:italic;    Font-weight:normal;  }

Note the contextual relationship of the blue code marked <strong>:

<p><strong> I am bold, not italic, because I am not in the list, so this rule does not work for me </strong></p><ol> I am <li><strong> italic word. This is because the strong element is inside the LI element. </strong></li><li> I am the normal font. </li></ol>

In the example above, only the strong element in the LI element is styled in italics, without defining a particular class or ID for the strong element, and the code is more concise.

ID Selector

The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.

The ID selector is defined as "#".

It is important to note that each ID can only appear once in the same HTML document.

In CSS, the class selector is displayed with a dot number:

.center{Text-align:center}

In the example above, all HTML elements that have the center class are centered.

In the following HTML code, both the H1 and P elements have the center class. This means that both will adhere to the rules in the. Center selector.

class="center"class="center">this Paragraph'll also be center-aligned.</p>

Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.

To be flexible with the use of various types of CSS, and combined.

How to insert a style sheet

When a style sheet is read, the browser formats the HTML document according to it. There are three ways to insert a style sheet:

External style sheet

An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file. Each page uses <link> tags to link to the style sheet. <link> tags at the head of (document):

link rel= "stylesheet" type= "Text/css" href= " mystyle.css />
The browser reads the style declaration from the file mystyle.css and formats the document according to it.
External style sheets can be edited in any text editor. The file cannot contain any HTML tags. Style sheets should be saved with a. css extension. Here is 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 the attribute values and the units. If you use "margin-left:20 px" instead of "margin-left:20px", it works only in IE 6, but not in Mozilla/firefox or Netscape.
Internal style sheet
An internal style sheet should be used when a particular style is required for a single document. You can use the <style> tag to define an internal style sheet at the head of the document, just like this:
<style type="text/css">  hr {Color:sienna;}  p {margin-left:20px;}  Body {background-image:url ("Images/back40.gif");} </style> 
inline style
Inline styles lose many of the benefits of stylesheets because of the mix of performance and content. Use this method with caution, such as when the style only needs to be applied once on one element.
To use inline styles, you need to use style properties within the relevant tags. The Style property can contain any CSS properties. This example shows how to change the color and left margin of a paragraph:
style= "Color:sienna; margin-left:20px ">this is a paragraph</p>
Multiple styles
If some properties are defined by the same selector in a different style sheet, the property values are inherited from the more specific style sheet.
For example, an external style sheet has three properties for the H3 selector:
h3 {  color:red;;  left  8pt ;  }
An internal style sheet has two properties for the H3 selector:
h3 {  right ;   20pt ;  }
If this page with an internal stylesheet is connected to an external style sheet, the H3 gets the following style:
redright20pt;
That is, the color attribute will be inherited from the external style sheet, and the text arrangement (text-alignment) and font size (font-size) will be superseded by the rules in the inner style sheet.