How to add CSS to a Web page

Source: Internet
Author: User
Tags define definition
css| Web page

You can add the style specified by CSS to a Web page in the following 3 ways:

1. Add a hyperlink to the HTML file and connect to the external CSS file

This method is the easiest way to manage the Web page style of the entire website. It separates the text content of the page from the layout design. You only need to be in a CSS file (the file name is. CSS) to define the style of the Web page, all references linked to this CSS file page, will follow the instructions to reflect the definition of a good style.

It's written as:


<HTML>
<HEAD>
<TITLE>
Title of this page
</TITLE>
<link rel= "stylesheet"
Href= "Http://www.xyz.com/xyz.css";
Type= "Text/css" >
</HEAD>


This method of Navigator4 support is still very buggy, please use it carefully.

2. In the HTML file .... Between tags, add a section of CSS narrative

This method is suitable for specifying a Web page, in addition to the external CSS file to define the style of the page, but also to show the HTML file with a raise in the CSS.

If the inner-raised CSS narrative conflicts with the externally linked CSS narrative, the page will be presented with a built-in annotated CSS narrative.

It's written as:

<HTML>
<HEAD>
<TITLE>
Title of this page
</TITLE>
<style type= "Text/css" >
<!--
Body {font:12pt}
H1 {font:16pt}
P {font-weight:bold;
Color:green}
-->
</STYLE>
</HEAD>
<BODY>


Start the content of this page ...

</BODY>
</HTML>

Notably, to prevent browsers that do not support CSS from mistakenly taking CSS style narration between tags as a common string, it is best to insert CSS narrative text between tags.

3. In the HTML file between the lines, at any time need to add a small section of the description of the CSS specified

This method applies to the rendering style of a small piece of text within a specified page.

In addition to exhibiting the external CSS file and the CSS style defined in this HTML file (if any), the navigator also displays the CSS style of the lines.

If the CSS narration between the lines is in conflict with the CSS narration that is defined internally or externally, the display of the navigator will be mainly based on the CSS narration between the lines.

It's written as:

It is written in: <HTML>
<HEAD>
<TITLE>
Title of this page
</TITLE>
</HEAD>
<BODY>
<p style= "color:red" >
Start the content of this page ...
</P>
</BODY>
</HTML>

The above 3 kinds of CSS, can be used at the same time, you can choose your good, single or dual use. If the narrative between the CSS conflict, then the inherent definition of CSS will cover the external link of the CSS, the lines of the CSS will cover the inherent definition of CSS.

Such a layer of promotion, to add down, so that "hierarchical style control" clear and efficient to help web designers, on the one hand, the central co-ordination of the entire site's web page style, on the other hand, with the various pages, the special needs of various paragraphs, and the different style of each deployment. Very methodical, very convenient management, so called "class" style control.

Basic syntax for CSS languages

CSS Language and Web page typesetting language HTML, in the content of a little bit like repeating, but the syntax is very different. Its basic grammar is: H1 {font-size:16pt;
Font-weight:bolder;
Color:red}

In the example above, H1 indicates that the tags you want to define are h1,font-size, font-weight, color, and these extended properties indicate that you want to specify what the H1 should look like. In the above example, I define my H1 should show a font size of 16 points, especially bold black, red appearance.

Simplification of
So, along with this basic notation, we can continue to define the label components: H1 {font-size:16pt;
Font-weight:bolder;
Color:red}
H2 {font-size:16pt;
Font-weight:bolder;
Color:red}
H3 {font-size:16pt;
Font-weight:bolder;
Color:red}



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.