Introduction to CSS

May 04, 2021 CSS

1. Example

2. Browser style

CSS overview

1. Cascading Style Sheets cascades style sheets, which control the style and layout of multiple pages;

2. Basics required: HTML, XHTML;

Key implementations:

Style

----- defines how HTML elements are displayed;

----- stored in a style sheet;

----- to HTML4.0 to resolve the separation of content from performance;

----- multiple style definitions can be cascaded into one.

CSS solves the problem -- make better use of HTML

1. Background

HTML tags were originally designed to define document content. That is, to express information such as "this is the title", "this is a paragraph", "this is a table" by using a label such as "this is a title", "this is a paragraph", "this is a table".

At the same time, the layout of the document is done by the browser without using any formatted labels.

As two major browsers (Netscape and Internet Explorer) continue to add new HTML tags and properties, such as font labels and color properties, to HTML specifications and create documents, it is becoming increasingly difficult for sites with content that are clearly independent of the document's performance layer.

2. Style

To solve this problem, Style has taken on the responsibility of US HTML standardization, so that all major browsers support cascading style sheets;
Greatly improved productivity. S tyle sheets define how HTML elements are displayed, just as font labels and color properties for HTML3.2 do. S tyles are usually saved in an external .css file. By editing just one simple CSS document, an external style sheet gives you the ability to change the layout and appearance of all pages in your site at the same time.
Multiple styles cascade into one. S tyle sheets allow style information to be specified in a variety of ways. It 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.

Example

CSS stands for Cascade Style Sheets. It defines how HTML elements are displayed.

The following HTML code contains the CSS of the style.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        a {
            background-color:grey; 
            color:white 
        } 
        </style> 
    </head> 
    <body> 
        <a href = "https://www.w3cschool.cn">Visit the website</a> 
    </body> 
</html>

The code above sets the background color and foreground color.

Styles are usually saved in .css file.

Browser style

The browser uses cascading and inheritance to determine the value to use for properties when displaying elements.

Each element has some CSS properties.

For each property, the browser needs to traverse the source of all styles.

You've seen three different ways to define styles

Inline
Embedded
The external style sheet

There are two other style sources you need to know.

If no other style is specified, the browser style or user agent style is the default style that the browser applies to the element.

These styles vary slightly from browser to browser.

The following code shows a simple HTML document that does not contain styles.

<!DOCTYPE HTML>
<html>
<body>
    <a href="https://www.w3cschool.cn">Visit the website</a>
    <p>I  like <span>apples</span> and oranges.</p>
    <a href="https://www.w3.org" rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

The text content of the link appears in blue with an underlined text.

The browser is applying a style similar to the one shown in the following code.

a  {
    color: blue;
    text-decoration:  underline;
}

The browser does not have the default style for each HTML element.

Summary

The above is from the basic role of CSS, its internal needs for basic knowledge, as mentioned below, such as CSS basic syntax, selectors, styles, box model positioning and so on.