Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

CSS Style Sheets

Page 4 of 5


Setting styles by ID

Another useful way to set the style of an element in the
<style>
section is by linking it to its unique ID. Look at the example bellow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex,nofollow" /> 
<meta name="googlebot" content="noindex,nofollow" />
<title>CSS Example</title>
<style>
p {
  font-family: verdana, helvetica;
  font-size: 14px;
}
#headerT {
  text-align: center;
  font-size: 25px;
  color: #C88706;
  font-family: arial, helvetica;
}
#footerT {
  text-align: center;
  font-size: 17px;
  color: #976A39;
  font-family: arial, helvetica;
}
</style>

</head>
<body>
  <h1 id="headerT">This is my page header</h1>
  <p>This is the contents of my page</p>
  <h1 id="footerT">This is my page footer<h1>
</body>
</html>
Render:
The example page has two
<h1>
titles and one
<p>
paragraph. Each
<h1>
element has a unique id attribute (see the code above). We previously assigned different formatting for each one of those IDs in the
<style>
section using the number sign (#) before the ID name.

The element IDs are very useful when you need more control over specific unique elements of a web page, e.g. header, footer, navigation menu, body wrapper, etc.


Remember, you can use any given class as many times as you like inside a web page but, since element IDs must be unique, you can only use each ID once in each page.


We just covered the basic syntax you will need to write the
<style>
section at the beginning of a HTML document. In the next page we will explain how to write the entire
<style>
section in a separate file so you can use it across several pages.

More pages of this tutorial → CSS Style Sheets  <12345>

Comments & Questions