look exactly how you want. This works because CSS is connected to the DOM (Document
Object Model),
With CSS and its integration with the DOM, you can quickly and easily restyle any
element. For example, if you don’t like the default look of the <h1>, <h2>, and other
heading tags, you can assign new styles to override the default settings for the font family
and size used, or whether bold or italics should be set, and many more properties too.
One way you can add styling to a web page is by inserting the required statements into
the head of a web page between the <head> and </head> tags. So, to change the style of
the <h1> tag, you might use the following code .
<style>
h1 { color:red; font-size:3em; font-family:Arial; }
</style>
uses the standard HTML5 DOCTYPE declaration.
A simple HTML page
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
h1 { color:red; font-size:3em; font-family:Arial; }
</style>
</head>
<body>
<h1>Hello there</h1>
</body>
</html>
Importing a Style Sheet
When you wish to style a whole site, rather than a single page, a better way to manage
style sheets is to move them completely out of your web pages to separate files, and then
import the ones you need. This lets you apply different style sheets for different layouts
(such as web and print), without changing the HTML.
There are a couple of different ways you can achieve this, the first of which is by using
the CSS @import directive like this:
<style>
@import url('styles.css');
</style>
This statement tells the browser to fetch a style sheet with the name styles.css. The
@import command is quite flexible in that you can create style sheets that themselves
pull in other style sheets, and so on. You need to just make sure that there are no <style>
or </style> tags in any of your external style sheets, or they will not work.
Importing CSS from Within HTML
You can also include a style sheet with the HTML <link> tag like this:
<link rel='stylesheet' type='text/css' href='styles.css'>
This has the exact same effect as the @import directive, except that <link> is an HTMLonly
tag and is not a valid style directive, so it cannot be used from within one style
sheet to pull in another, and also cannot be placed within a pair of <style> ... </style> tags.
Embedded Style Settings
There’s also nothing stopping you from individually setting or overriding certain styles
for the current page on a case-by-case basis by inserting style declarations directly within
HTML, like this (which results in italic, blue text within the tags):
<div style='font-style:italic; color:blue;'>Hello there</div>
But this should be reserved only for the most exceptional circumstances, as it breaks
the separation of content and presentation.
Using IDs
A better solution for setting the style of an element is to assign an ID to it in the HTML,
like this:
<div id='welcome'>Hello there</div>
This states that the contents of the <div> with the ID welcome should have applied to
them the style defined in the welcome style setting. The matching CSS statement for this
might look like the following
#welcome { font-style:italic; color:blue; }
Note: the use of the # symbol, which specifies that only the ID with
the name welcome should be styled with this statement.
Using Classes
If you would like to apply the same style to many elements, you do not have to give each
one a different ID because you can specify a class to manage them all, like this:
<div class='welcome'>Hello</div>
This states that the contents of this element (and any others that use the class) should
have applied to them the style defined in the welcome class. Once a class is applied you
can use the following rule, either in the page header or within an external style sheet for
setting the styles for the class:
.welcome { font-style:italic; color:blue; }
Instead of the # symbol, which is reserved for IDs, class statements are prefaced with
a . (period).
