Tutorial

How To Create IDs with CSS

Published on October 13, 2020

Senior Manager, DevEd

How To Create IDs with CSS

Introduction

In this tutorial, you will create CSS ID selectors and learn how and why to use them when building a website with CSS and HTML.

CSS ID selectors function similarly to CSS class selectors. They allow you to create CSS rules that you can apply to HTML elements that have a unique ID attribute. Like classes, ID names are chosen by the developer when they create a CSS rule using the ID selector. However, IDs are different from classes in that you can only use an individual ID once in an HTML document. Thus, you would only define IDs for items that appear on a page once like a top logo, a site title, or a navigation bar. In general, CSS IDs are used sparingly.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Creating a CSS ID Selector

When creating a rule for an ID, a # is prepended to the ID’s name:

#my-first-id {
  color: blue;
}

This CSS rule creates an ID named “my-first-id" and declares that any HTML text element assigned this ID will be blue.

Let’s now explore how IDs work in practice. First, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Erase everything in your styles.css file (if you have been following along with this series) and add the CSS rule above for “#my-first-id” to your styles.css file and save the file.

Next, return to your index.html file and erase everything (except for the first line of code: <link rel="stylesheet" href="css/styles.css">). Then add the following code snippet:

index.html
<p id="my-first-id">This text is styled using a CSS ID.</p> 

Save the file and reload it in the browser. (For instructions on loading an HTML file, please visit our tutorial section How To View An Offline HTML File In Your Browser).

You should receive something like this:

Webpage with text styled with a CSS ID

In this exercise, you have created the CSS ID “my-first-id” in your styles.css file and then applied it to text content in your index.html file using the highlighted ID attribute. Note that you can create and apply IDs for any type of HTML content, such as images and <div> elements.

Conclusion

You explored how to create and use IDs for styling elements that only appear once on your webpage. In the next tutorial, you’ll learn about CSS pseudo-classes, a special type of class activated by certain states that can be triggered by user behavior.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more