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
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
CS142 Lecture Notes - CSS 4
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;
} }
CS142 Lecture Notes - CSS 6
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. (140 standard names)
● 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; }
CS142 Lecture Notes - CSS 8
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
CS142 Lecture Notes - CSS 10
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
top, right, bottom, and left properties
position: absolute; Position relative to ancestor absolute element via
top, right, bottom, and left properties
Fixed position (0,0) is top left corner
CS142 Lecture Notes - CSS 12
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 a block element.
display: flex; - Element is treated as a flex container.
display: grid; - Element is treated as a grid container.
visibility: hidden; - Element is hidden but space still allocated.
visibility: visible; - Element is normally displayed
CS142 Lecture Notes - CSS 14
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 }
CS142 Lecture Notes - CSS 16
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: 18
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
CS142 Lecture Notes - CSS 20
