Code highlights logo



ID selector

IDs are used to uniquely identify and style elements in HTML. They provide a more specific way of selecting elements compared to class selectors. An ID selector is represented by the hash symbol (#) followed by the ID name.


1#elementID {
2 property: value;


1<div id="header">
2 <h1>Welcome to my website</h1>
1#header {
2 background-color: #333;
3 color: #fff;
4 padding: 10px;

In the above example, we selected the div element with an ID of header and applied a background color of #333, white text color, and a padding of 10px.

IDs are unique, so they should only be used once per HTML document. Using the same ID multiple times can lead to invalid HTML, and the styles applied may not behave as expected.

IDs selectors have higher specificity compared to type and class selectors. But be careful with the overuse of IDs in your CSS, as it can lead to specificity issues and make it difficult to style elements in the future.



On line 11 of index.html, inside the h1 opening tag and after the class attribute, add an id with the value main-title.


Navigate to style.css. Add a ruleset using the ID selector to target the main-title ID. Inside of its curly braces, write the declaration:

1font-family: cursive;

You'll see the title change to a cursive font bringing some beauty and elegance to the page! Okay, maybe not so much. But the font does change.

Sign up to start coding

Already have an account?

Sign In

Course content