CSS Selector

CSS selectors are used to “find” (or select) the HTML elements you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Note: An id name cannot start with a number!

The CSS rule below will be applied to the HTML element with id=”startPara” and id=”endPara”:

See the Pen CSS-SelectBy(id) by Ankit (@AnkitPathshalaCoding) on CodePen.

CSS Class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Note: A class name cannot start with a number!

Example on class Selector
In this example all HTML elements with class=”center”,”left” and “right” will be shown. try Yourself live below.

Alignment CSS properties

The text-align property lets you position your text to the left, right or centre of your page. Remember to use the American spelling “center” and include the hyphen (-).

Exercise 4.1

School House Challenge (1):

Every school has houses which students are divided into. From Hogwarts to your school a house becomes a part of your identity.
The challenge is to add 4 rules that color the headings according to your house colors.


Exercise 4.2

Challenge (2):

Select by class the ways to prevent the spread of coronavirus. Colour each important point a different colour so that it is highlighted in your website.




color: red