CSS: Cascading Style Sheets
{warm up}
Git Demonstration
What are the steps to setting up a project?
Initialize repository (local and remote)
Add files to track
Make commits to your repository
Push to remote
On to CSS...
Why?
What?
How?
{why}
Style
We don't want this...
... or this....
We want this....
... made by this.
Why?
What?
How?
Defining styles of HTML elements
What sorts of styles?
Size
Layout
Font
Background
Color
Opacity
Why?
What?
How?
Cascading Style Sheets
Cascading Style Sheets
Recall HTML tree structure
<div id="container">
<div id="sub-div">
<p id="block">
<text>Text1</text>
<text>Text2</text>
<text>Text3</text>
</p>
</div>
</div>
Styles applied in a cascade
<div id="container">
<div id="sub-div"> // Has own styles + #container styles
<p id="block"> // Own styles + #sub-div + #container
<text>Text1</text> // styles + #block + #sub-div + #container
<text>Text2</text>
<text>Text3</text>
</p>
</div>
</div>
Defining styles
Inline with HTML elements
<div style="font-size:30px">Text goes here</div>
Style section in HTML code
<html>
<style>
**** CSS syntax goes here ****
</style>
</html>
Include from a separate file
<html>
<link rel="stylesheet" href="css/my-css.css"/>
</html>
Applying styles
Recall HTML element attributes
<div id="my-div" class="container">...</div>
In CSS, select by property or type
/* CSS pseudo-code */
selector {
property:value;
}
Selectors
By ID
li { /* all <li> elements */
property:value;
}
By class
.my-class { /* with the . symbol */
property:value;
}
By element type
#my-id { /* with the # symbol */
property:value;
}
Units in CSS
Absolute units
in (inches)
px (pixels, 1px = 1/96 in)
cm (centimeters)
mm (millimeters)
pt (point, 1pt = 1/72 in)
pc (picas, 1pt = 12 pt)
Relative units
% (percentage of parent width)
em (relative to font-size)
The box model
Every HTML element is a box with content
{even text!}
How to understand positioning
Layout dictated by size of each box
The box model
The box model
The box model
The box model
The box model
The box model: padding
Space between content and border
The box model: Margin
Space between boxes
Arranging elements
"Block" level elements (divs, by default)
<div>Block element</div>
<div>Block element</div>
"In-line" level elements (spans)
<span>Inline element</span>
<span>Other inline element</span>
Arranging elements
Inline-block elements
Allow other elements on the same line (unlike block)
Can set width/height (unlike in-line)
Positioning elements
Fixed position
#element {
position:fixed;
}
Keeps element fixed relative to browser window
Positioning elements
Absolute position
#element {
position:absolute;
}
Positioned an absolute number of pixels from parent
(removed from flow of other elements)
Positioning elements
Relative position
#element {
position:relative;
}
Move element relative to where it should be
Specifying color
Too many options
english: 'blue'
Hue-saturation-lightness: hsl(255, 100, 50%)
red-green-blue: rgb(0,0,255)
Hex: #0000FF
can specify opacity (alpha) via rgba, hsla
Design Activity
Find the most well designed website you can (~5 minutes)
Find the worst designed website you can (~5 minutes)
In groups of ~3, share what you've found (~10 minutes)
Discuss (~10 minutes)
Assignment
Git challenge (due tomorrow before class )
info343_css
By Michael Freeman
info343_css
- 1,134