CSS: Cascading Style Sheets for Web Design, Study notes of Software Engineering

Download CSS: Cascading Style Sheets for Web Design and more Study notes Software Engineering in PDF only on Docsity!

Distributed Software

Development

CSS Chris Brooks

Department of Computer ScienceUniversity of San Francisco

Department of Computer Science — University of San Francisco – p. 1/

CSS

-^ CSS stands for Cascading Style Sheets •^ Provides a way to specify how related document elementsshould be displayed. •^ Makes design and maintenance easier •^ Also gives us an opportunity to introduce some topics we’llrevisit in other forms:^ •^

Documents as trees • Specifying paths to nodes in trees • Separating out the meaning of a tag from how it isdisplayed.

Department of Computer Science — University of San Francisco – p. 2/

Invasion of the Web Designers • Early versions of Yahoo! look very different from today. •^ Single font, no table layout, background colors, menus,dynamic behavior, etc. • Later versions of HTML added presentational elements. •^ Ability to specify fonts within paragraph elements,control color more easily, use tables for layout, etc. • Problem: these new elements don’t convey structuralinformation about a document.

Department of Computer Science — University of San Francisco – p. 4/

Invasion of the Web Designers • Previously:

Here’s a heading of a section • Replacing this with

Here’s the heading

gives the

designer more control. • But: the markup information is lost. • Indexing is more difficult. • No information for devices that can’t render Times, ormultiple-sized fonts. • Also, difficult to maintain.

Department of Computer Science — University of San Francisco – p. 5/

CSS rules

-^ CSS is essentially a set of if-then rules that tell:^ •^

What parts of a document to match • How to format elements that match a rule.

-^ The cascade details how to deal with conflicts between rules.

Department of Computer Science — University of San Francisco – p. 7/

A Simple rule

-^ A simple rule to force all H1 elements to be large, red,sans-serif font would be:^ •^

h1 {font-size:

large; font-color:

red;

font-family:

sans-serif;}

-^ h1 is a selector •^ The portion inside brackets is a declaration block.^ •^

Consists of a set of key-value pairs.

-^ You can also specify a set of elements to be matched:^ •^

h2, h3 {color:

blue}^ Department of Computer Science — University of San Francisco – p. 8/

Matching on class

-^ You can also assign class attribute/value pairs to elementsand match on that. •^ Period separates element type from class. •^ ^ and

^ are useful for this.

-^ div.cb {font-size:

110%;}

-^ HTML:

30% labs

-^ span.quote {font-style:

italic}

-^ HTML:

Bart said:

Don’t have a cow, man!

-^ You can also specify a class without an element type:^ •^

.urgent { color:

red; }

-^ This will be applied to any element with the‘urgent’ class

Department of Computer Science — University of San Francisco – p. 10/

Multiple classes

-^ An element can have multiple classes:^ •^

content here

-^ We can write CSS rules that match either or both of these^ •^

div.stuff { font-size:

-^ div.things { font-size:

-^ div.stuff.things { font-size:

Department of Computer Science — University of San Francisco – p. 11/

Matching on Attribute

-^ You can also use the [ ] characters to match on attributes. •^ For example, let’s suppose you want to give all images thathave an “alt” attrribute a red border:^ •^

img[alt] {border:

3px solid red;}

-^ You can also test attribute values:^ •^

img[alt="foo"] {border:

3px solid red;}

-^ a[href="http://www.usfca.edu"][title="USF"]{color:

green }

Department of Computer Science — University of San Francisco – p. 13/

Matching on Pseudo-classes

-^ CSS also lets you match on pseudo-classes (more accuratelycalled state) •^ This includes things like whether the mouse is hovering overan element, or whether a link has been visited. •^ Colon is used as the element/pseudo-class separator^ •^

a {color:

#663366} a:visited {color: #333366} • p:hover {background-color:

#CCCCCC}

Department of Computer Science — University of San Francisco – p. 14/

Conflict resolution

-^ The

cascade

refers to the rules that are used to determine which rule should apply to an element. • For example:^ •^ h3 { color:

blue }

-^ h3.class1 {color:

green }

-^ How does the browser know which color to use for thefollowing elements? •^ hello •^ there

Department of Computer Science — University of San Francisco – p. 16/

Conflict resolution

-^ The most specific rule wins.^ •^

!important can be used to override this. • p.special {color:

#333 !important;

background-color:

white}

-^ Child elements inherit their parents’ properties •^ Except for box-model properties: borders, margins,padding,etc.

Department of Computer Science — University of San Francisco – p. 17/

Page layout

-^ One of CSS’s niftiest features is the ability to specify whereelements should be placed relative to each other. •^ The idea was to give designers something more flexible andappropriate than tables for arranging elements. •^ There are two choices for layout:^ •^

Floating • Positioning

Department of Computer Science — University of San Francisco – p. 19/

Floating

-^ Elements can be floated to the left or right. •^ div.labs {float:

right; }

-^ Other elements “wrap around” them. • The browser will avoid overlapping elements. • This is nice for things like inset images, or drop-in textboxes.

Department of Computer Science — University of San Francisco – p. 20/