{"id":21,"date":"2012-05-04T23:58:30","date_gmt":"2012-05-04T23:58:30","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=21"},"modified":"2016-03-29T01:18:19","modified_gmt":"2016-03-29T01:18:19","slug":"basic-css-selectors","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/basic-css-selectors\/","title":{"rendered":"CSS Lesson 3: Basic CSS Selectors"},"content":{"rendered":"

CSS Selectors allow us to target specific HTML elements with our style sheets.\u00a0 While there are many different types of CSS Selectors, today’s lesson focuses on the four essential selectors; Type, ID, Class and Descendant selectors.<\/p>\n

First We Need a Page To Style<\/h2>\n

CSS isn’t very useful without a page to style.\u00a0 Create a blank text document, and copy and paste the following HTML:<\/p>\n

\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n<head>\r\n<meta charset="utf-8">\r\n<title>CSS Selectors<\/title>\r\n<link rel="stylesheet" href="style.css">\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1>CSS Selectors<\/h1>\r\n\r\n<div id="intro">\r\n<p>This is the <em>first<\/em> paragraph.<\/p>\r\n<p class="important">This is an <em>important<\/em> paragraph inside the Intro Div.<\/p>\r\n<\/div>\r\n\r\n<p>This is a regular paragraph.<\/p>\r\n<p class="important">This is an <em>important<\/em> paragraph that is not in the Intro Div.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Create a new folder named “CSS-Selectors” on your desktop or any other location you prefer.\u00a0 Then, save our document in this folder with a file name of index.htm<\/em>.<\/p>\n
The Page Without CSS<\/h2>\n
Open index.htm in a web browser, and you should see something very similar to this:<\/p>\n
\"CSS<\/p>\n
Let the CSS Begin<\/h2>\n
Now, create a new blank text document and save it in our “CSS-Selectors” folder with the file name of style.css<\/em>.\u00a0 We are now ready to start styling our page with the four essential Selector types.<\/p>\n
1 – Type Selector<\/h2>\n
Type Selectors<\/strong> are very simple.  They correspond with any HTML element type.  For example, add the following code to your blank CSS file; these are three simple Type Selectors:<\/p>\n
\r\nbody {\r\nfont-family: Arial, sans-serif;\r\nfont-size: small;\r\n}\r\n\r\nh1 {\r\ncolor: green;\r\n}\r\n\r\nem {\r\ncolor: red;\r\n}\r\n<\/pre>\n
This code selects and styles our <body> element, as well as all <h1> and <em> elements on our page.<\/p>\n
\"CSS<\/p>\n
2 – ID Selectors<\/h2>\n
If you take a look at the code of our HTML page, you’ll notice we have a <div> element with an ID of intro<\/em>.\u00a0\u00a0 We assign elements IDs when they are unique on a page; there is only one<\/strong> “intro” section on our page.\u00a0 This is important, because two elements cannot have the same ID.<\/p>\n
When an element has an \u201cID\u201d we can access it with a CSS selector by placing a pound sign (#) in front of it\u2019s ID value.\u00a0 Add the following code to your CSS file, directly below our <h1> rule:<\/p>\n
\r\n#intro {\r\nfont-size: 130%;\r\nborder: 1px solid black;\r\n}\r\n<\/pre>\n
\"CSS<\/p>\n
3 – Class Selectors<\/h2>\n
Class Selectors are very similar to ID Selectors.  The major difference is that while a certain ID should only be assigned to one element, we can assign the same class to as many elements as we want.<\/p>\n
If you look at the code of our HTML page, you’ll notice that two of our paragraph tags have a class of “important.”\u00a0 When an element has a class we can access it with a CSS selector by placing a period<\/strong> in front of it\u2019s class name. Let’s add the following rule to our CSS file to make these paragraphs stand out:<\/p>\n
\r\n.important {\r\nbackground-color: yellow;\r\n}\r\n<\/pre>\n
\"CSS<\/p>\n
4 – Descendant Selectors<\/h2>\n
Imagine we wanted the important paragraph in the “intro” Div to look different than the important paragraph at the bottom of the page.\u00a0 We can use a Descendant Selector to achieve this.<\/p>\n
Add the following CSS rule at the bottom of our CSS file:<\/p>\n
\r\n#intro .important {\r\nbackground-color: orange;\r\n}\r\n<\/pre>\n
Let’s dissect how the selector is working.\u00a0 It begins with “#intro” which selects our Intro Div.\u00a0 This is followed by a space, and then “.important.”\u00a0 So essentially our selector is telling the web browser to (1) find the element with the ID of intro<\/em>, (2) go inside that element and find any elements with the class of important<\/em>.<\/p>\n
\"CSS<\/p>\n
Notice that within the orange paragraph, the word “important” is red.\u00a0 Let’s imagine we want to change the color, since red text on an orange background is difficult to read.\u00a0 The word “important” is inside an <em> element, so we’ll use the following code to select and style it;<\/p>\n
\r\n#intro .important em {\r\ncolor: white;\r\n}\r\n<\/pre>\n
This code is telling the browser to (1) find the element with an ID of intro<\/em>, (2) go inside that element and find any elements with a class of important<\/em>, (3) go inside that element and select any <em><\/em> elements.<\/p>\n
\"CSS<\/p>\n
That’s it for today’s lesson.\u00a0 Let’s recap:<\/p>\n