Beautify your webpage with CSS

CSS is short for "Cascading Style Sheets. HTML allows us to use CSS for style display. For example, we can use the <B> label to make the page font bold. For example:

<B> webpage teaching network bold font display </B>

If you want to display the font in red, ,, and bold, we can use the following code:

<Font color = "# ff0000" face = ""> <strong> web teaching network font demonstration </strong> </font>

When we observe the above Code, we find that there are more elements in the webpage, and it may look messy when we write it ourselves. At this time, we should wonder if there is one way to use less code, what if the above display is met at the same time? The answer is yes. We will use CSS now. Set a style with CSS, set the features we need, name it a unique name, and store it elsewhere on the website, then, when compiling HTML, We can reference the name of the style just now to meet this requirement. For example:

<P class = "mynewstyle"> CSS style text of webpage tutorial Network </P>

Add the set style code between the

<Style type = "text/CSS">

<! --

. Mynewstyle {

Font-family:;

Font-weight: bold;

Color: # ff0000;

}

-->

</Style>

If you want to use the CSS above to control every page on your webpage, copy and paste the above Code. If you think the webpage header is messy, we can also save the CSS style as a file (the file extension is. CSS). Then, we can reference the saved file in HTML to reference the style. If the name of the file you saved is myfirststylesheet.css, we can use the following code to reference it:

<Link href = "myfirststylesheet.css" rel = "stylesheet" type = "text/CSS">

Note: The above code should be placed in the

CSS settings are not mentioned here. We can open a notepad or use specialized design tools such as DW.

Do not add the following code when editing CSS:

<Style type = "text/CSS">

</Style>

You only need to set the CSS style in the CSS file, such:

. Mynewstyle {

Font-family:;

Font-weight: bold;

Font-size: 8pt;

Color: # ff0000;

}

. My2ndnewstyle {

Font-family:;

Font-weight: bold;

Font-size: 9pt;

Color: # ff0000;

}

. My3rdnewstyle {

Font-family:;

Font-weight: bold;

Font-size: 12pt;

Color: # ff0000;

}

Then, save the file with the extension CSS (for example, myfirststylesheet.css)

Finally, we can add the following code in the body area of the HTML code to reference our settings:

<P class = "mynewstyle"> CSS font display on Webpage teaching network 1 </P>

<H2 class = "my2ndnewstyle"> CSS font display on the webpage teaching network 2 </H2>

<H3 class = "my3rdnewstyle"> 3

The <H2> label is used in the above Code. We can also define the style of the label directly in CSS:

H1 {font-family: Garamond, "Times New Roman", Serif; font-size: 200% ;}

Then we can directly add the following to the Code:

<H1> CSS font display on Webpage teaching network 2

In this way, the settings are displayed in the same style.

We can also set the style of other labels. For example, we can set the border of the entire page:

Body {margin-left: 15%; margin-Right: 15% ;}

You can also set the DIV Tag:

Div {

Background: RGB (204,204,255 );

Padding: 0.5em;

Border: 1px solid #000000;

}

In HTML code, as long as the content between <div> and </div> is displayed in the above style.

The following is an example of changing the color of a super connection:

. A: link {color: RGB (0, 0,153)}/* unaccessed connections */

. A: visited {color: RGB (153, 0,153)}/* connection after access */

. A: hover {color: RGB (0, 96,255)}/* hovering status */

. A: Active {color: RGB (255, 0,102)}/* connection activation status */

Then add the following to the HTML code:

<A href = "http://www.webjx.com"> Web Teaching Network </a>

The above code can be displayed in the style we set.

Finally, I would like to extend it to you because some netizens recently asked in the forum how to make connections on the same page different? Let's take a look at this example. In this case, we need to set another CSS style:

. A1: link {color: # ff0000; text-Decoration: underline}/* red, underlined */

. A1: hover {color: # ff0000; text-Decoration: underline}

. A1: visited {color: #000000; text-Decoration: None}/* Black, no underline */

. A1: Active {color: # 0000ff; text-Decoration: None}

Then add the following to the HTML code:

<A href = "http://www.webjx.com"> Web Teaching Network </a>

<A href = "http://www.webjx.com" class = "A1"> Web Teaching Network </a>

There will be two connection effects.

CSS is very powerful when we set webpages. I hope you can use it skillfully when creating webpages to make our pages more beautiful and unified. I have a lot of textbooks on CSS on this site. I hope you can study them well! I hope this article will play a very important role.