Cascading Style Sheets (CSS) : Mendel Rosenblum

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

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

Style sheet contain one or more CSS Rules
Selector
body {
font-family: Tahoma, Arial, sans-serif;
Declaration color: black;
Block background: white;
margin: 8px;
}
Property Value
CSS
CSS HTML
Selector
h1 {
<h1>Today’s Specials</h1>
Tag name color: red;
}
.large {
<p class="large">...
Class attribute font-size: 16pt;
}
Tag and Class p.large {...} <p class="large">...
#p20 {
<p id="p20">...
Element id font-weight: bold;
}

CSS Pseudo Selectors
hover - Apply rule when mouse is over element (e.g. tooltip)
p:hover, a:hover {
background-color: yellow;
}
a:link, a:visited - Apply rule when link has been visited or not visited (link)
a:visited { a:link {
color: green; color: blue;
} }

CSS Properties
Control many style properties of an element:
● Coloring
● Size
● Position
● Visibility
● Many more: (e.g. p: { text-decoration: line-through; })
● Also used in animation

Color - Properties: color & background_color
Must ultimately turn into red, green, and blue intensities between 0 and 255:
● Predefined names: red, blue, green, white, etc.

● 8-bit hexadecimal numbers for red, green, blue: #ff0000
R G B
● 0-255 decimal intensities: rgb(255,255,0)
R G B
● Percentage intensities: rgb(80%,80%,100%)
R G B
Example: h1: { color: red; }

CSS Box Model
Margin Total element width =
Border width +
Padding left padding +
right padding +
width left border +
right border +
Element
height
left margin +
right margin
Margin & Padding

Transparent

Absolute
CSS distance units
2px pixels
1mm millimeters
2cm centimeters
0.2in inches
3pt printer point 1/72 inch
Relative
2em 2 times the element’s current font size
3rem 3 times the root element’s current font size

Size Properties - Element, pad, margin, border
width - Override element defaults border-bottom-color
height border-bottom-style
border-bottom-width
padding-top border-left-color
padding-right border-left-style
padding-bottom border-left-width
padding-left border-right-color
border-right-style
margin-top border-right-width
margin-right etc.
margin-bottom p {
margin-left border: 5px solid red;
}
position property
position: static; (default) - Position in document flow
position: relative; Position relative to default position via

top, right, bottom, and left properties
position: fixed; Position to a fixed location on the screen via

position: absolute; Position relative to ancestor absolute element via

Fixed position (0,0) is top left corner

Some more common properties
background-image: image for element's background
background-repeat: should background image be displayed in a repeating

pattern (versus once only)
font, font-family, font-size, font-weight, font-style: font

information for text
text-align, vertical-align: Alignment: center, left, right
cursor - Set the cursor when over element (e.g. help)

Element visibility control properties
display: none; - Element is not displayed and takes no space in layout
display: inline; - Element is treated as an inline element.
display: block; - Element is treated as an block element.
display: flex; - Element is treated as an flex container.
display: grid; - Element is treated as an grid container.
visibility: hidden; - Element is hidden but space still allocated.

visibility: visible; - Element is normally displayed

Some other CSS issues
● Inheritance
○ Some properties (e.g. font-size) are inherited from parent elements
○ Others (border, background) are not inherited.
● Multiple rule matches
○ General idea: most specific rule wins
<span>Text1</span> span.test { color: green }

<span class="test">Text2</span> span { color: red }

Adding Styles to HTML Separate style sheet (best way)
<head>
<link rel="stylesheet" type="text/css" href="myStyles.css" />
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
}
</style> Page-specific styles
</head>
<body>
<div style="padding:2px; ... ">
</body>
Element-specific styles

body { <body>
font-family: Tahoma, Arial, sans-serif; <h1>First Section Heading</h1>
font-size: 13px; <p>
color: black; Here is the first paragraph, containing
text that really doesn't have any use
background: white;
or meaning; it just prattles on and on,
margin: 8px;
with no end whatsoever, no point to
}
make, really no purpose for existence
h1 { at all.
font-size: 19px; </p>
margin-top: 0px; <div class="shaded">
margin-bottom: 5px; <h1>Another Section Heading</h1>
border-bottom: 1px solid black <p>
} Another paragraph.
.shaded { </p>
background: #d0d0ff; </div>
} </body>
CSS: CS142 Lecture Notes - CSS HTML: 17

Example Output

CSS in the real world
● CSS preprocessors (e.g. less) are commonly used
○ Add variable and functions to help in maintaining large collections of style sheets
○ Apply scoping using the naming conventions
● Composition is a problem
○ It can be really hard to figure out what rule from which stylesheet is messing things up

Cascading Style Sheets (CSS) : Mendel Rosenblum

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets (CSS) : Mendel Rosenblum

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets (CSS) : Mendel Rosenblum

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

CS142 Lecture Notes - CSS 1

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

Use an element attribute named class to link (e.g. <span class="test">)

Result: define style information once, use in many places

DRY principle: Don't Repeat Yourself

Tag and Class p.large {...} <p class="large">...

CS142 Lecture Notes - CSS 5

CS142 Lecture Notes - CSS 6

● Also used in animation

CS142 Lecture Notes - CSS 7

● Predefined names: red, blue, green, white, etc.

CS142 Lecture Notes - CSS 8

Margin & Padding

CS142 Lecture Notes - CSS 9

3pt printer point 1/72 inch

3rem 3 times the root element’s current font size

CS142 Lecture Notes - CSS 10

position: static; (default) - Position in document flow

position: relative; Position relative to default position via

position: fixed; Position to a fixed location on the screen via

position: absolute; Position relative to ancestor absolute element via

Fixed position (0,0) is top left corner

background-repeat: should background image be displayed in a repeating

font, font-family, font-size, font-weight, font-style: font

text-align, vertical-align: Alignment: center, left, right

cursor - Set the cursor when over element (e.g. help)

CS142 Lecture Notes - CSS 13

visibility: hidden; - Element is hidden but space still allocated.

CS142 Lecture Notes - CSS 14

● Multiple rule matches

○ General idea: most specific rule wins

<span>Text1</span> span.test { color: green }

CS142 Lecture Notes - CSS 15

CS142 Lecture Notes - CSS 16

CSS: CS142 Lecture Notes - CSS HTML: 17

CS142 Lecture Notes - CSS 18

CS142 Lecture Notes - CSS 19

You might also like