This download contains the “Start” and “Finished” folders. Both folders contain an HTML file (index.htm), an image (logo.jpg) and a CSS file (styles.css). You will use the CSS file in your start folder for all exercises. Compare with the finished folder to see how you go.
[00:00:00:110] Good day, my name is Russ Weakley from Max Design. Welcome to CSS Selectors Getting Started. This course is for those that are new to CSS. The aim is to provide you with the solid understanding of the core CSS selectors. These are the selectors that you are most likely to need when you’re starting out.
[00:00:21:500] Now selectors are one of the most important aspects of CSS. If you understand them and how they work, building web pages becomes much easier. In Lesson 1, this lesson, we are going to look at Rule sets, Multiple selectors and Multiple declarations. In Lesson 2, we focus on Simple selectors, Type selector, Class selector, ID selector and Universal selector.
[00:00:46:370] In Lesson 3, its about Combinators, Descendent selector, Child selector, Adjacent sibling selector, General sibling selector. In Lesson 4, we move on to Link pseudo-classes and these are of the five versions link, visited, focus, hover and active. And then in lesson 5, Pseudo-elements, the first line selector and the first letter selector.
[00:01:12:170] As we go through each selector, I’m going to explain the correct syntax, which is how they should be written, how they can be used and the relevant browser support. And once we’re done there, in each case we’re going to do a hands-on exercise. And that’s to show you how these selectors work in action.
[00:01:31:440] Today this course, you really only need two things. Some sort of text editor and a web browser and the text editor can be anything you’re familiar with. And in terms of web browser, as long as it’s a reasonable modern browser, we should be okay. For this course, we’re going to define modern browsers as any browser including or above Internet Explorer 9, Chrome 12, Firefox 5, Safari 5.1 and Opera 11.5.
[00:02:01:630] This course comes with two folders. The first is the start folder and the second one is the finished folder. The start folder’s the one I’m going to be using throughout the course, and the finished folder’s there just so you can check your code examples as we go through the course.
[00:02:17:580] Inside the start folder we have in index file, a logo, and our CSS file which is called styles.css. We’ll have a look at our index file and see we’re using an HTML 5 DOCTYPE. The tile is called about InTrayDelux, which is a fake company we’re building a simple layout for and you can see we’re linking off to styles.css.
[00:02:45:950] Inside our CSS file we have one rule already defined. And we’re going to gradually add a whole range of rules focusing on different selectors down below. And then, let’s have a quick look at our, what our index page looks like in a browser so far. And at the moment, it’s pretty well unstyled, but over the next series of lessons, we’re gradually start up so looks like a simple layer focusing on different selectors.