CSS Course

Master the basics of CSS and build the foundation of web aesthetics.

Down Arrow

Slide 1: Intro to CSS

    Welcome

Slide 2: Covered in this lesson

  • Overview
  • What is CSS?
  • Why to use CSS?
  • CSS for Skinning your Website
  • Structure
  • CSS Syntax Introduction
  • Three places CSS can be defined
  • CSS Syntax Specifics
  • Cascading Inheritance
  • Applied
  • CSS Hands-on

Slide 3: What is CSS?

  • Cascading Style Sheet
  • Stylesheet Language
  • Standards-based set of properties and attributes to define styles
  • To describe the presentation of a document written in a markup language like HTML or XML
  • Markup encoding: <p>My paragraph here.</p>
  • Defines the style of how things in <p> tags appear (font, color, size, margins, etc.)
  • Cascading rules to determine how to apply markup that contains other markup

Slide 4: Why CSS?

  • Separate Content from Form
  • Content is the text and images marked up to define regions of specific types
  • Form defines the "style" for the content
  • Old way of using inline styles:
  • <font size="14px">My First Header</font>
  • <font size="12px" color="red" face="Verdana">My information 1 goes here.</font>

Slide 5: Why CSS? Continued

  • Separate Content from Form
  • New way using CSS classes:
  • <p class="header">My First Header</p>
  • <p class="info">My Information 1 goes here</p>
  • Example CSS:
  • .header { font-size:14px; }
  • .info { font-family: verdana; font-color: blue; font-size: 12px; }

Slide 6: What does this separation get us?

  • Specify the style once for every instance of that class
  • Example: Specify the font once for all text on the HTML page that you've identified as a "header"
  • The stylesheet can be a separate file which all HTML pages on your entire site can link to
  • Only have to specify the style once for your entire site
  • Can change the style for your entire site by editing only one file

Slide 7: CSS Skinning

  • "Skinning" - changing the look of a page or your site
  • Selecting an appearance by choosing which stylesheet to use
  • Example:
  • <link rel="stylesheet" type="text/css" href="skin1.css" />
  • .info { background-color: White; font-family: Verdana; font-color: Blue; }

Slide 8: CSS Skinning 2

  • "Skinning" - changing the look of a page or your site
  • Selecting an appearance by choosing which stylesheet to use
  • Example:
  • <link rel="stylesheet" type="text/css" href="skin2.css" />
  • .info { background-color: Blue; font-family: Serif; font-color: White; }

Slide 9: CSS Syntax

  • 3 Elements to a CSS Statement:
  • Selector - What HTML sections does it affect?
  • Property - What attribute of that HTML section will be affected?
  • Value - What change will be made to that attribute?

Slide 10: Three CSS Definition Locations

  • Inline: The "style" attribute
  • Example: <p style="font-color:red;font-size:10px;">Content</p>
  • Internal: The <style> markup tag
  • Example: <p>Content</p>
  • External: The .css stylesheet file
  • Example: <link rel="stylesheet" type="text/css" href="mystylesheet.css" />

Slide 11: CSS Syntax: Selectors

  • There are many kinds of selectors and many ways to reference them:
  • HTML Type Tag - selected with the tag type
  • Class Attribute - precede the class with a period
  • Example:
  • p { font-size: 10px; font-color: White; }
  • .myinfo { font-size: 10px; font-color: White; }
  • <p class="myinfo">Content</p>

Slide 12: Cascading Inheritance

  • Nested elements inherit the properties from their parent
  • If you specify a style for the <body> tag, it will affect all content in your HTML page
  • If you want to override inherited settings, you need to specify a style in a more local element
  • Example:
  • body { font-family: Verdana; font-size: 1.1em; }
  • .littletext { font-size: 8px; }

CONGRATULATIONS