Implementation: CSSUsing element IDs with CSS

Cascading Style Sheets (CSS) are used to apply styles to a webpage (internal) or website (external). Understanding the properties of text and backgrounds provides fundamental knowledge of CSS and how to apply styles using selectors, classes and IDs.

Part ofComputing ScienceWeb design and development

Using element IDs with CSS

Element IDs

When writing HTML it is possible to give an element its own unique identifier. If a webpage had three different paragraphs, the code within the body could look like this:

<body>
<p>All text for paragraph 1 would go here</p>
<p>All text for paragraph 2 would go here</p>
<p>All text for paragraph 3 would go here</p>
</body>

These are three different paragraphs, each containing some random text. It is possible to give a paragraph a unique ID.

Here is the updated version of the HTML code.

<body>
<p id="introduction">All text for paragraph 1 would go here</p>
<p>All text for paragraph 2 would go here</p>
<p>All text for paragraph 3 would go here</p>
</body>

The first paragraph now has an id assigned, the id is "introduction". It would be possible to create a CSS rule that will apply to any HTML element called "introduction". For example:

#introduction {
color: black;
font-size: 16px;
font-family: verdana;
}

The # symbol is used in CSS to let the browser know that the selector will apply a style to any element with the id "introduction".

Next page
Using classes with CSS
Previous page
Inline style

More guides on this topic

Related links