CSS = Styles and Colors
Manipulate Text
Colors, Boxes
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
Try it Yourself »
Styling HTML with CSS
CSS styling can be added to HTML elements the following 3 ways:
- Inline - using the style attribute in HTML elements
- Internal - using the <style> element in the <head> section
- External - using external CSS files
The common way to add styling, is to put CSS syntax in separate CSS files.
In this tutorial the examples are simplified to make it easier for you to try it yourself.
 | You will learn much more about CSS in our CSS Tutorial |
|---|
Inline Styles
Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This line styling changes the text color and the left margin of single paragraph:
CSS Background Color
The CSS style background-color defines the background color for an HTML element:
CSS Font Family
The CSS style font-family defines the font to be used for in HTML element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>
Try it Yourself »
| Obsolete style attributes, like bgcolor, and tags like <font>, do not validate in HTML5. |
|---|
CSS Font Size
The CSS style font-size defines the text size to be used for in HTML element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
</html>
Try it Yourself »
CSS Font Color
The CSS style color defines the text color to be used for in HTML element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
Try it Yourself »
CSS Text Alignment
The CSS style text-align specifies the horizontal text alignment for 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>
Try it Yourself »
The text-align property makes the old <center> tag obsolete.
Internal CSS
An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styles are defined in the <head> section of an HTML page, in the <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
Try it Yourself »
External CSS
External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire site by changing one file.
External styles are defined in the <head> section of an HTML page, in the <link> element:
Example
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I am formatted with an external style sheet</h1>
<p>Me too!</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I am formatted with an external style sheet</h1>
<p>Me too!</p>
</body>
</html>
Try it Yourself »