CSS (Cascading Style Sheets) is used to style HTML elements.
|
Look! Styles and colors
This text is in Verdana and red
This text is in Times
and blue
This text is 30 pixels high
|
Try it Yourself - Examples
Using
styles in HTML
How to add style information into the <head> section.
How to add style information into the <head> section.
Link that
is not underlined
How to make a link that is not underlined, with the style attribute.
How to make a link that is not underlined, with the style attribute.
Link to
an external style sheet
How to use the <link> tag to link to an external style sheet.
How to use the <link> tag to link to an external style sheet.
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.
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>
HTML Style Example -
Background Color
The background-color property defines the background color for an
element:
Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</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>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</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>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The text-align property makes the old <center> tag obsolete.
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>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</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>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML Style Tags
|
Tag
|
Description
|
|
Defines style information for a document
|
|
|
Defines the relationship between a document and an external
resource
|
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.
No comments:
Post a Comment