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,206

Rating:

(88)

Certification Type:

Completion Certificate

Lecture: Introduction to CSS

In the last section of this course, we developed a basic web page using tables and in-line style attributes. You might recall we styled table borders, fonts, headings, and background colors. You may have noticed this process was quite inefficient. We repetitively had to keep placing the same style attributes over and over again for any document element that we wanted to apply a style to. For example, if we wanted to change the font color and type face of text in three separate areas, we would need to change the font face and color attribute in each instance. This made the process inefficient and the code quite lengthy.

Secondly, when we put the web page together, we put the contents in tables using rows and columns. This helped make the page look organized, but there really wasn’t too much flexibility in the positioning of our content. We were more or less limited to left, center or right alignment attributes. More so, we were unable to stack multiple objects on top of one another. For example, if we inserted an image into a table cell, we could not place any other object underneath or on top of that image - a concept known as layering.

In this section of the course we are going to explore the world of CSS (Cascading Style Sheets). CSS helps eliminate all these issues, and makes the development process much more flexible, efficient and browser friendly. Once you start developing sites using CSS, you will likely never use table based website layouts again. This doesn’t mean you will never use tables. Tables are still an excellent way to layout tabular data, but you will not use them for laying out and styling your website elements and content.

So what exactly is CSS? Think of a cascading style sheet as a list of style rules that you can refer to at any time to format your text, images, tables, and just about any object on your web page. These style rules are entirely user defined, meaning you make them based on your needs. They are highly customizable and easy to use. Furthermore, you can link each page on your website to a single style sheet and update hundreds or even thousands of pages simultaneously.

At this time you might be wondering what a Cascading Style Sheet looks like. Well we touched on it in the beginning of the last section. If you recall, we introduced the <style></style> tags and created a single rule to define the webpage text color. The block of code is shown below. Remember it was situated in the <head></head> tag.

<style type="text/css">
Body {
color:red;
}
</style>

Don't worry if you've forgotten.. We will be working extensively with style sheets during this section.