11.12. HTML style-CSS

CSS (Cascading Style Sheets) is used to render the style of HTML element tags.

11.12.1. Look! Styles and colors ¶

Manipulate Text

Colors, Boxes

And more…

11.12.2. How to use CSS ¶

CSS was introduced in HTML 4 to better render HTML elements

CSS can be added to HTML in the following ways:

Inline style-use the “style” attribute in the HTML element
Internal stylesheet-in the HTML document header <head> area use <style> element to contain CSS
External references-use external CSS files

The best way is to reference the CSS file externally.

In the HTML tutorial on this site, we use the inline CSS style to introduce the example, which is to simplify the example and make it easier for you to edit the code and run the example online.

You can learn more about CSS through the CSS tutorial on this site.

11.12.3. Inline style ¶

Inline styles can be used when special styles need to be applied to individual elements. The way to use inline styles is to use style attributes in related tags. Style properties can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

11.12.4. HTML style instance-background color ¶

The background color attribute (background-color) defines the background color of an element:

Example ¶

<bodystyle="background-color:yellow;"><h2style="background-color:red;">This is a title</h2><pstyle="background-color:green;">This is a paragraph.</p></body>

The early background color attribute (background-color) is defined by using the bgcolor property definition.

11.12.5. HTML style example-font, font color, font size ¶

We can use the font-family, color, and font-sizeproperties to define the font style:

Example ¶

<h1style="font-family:verdana;">A title</h1><pstyle="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

Instead of using the < font > tag, font-family, color, and font-size attributes are now commonly used to define text styles.

11.12.6. HTML style instance-text alignment ¶

Use text-align the (text alignment) property specifies the horizontal and vertical alignment of the text:

Example ¶

<h1style="text-align:center;">Centered titles</h1><p>This is a paragraph.</p>

Text alignment attribute text-align replace the old label <center> .

11.12.7. Internal style sheet ¶

When a single file requires a special style, you can use an internal style sheet. You can do it in the <head> partially pass <style> the tag defines the internal style sheet:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

11.12.8. External style sheet ¶

External stylesheets are ideal when styles need to be applied to many pages.Using external stylesheets, you can change the appearance of the entire site by changing a file.

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

11.12.9. HTML style label ¶

Label	Description
< style >	Define text style
< link >	Define the resource reference address

11.12.10. Deprecated tags and attributes ¶

In HTML 4, tags and attributes that originally supported defining HTML element styles have been deprecated. These tags will not support the new version of HTML tags.

The labels that are not recommended for use are: <font> , <center> , <strike>

Properties that are not recommended: color and bgcolor .