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 IDs
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
×
More

Lecture Notes

Course: CSS Fundamentals View Course Outline


Created by:

YouAccel

Lectures:

32

Duration:

1h 47m 20s

Skill Level:

Beginner

Language:

English

Students Enrolled:

8,215

Rating:

(88)

Certification Type:

Completion Certificate

Lecture: CSS IDs

Now that we have created our first <div> we can explore CSS declarations that allow us to customize the look and positioning of our <div>.

The first item of discussion is CSS IDs. CSS IDs are similar to classes. They are defined in your style sheet and referenced in your html elements. The primary difference is that once an ID has been referenced in an HTML element it cannot be used again within the same HTML file. You might recall that when we created classes, we could use that class as many times as we needed for multiple HTML elements. This is not the case with IDs.

IDs are generally used for layout elements that will only be needed once. IDs are commonly used for defining CSS rules for Divs. Divs are considered layout elements, because they contain content such as graphics, text, and media that make up our web page. Each <div> normally requires it's own unique set of attributes. One example is the position attribute. In most cases, when designing CSS layouts you wouldn't have two divs in the exact same location on the web page. For this reason we would need two IDs that define unique position attributes for each <div>.

Let's create a style rule for our <div> before applying it to the <div> we created earlier.

In order to create a style rule for our <div> and apply an ID, we need to declare it in a style sheet. Create <style></style> tags and define the ID.

<style type="text/css">
#div1{
width: 80%;
border: 3px solid black;
background: yellow;
color: blue;
}
.underline {
text-decoration: underline;
}
</style>

This particular ID contains four style definitions. The <div> will be 80% of the width of our content area. It will have a three pixel thick - black border. The background of the <div> will be yellow, and the any text contained in the <div> will be blue.

Note that the style rule for our ID reference begins with a # sign, unlike our classes which begin with a period.

Now we can reference this rule in our <div> tag:

<div id="div1">This is a div, with some text content</div>

Save the file and preview it in your web browser to see what the final result looks like.

We can see the black border, yellow background, and blue text.

In addition to referencing an ID in our <div> tag, we can also create a class and apply it to the <div> as well. Let's say we wanted all the text in our <div> to be underlined.

First we need to create the class:

.underline {
text-decoration: underline;
}

Now we can apply the class by referencing it in our <div> tag.

<div id="div1" class="underline">This is a div, with some text content</div>

Save your file, and preview it, to see the final result.