Cascading Style Sheets
(CSS)
Mendel Rosenblum
CS142 Lecture Notes - CSS 1
,Driving problem behind CSS
What font type and size does <h1>Introduction</h1> generate?
Answer: Some default from the browser (HTML tells what browser how)
Early HTML - Override defaults with attributes
<table border="2" bordercolor="black">
Style sheets were added to address this:
Specify style to use rather than browser default
Not have to code styling on every element
CS142 Lecture Notes - CSS 2
○
, Key concept: Separate style from content
Content (what to display) is in HTML files
Formatting information (how to display it) is in separate style sheets (.css files).
Use an element attribute named class to link (e.g. <span class="test">)
Result: define style information once, use in many places
Consider can you make all the text in the app slightly bigger?
Or purple is our new company color.
DRY principle: Don't Repeat Yourself
CS142 Lecture Notes - CSS 3
(CSS)
Mendel Rosenblum
CS142 Lecture Notes - CSS 1
,Driving problem behind CSS
What font type and size does <h1>Introduction</h1> generate?
Answer: Some default from the browser (HTML tells what browser how)
Early HTML - Override defaults with attributes
<table border="2" bordercolor="black">
Style sheets were added to address this:
Specify style to use rather than browser default
Not have to code styling on every element
CS142 Lecture Notes - CSS 2
○
, Key concept: Separate style from content
Content (what to display) is in HTML files
Formatting information (how to display it) is in separate style sheets (.css files).
Use an element attribute named class to link (e.g. <span class="test">)
Result: define style information once, use in many places
Consider can you make all the text in the app slightly bigger?
Or purple is our new company color.
DRY principle: Don't Repeat Yourself
CS142 Lecture Notes - CSS 3
