Pa2sw0rd HTML Styles – CSS
CSS (Cascading Style Sheets) is used to render the styles of HTML element tags.
Look! Styles and colors
Try it out – Example
HTML Using Styles
This example demonstrates how to format HTML using style information added to the <head> section.
This example demonstrates how to use the style attribute to make a link without an underline.
How to use the style attribute to make a link without an underline.
Linking to an External Style Sheet
This example demonstrates how to use
the <style> tag to link to an external style sheet.
How to use CSS
CSS was first used in HTML 4 and was introduced to better render HTML elements.
CSS can be added to HTML in the following ways:
- Inline styles – using the “style” attribute on HTML elements
- Internal style sheets – use the <style> element in the <head> area of an HTML document to include CSS
- External Reference – Use an external CSS file
The best way is to use an external CSS file.
In the HTML tutorials on this site, we use inline CSS styles to introduce examples. This is to simplify the examples and make it easier for you to edit the code online and run the examples online.
You can learn more about CSS through the CSS tutorial on this site .
Inline styles
When special styles need to be applied to individual elements, inline styles can be used. The way to use inline styles is to use the style attribute in the relevant tag. The style attribute 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>To learn more about styles, visit the CSS Tutorial .
HTML Style Example – Background Color
The background-color property defines the background color of an element:
<body style="background-color:yellow;">
<h2 style="background-color:red;">this is a title.</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>Earlier the background-color property was defined using the bgcolor property.
Try it: Old HTML background method
HTML Style Examples – Font, Font Color, Font Size
We can use the font-family (font), color (color), and font-size (font size) properties to define the style of the font:
<h1 style="font-family:verdana;">title</h1>
<p style="font-family:arial;color:red;font-size:20px;">paragraph</p>It is now common to use the font-family (font), color (color), and font-size (font size) properties to define text styles instead of using the <font> tag.
HTML Style Example – Text Alignment
Use the text-align property to specify the horizontal and vertical alignment of text:
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>The text-align property replaces the old <center> tag.
Internal style sheets
When a single file requires a special style, you can use an internal style sheet. You can define an internal style sheet in the <head> section using the <style> tag:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>External style sheets
When styles need to be applied to many pages, external style sheets are ideal. With external style sheets, you can change the look of the entire site by changing one file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>HTML style tags
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
Deprecated tags and attributes
In HTML 4, the tags and attributes that originally supported defining styles for HTML elements have been deprecated. These tags will not be supported in newer versions of HTML tags.
Deprecated tags: <font>, <center>, <strike>
Deprecated attributes: color and bgcolor.
IT Resource Hub » HTML Styles – CSS
