Scribd
Upload
57 views5 pages

HTML Styles - CSS: Try It Yourself - Examples

CSS (Cascading Style Sheets) is used to style HTML elements. CSS can be added to HTML in three ways: inline using the style attribute, internally using the <style> element, or externally linking to a .css file. The document provides examples of how to style text colors, backgrounds, fonts, and alignment both with inline CSS and by linking an external style sheet.

Uploaded by

ManishKumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views5 pages

HTML Styles - CSS: Try It Yourself - Examples

CSS (Cascading Style Sheets) is used to style HTML elements. CSS can be added to HTML in three ways: inline using the style attribute, internally using the <style> element, or externally linking to a .css file. The document provides examples of how to style text colors, backgrounds, fonts, and alignment both with inline CSS and by linking an external style sheet.

Uploaded by

ManishKumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Styles - CSS

Previous
Next Chapter
CSS (Cascading Style Sheets) is used to style HTML elements.

Look! Styles and colors


M a n i p u l a t e
T e x t
C o l o r s ,
B o x e s
and more...

Try it yourself

Try it Yourself - Examples


Using styles in HTML
How to add style information inside the <head> section.
Link that is not underlined
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.

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>
<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>
Try it yourself
The background-color property makes the "old" bgcolor attribute obsolete.

Try it yourself: Background color the old way

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>
Try it yourself
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>
Try it yourself

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>
<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>

HTML Style Tags


Tag
<style>
<link>

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.

You might also like