Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements

Lecture Notes

Course: CSS Fundamentals View Course Outline

Created by:





1h 47m 20s

Skill Level:




Students Enrolled:




Certification Type:

Completion Certificate

Lecture: Parts of a CSS Rule

The syntax for CSS is different than that of HTML markup and consists of three parts:

Selector { property: value }

The selector is the html element that you want to apply the style rule to. Let's take a look at an example. Open the file in your downloads folder, corresponding to this lecture.

Let's create a style sheet contained within our <head></head> tag:

<style type="text/css"> </style>

Now create a style rule that changes the background color of our web page to pink.

For this, we would need to create the following style rule inside of our <style></style> tags:

Body { background: pink; }

The body is the selector and the property is background, since we are changing the entire web pages background color to pink.

Once you have inserted the style rule, save your document and preview it in your web browser. You will notice the pages background is now pink.
Each selector can have multiple properties. For example, if you wanted to change both the color of the background and the default font for the web page to Arial, the CSS rule would look like this:

Body {
background: black;
font-family: Arial;

Save your file and refresh your page. You will notice your default font has now changed.

Note that this method will change all the text within the HTML file to Arial. If you only wanted to apply another rule to certain selectors, you can do so as follows:

h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}

This will set all content within <h1> tags to Georgia and all <p> tags to Tahoma.
Selectors can also be combined as follows:

h1, h2, h3, h4, h5, h6 {
  color: Blue;
  font-family: Georgia, sans-serif;

Now all header elements will be the color blue, with the Georgia font face.