Cascading Style Sheets - Web Programming - Lecture Slides, Slides of Computer Programming

Download Cascading Style Sheets - Web Programming - Lecture Slides and more Slides Computer Programming in PDF only on Docsity!

Cascading Style Sheets

Lecture Overview

 Overview of Cascading Style Sheets (CSS)  Ways to declare a CSS  CSS formatting capabilities  New features in CSS

CSS Versions

 CSS 2 is the current version supported by most browsers  CSS 3 is in the “draft” state. The standard is broken down into several modules  I’ll talk about CSS 3 and where we are

Style Rules (1)

 Style rules format “things”  The things we format are defined by the selector  Element names  Classes  IDs

Style Rules (3)

 Property / value pairs are enclosed in a selection block  A selector precedes the declaration block

Types of Selectors

 There are different types of selectors  Each has a different level of “specificity”  A class within an element  An id within an element  An element within an element

Element in Class

 Classes allow you to restrict the selector by setting the class attribute of some other element  Class named begins with a period  Followed by the developer-chosen class name  Followed by the typical { property:value ; property:value }

Declaring a Class (Example)

 Declare a class named MyClass (name begins with a dot (.))

.MyClass {color:aqua}

Declare a class that will be applied only to

tags

p.MyClass {color:aqua}

## ID Selectors

 They are similar to inline styles but allow a style to be referenced through an element’s id attribute  One-to-one correspondence between the selector and style

 Use these to format blocks with **** and

ID Selectors (2)

 The declaration is similar to a class  Use # instead of. in the CSS file  Example

#TestID { }

Using CSS – The Basics

 Using CSS is (usually) a two-part process  Declare a style  Use the style to format an element, such as a paragraph  One style can be used to format many elements

Three ways to Declare a Style

 Inline  The style is declared as part of the element declaration in the element’s body  We really don’t use these much  Embedded  Declared in the header of the Web page ( **** ) element  External  The style is declared in a CSS page and used by the referencing HTML page

Inline Style Declaration

(Example)

 The style attribute contains the style declaration

Some text

Embedded Style Sheets

 Embedded (internal) style sheets appear inside of a **