Element, Class and ID selectors

Element Styles

We can change the style of any HTML element. For example, we could declare the <h1> style as shown below:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

h1
{
   color:red;     /* new style */
   font-size:5em;     /* modify existing style */
}

</style>
</head>

The <h1> element style declared above will automatically be applied to all <h1> elements. Element styles can add or modify existing element sytles, as per the example above.

Element styles are useful if we want all instances of a particular HTML element to act the same. In the above example, we want to change all instances of <h1> in a document.

Class Styles

In addition to associating styles to particular HTML element, we can create additional style classes. They are declared in exactly the same way as above. For example, we could declare a style as shown below:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.highlight
{
   font-weight:bold;
   font-style:italic;
}

</style>
</head>

Note:The '.' must appear before the class name in the class definition (e.g. '.highlight). To attach this style to a particular instance of (for example) a <h1> tag, use the code below:

<h1 class = 'highlight'>

To attach the same style to a particular instance of a <p> tag, use the code below:

<p class = 'highlight'>

Style classes are useful if we want two or more HTML elements to act the same. In the above example, we want to force highlighted text at particular instances of <h1> and <p> in a document.

ID Styles

The # selector is used to specify a style for a single HTML element.

For example, we could declare a header style as shown below:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

#mainParagraph
{
   font-weight:bold;
   font-style:italic;
}

</style>
</head>

Note:The '#' must appear before the ID name in the ID definition (e.g. '#mainParagraph'). This style will automatically be attached to the single HTML element with the id 'mainParagraph'. use the code below:

<p id = 'mainParagraph'>

As no other HTML element should have the same id, the ID style will only operate on the single HTML element

Style IDs are useful if we want one instances of a particular tag to act in a unique way. In the above example, we only want to force highlighted text at a particular <p> in a document.

Multiple Styling

A single style can be applied to one or more elements, classes or IDs.

For example, we could declare a style as shown below:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

p,
.highlight,
#someUniqueElement
{
   color:red;
   font-style:italic;
}

</style>
</head>

This would apply the same style to all paragraphs, to all elements of class 'highlight' and to the unique element called 'someUniqueElement'.