Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 828 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Basic CSS Selectors

2:23 CSS lesson by

The first step to styling a website or application is correctly defining CSS selectors. Garth breaks down the anatomy of a basic CSS ruleset to lay the foundation for more complex selectors.


egghead.io comment guidelines

Avatar
egghead.io

The first step to styling a website or application is correctly defining CSS selectors. Garth breaks down the anatomy of a basic CSS ruleset to lay the foundation for more complex selectors.

CSS stands for Cascading Style Sheets. Cascading refers to the CSS hierarchy, or being able to override previously declared styles. We'll get more into that when we get into the specificity video. Style sheets are just a place to define how a website should look. We separate content from styling, so we can always have a consistent experience across an application or website regardless of the content on the page. This separation is done using CSS and HTML.

So if our styling is separate from our content, we need to be able to define styles and have them targeted at specific parts of the content. We do this using selectors. This is a CSS rule set, it is made up of a selector and a series of rules or style definitions in braces. All of these selectors correspond to something in the markup to define what element get which rules applied to them.

This is an element selector. There's no special syntax, just use any styleable DOM element name, and it will style all of those elements. In this example, this selector would apply to all list items regardless of where they are in the page. The selector is great for styling existing semantic elements. This is a class selector, it is specified using a period in front of the class name. In this example, this selector applies to any element that has a class attribute which is set to important.

Classes can be used on as many elements on a page as needed. They're also not tied to a specific element type. If we needed to change a button to a link, it wouldn't effect this styling. When we get into best practices we'll talk more about this, but we'll be using classes a lot.

This is an ID selector. It is specified using a pound or hashtag symbol #. It corresponds to the ID property in the DOM. ID is very similar to class, the main difference is an ID should only be used once per page. When we talk about best practices, we'll get into this more, but it is recommended to avoid using IDs with CSS selectors.

A lesser used selector is the attribute selector. Using the brackets we can target elements with specific attributes and values. If you just use the attribute name, it applies regardless of the value. But as in this example, we can target specific values as well. They can be more complex using syntax that is similar to regular expressions, to target specific value patterns. But this can make your selectors hard to read and edit, so it's not recommended. Also, many of the most valuable attributes have already been made into pseudo classes.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?