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