Styling HTML with CSS
CSS was introduced together with HTML 4, to provide a
better way to style HTML elements.
CSS can be added to HTML in the following ways:
Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head>
section
External - using an external CSS file
The preferred way to add CSS to HTML, is to put CSS
syntax in separate CSS files.
However, in this HTML tutorial we will introduce you to
CSS using the style attribute. This is done to simplify the examples. It
also makes it easier for you to edit the code and try it yourself.
You can learn everything about CSS in our CSS
Tutorial.
Inline Styles
An inline style can be used if a unique style is to be
applied to one single occurrence of an element.
To use inline styles, use the style attribute in the
relevant tag. The style attribute can contain any CSS property. The
example below shows how to change the text color and the left margin of
a paragraph:
<p style="color:blue;margin-left:20px;">This is a
paragraph.</p>
To learn more about style sheets, visit our CSS
tutorial.
HTML Style Example - Background Color
The background-color property defines the background
color for an element:
Example
<!DOCTYPE html>
The background-color property makes the "old" bgcolor
attribute obsolete.
HTML Style Example - Font, Color and Size
The font-family, color, and font-size properties
defines the font, color, and size of the text in an element:
Example
<!DOCTYPE html>
The font-family, color, and font-size properties make
the old <font> tag obsolete.
HTML Style Example - Text Alignment
The text-align property specifies the horizontal
alignment of text in an element:
Example
<!DOCTYPE html>
The text-align property makes the old <center> tag
obsolete.
Try it yourself: Centered heading the old way
Internal Style Sheet
An internal style sheet can be used if one single
document has a unique style. Internal styles are defined in the <head>
section of an HTML page, by using the <style> tag, like this:
<head>
External Style Sheet
An external style sheet is ideal when the style is
applied to many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside the
<head> section:
<head>
HTML Style Tags
Deprecated Tags and Attributes
In HTML 4, several tags and attributes were used to
style documents. These tags are not supported in newer versions of HTML.
Avoid using the elements: <font>, <center>, and
<strike>, and the attributes: color and bgcolor.
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an
element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
For more information about global attributes: HTML
Global Attributes Reference.
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading.
Example
<h1>This is a heading</h1>
|
|||||||||||||||||