In lesson 1, you’ve learned some basic HTML. In lesson 2 we’ve added some basic CSS. Now let’s talk about classes and ids.

Where we left off

HTML has a lot of different tags to choose from, but some tags you’ll use very often. The p-tag is one of them. You’ll use them for every paragraph. Sometimes you want to give the p-tag a different look and feel. A p-tag in the footer can look different than your blog text. So how can we do that? You can do this with the basic tags and CSS like we’ve learned in the earlier lessons.

Taking it a step further

Most websites are a lot more complex than the example above. When you want to style specific elements or position the elements correctly, then we need to address them very specifically in our CSS. This is where ids and classes come in. Ids can only be used once on a page. Classes can be used multiple times. Sometimes it’s helpful to style multiple items at the same time, sometimes you just want to style one.

In the HTML tab, you can see I’ve added an ul-tag. This is an unordered list and displays items as a bullet list. Items in the list are specified in a li-tag. The li-tag items in the HTML tab, have the class ‘item’ and a specific id. In the CSS tab, you can see the class written like .item and the id written as #item1. Classes have a dot in front and ids have a hashtag in front.

Next time

Next time we create something really fancy. Let’s create a basic website homepage!

About The Author

Noraly van der Hulst is a passionate front-end developer. She owns a company called Frontrend and is a new mom. Her free time she likes to spend with her camera and ofcourse her family and friends as well.

Related Posts

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.