Basic CSS Learning

Introduction to CSS

CSS stands for cascading Style Sheets

CSS means cascading style sheets.

Styles define how to display HTML elements

Styles define how HTML elements are to be displayed.

Styles is normally stored in Style Sheets

Styles are typically stored in style sheets.

Styles were added to HTML 4.0 to solve a problem

Styles are added to HTML4.0 to solve the problem.

External Style Sheets can save you a lot of work

Using an external style sheet can improve your productivity.

External Style Sheets is stored in CSS files

The external style sheet is stored in a CSS file.

With CSS, your HTML documents can be displayed using different output styles

With CSS, your HTML document can be displayed with different styles of output.

HTML tags are initially designed to define the contents of a document. By using like , <p> , <table> such tags, they should say "This is a title", "This is a paragraph", "This is a table", and the layout is handled by the browser instead of using formatting tags.
To solve this conundrum, the world Wide Web Consortium, a nonprofit, standard-setting organization that adds style to HTML4.0.
Style sheets are supported by all major browsers. Style sheet defines how elements are to be displayed. External stylesheets allow you to change the look and layout of all the pages that appear in your web, just by editing a single CSS document. (The principle is a dynamic variable)
CSS is a breakthrough in the design world because it allows developers to control the style and layout of multiple Web pages. As a web developer, you can define a style that you want for each HTML element and every page of his application to make a complete change, simply change the style, and all the elements associated with it will be updated automatically.
Style sheets allow style information to be defined in a variety of ways. Styles can be specified in a single HTML element, in an element or in an external CSS file, or even multiple external style sheets can be concentrated in a single HTML document.
Question: What style is used when more than one style specifies an HTML element?
For:
Generally, all styles have the following rules (the fourth is the most preferred):

1. Browser Default
   Browser default
2. External style Sheet
   External style sheet
3. Internal style sheet (inside the tag)
   Inline style sheets ( within tags)
4. Inline style (inside an HTML element)
   inline style (within an HTML element)

So the style that is written in the HTML element has the highest precedence (written within the HTML element), which overrides other forms of style.

CSS syntax

The CSS syntax is made up of three parts:a selector, a property and a value.

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

selector{property: value}

Selectors are HTML elements/tags that you want to define, and each attribute can have a value, and the attributes and values are enclosed in curly braces, separated by the colon area.

body{color: black}

If the value is multiple words, enclose them in double quotation marks.

p{font-family: "sans serif"}

Note: If you want to specify multiple attributes, you must separate each attribute with a semicolon, and the following example demonstrates how to define a middle red text paragraph.

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

To make the style definition more readable, you can describe the property as a branch.

p{    text-align: center;    color: black;    font-family: arial}

You can combine selectors by separating each selector with a comma. The following example combines all the caption elements and their colors turn green.

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

The Class Selector (selector Class)

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

p.right{text-align: right}p.center{text-align: center}

You must use the class attribute in your HTML document (to show the effect).

<p class="right"></p><p class="center"></p>

Note: Each HTML element can have only one class attribute, the following example is not compliant:

class="right"class="center"isparagraph. </p>

You can also omit the tag name to define it directly so that it can be used in all HTML elements. The following example centers all the element text with class= "center" in all HTML:

.center{text-align: center}

The H1 and P elements in the following code have class= "center". This means that both elements will follow the rules of the selector "center".

<h1 class="center"></h1><p class="center"></p>

Note: do not use a class that starts with a number as a name and does not work correctly in Mozilla/firefox.

The ID Selector (ID selector)

With the ID selector you can define the same style for different HTML elements. The following style rule matches any element with an id attribute value of "green".

#green{color: green}

The above rules will match the H1 and P elements.

<h1 id="green">Some text</h1><p id="green">Some text</p>

However, the ID is best still unique, just like the person's ID number, each person has a unique ID number, corresponding to each HTML element has a unique ID.

The following style 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 produce a style effect).

<h1 id="green">Some text</h1>

Like class, the name of the ID does not use numbers at the beginning, or it will not work properly in Mozilla/firefox.

CSS Annotations

You can add comments in the CSS that explain the code so that you can re-edit the code later. The browser ignores the comment, and the comment usually ends with " /* start" */ , like this:

/* This is a comment */p{    text-align: center;    /* This is another comment */    color: black;    font-family: arial}

How to use CSS

How do I insert a style sheet?
When a browser reads a style sheet, it formats the document according to it (the style sheet). There are three ways to insert a style sheet:

• External style sheet (External style Sheet)
• Inline style sheet (Internal style Sheet)
• In-line style (inline styles)

External style sheet

Using an external style sheet is an ideal way to apply styles to more than one page. This way you can change the look of your entire site with just one file. Use <link> tags to connect each page to a style sheet. <link>labels are used in the head area.

<link rel="stylesheet"type="text/css" href="test.css">

The browser reads the style definition information from the Test.css file and formats the document according to it.
External style sheets can be written in any text editor. The file should not contain any HTML tags and be saved as a file with a. css suffix. The following is the contents of a style sheet file:

hr{color: sienna}p{margin-left: 20px}body{background-image: url("images/back40.gif")}

Note: do not add a space between the attribute value and its units! If you use "margin-left:20 px" instead of "margin-left:20px", this may work properly in IE6, but in mozilla/ Firefox or Netscape will not display properly.

Inline style sheet

An inline style sheet should be used when there are special styles for individual documents. Use <style> tags to define styles within the head area, like this:

<head>    <style type="Text/css">        HR {color: red  }. Center {text-align: center;  color: red  }P {margin-left: px  }Body {background-image: url ("images/back40.gif")   }</style></head>

The browser immediately reads the style definition and formats the document according to it.
Note: Browsers generally ignore unknown tags. This means that the old browser does not support the style and ignores the <style> tag, but <style> the content is displayed on the page. Hiding it in an HTML annotation element can prevent this from happening in older browsers.

<head>    <style type="Text/css"><!--        HR {color: red  }. Center {text-align: center;  color: red  }P {margin-left: px  }Body {background-image: url ("images/back40.gif")   }--></style></head>

inline style

Using inline styles confuses the content and form by losing the advantages of the stylesheet. In general, such methods are used when individual elements need to change style.
Use the Style property on the associated label to add inline styles. Style properties can contain any CSS properties. The example will show how to add the left spacing to a paragraph and change the color to red.

<p style="color: red; margin-left: 20px"></p>

Multiple style Sheets

If some properties are set to a different style by the same selector, the value is inherited (materialized) into a more specific style. For example, an external style sheet has such a H3 selector property:

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

There is also an inline style sheet with such a H3 selector property.

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

If a page is connected to an external style sheet while it has an inline style sheet, the H3 property becomes:

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

Colors are inherited from external style sheets and text alignment and text size are replaced by inline style sheets.

About several styles of hyperlinks

There are HTML code as follows:

<p><a href="http://www.163.com">This is a link</a></p>

a:link {color: green}--Indicates that the text shown at the beginning of the link is green.
a:hover {color: black}--Indicates that the cursor hovers over the link and the link becomes black.
a:active {color: blue}--Indicates a click link, the mouse has not been released, the link turns blue.
a:visited {color: yellow}--Indicates that the link has been clicked and the link turns yellow.

Basic CSS Learning