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: Types of CSS Rules

There are three main types of CSS Rules. Each is characterized by its placement within your document. Let's go over each one.

  1. Internal Styles: These are style rules that are defined in the <head> section of your document. So far all the style rules we created were internal.

  2. Inline Styles: Inline styles are defined within the HTML markup of a particular page element. We haven't taken a look at inline styles so let's go over a quick example.
    • Type a sentence into the current document.
      <p>This text will be formatted using inline CSS rules</p>

    • Now change the color of this paragraphs' text.
      <p style="color:blue;"> This text will be formatted using inline css rules.</p>

      We have placed our CSS declaration directly in the same line as the html element <p> that we wanted to format.

      You might recall that when we developed our first table based web page layout, we kept specifying the font face in a similar fashion. Remember that this was an inefficient method, and the same can be said for inline CSS rules. It is always a better practice to use internal styles, or the best option: External styles.

  3. External Styles: This is when the style rules are defined in an external style sheet and linked to the web page. Let's go ahead and convert our existing inline style sheet to an external style sheet. The process is simple, we just need to take the style rules in our <head> section and save it in a .CSS file.

    Once you have pasted in the CSS rules, save the file as styles.css. Make sure it is in the same folder as your web page.

    Now go back to the original document, and create a link to the style sheet.

    Insert the following line in the <head></head> section.

    <link href="styles.css" rel="stylesheet" type="text/css">

    The link element, requires a few attributes. href is the location of the style sheet. rel is short for relation, and indicates the linked file is a style sheet.