Basic Selectors

Grab the right one

The Selector

The selector allows you to specify what you want to style in your HTML. This acts like a finger pointing to the element(s) that you want to effect with CSS. There are many different types of selectors, and for this reason beginners often become overwhelmed with the options. Here we will describe the most commonly used selectors.

Type Selectors

Type Selectors (tag names)

Type selectors are probably the most commonly used selector. These are basically the tags we created in our HTML. The names/keywords between the angled brackets (ex. <p>, <nav>, <section>, etc) are used to select these HTML elements with CSS. In CSS we just use the keyword between the angled bracket as our selector.

HTML Tag		CSS Selector
<h1>	=	h1
<p>	=	p
<section>	=	section

HTML Code		CSS Code
<section> Some Content </section>		section{ background: blue;}
	or
<nav> Some Content </nav>		nav{ background: blue;}

ID Selectors

ID Selectors (#)

ID selectors are used when you want to be really precise about how one specific element, and possibly its children, should be styled. Be careful though, it is very easy to fall into the temptation of using an ID selector for everything on the page. This is because it is easy to tell what you are grabbing and styling, but adding an ID to every element so that you can select everything individually should be avoided. This will end up being more work for you in the long run.

The # symbol is the key character when writing an ID selector in CSS. This tells the browser that you are looking for an ID with a specific ID. For instance #main would tell the browser that it is looking for an ID with the name of "main".

HTML Code		CSS Code
<section id="main"> Some Content </section>		#main{ background: blue;}
	or
<nav id="top"> Some Content </nav>		#top{ background: blue;}

Class Selectors

Class Selectors (.)

Class selectors are used when you have a group of tags that should have the same style applied to them. This is similar to how the type selector works because it styles tags as groups. The class selector allows you to create your own custom group, that don't have to be the same tag, and style them all the same.

The . symbol is the key character when writing an Class selector in CSS. This tells the browser that you are looking for a tag with a specific class. For instance .highlight would tell the browser that it is looking for a tag with a class name of “highlight”. Unlike an ID, the same class can be applied to multiple tags, which would allow you to grab and style them all the same.

HTML Code		CSS Code
<nav class="highlight"> Some Content </nav>		.hightlight{ background: blue;}

<section class="highlight"> Some Content </section>

Activity

Here you can test out what you read, and achieve badges.

Activity Instructions

Click here to toggle instructions on/off

Inside the below window is an example of a basic HTML document. Play around with this interface.

Notice the window labeled "HTML" and "CSS" below. You can see some basic HTML code has already been placed in the "HTML" window. Any of this text in these two windows can be changed.
Look at the large window to the right (or sometimes below) the windows labeled "HTML" and "CSS." This window is the preview window. It will display the HTML/CSS information that was inserted into the HTML/CSS windows. As soon as changes are made to these two windows it will be reflected in the larger window.

Play with the code (Notice that some of the CSS is already written for you):

Using a type selector, give the header and footer nav a background color of lightgreen.
Using an ID selector, change the font-size of the <a> tag surrounding the home link to 2em. This will require you to add an ID to the correct <a> tag, and you will need to reference the name of the ID in the CSS.
Using a class selector, give the text "Main Content" and "sample" a background color of yellow. This will require you to add a class to the correct tags, and you will need to reference the name of the class in the CSS.