Classes

Classes can be used to apply varying format to an element

Classes are created with a dot (.)

The class name is arbitrary, but should convey meaning

Classes

/* General class */
.center-text {
    text-align: center;
}

/* More specific. Will apply to h1 elements only */
h1.center-text {
    text-align: center;
}

Classes

/* General class */
.center-text {
    text-align: center;
}

My text will be centered

    So will mine

Classes

/* General class */
.blue-text {
    color: #00a;  /* same as #0000aa */
}

Blue Heading

    Lorem ipsum dolor sit amet, gravida facilisi orci nulla. 
    Erat dolor, sagittis blandit, maecenas quis mi suscipit, 
    risus enim tincidunt erat. Eu justo, senectus ut mattis 
    laoreet et. Nec ultricies ultrices iaculis non asperiores 
    urna

Classes

Multiple classes can be applied to an element

.bold-text {
    font-weight: bold;
}
.italic-text {
    font-style: italic;
}

This is a special h1

    This paragraph will display its text bold and italic

CSS Positioning

The position property can be used to modify an element's position on the display

Values

• static
• absolute - element is positioned absolutely, based on its container
• relative - element is positioned relative to its static position
• fixed - element's position is fixed on the page

CSS Positioning

The position property can be used to modify an element's position on the display

Values

• top
• right
• bottom
• left

float & clear

The float property 'floats' an element left or right

img {
    float: left;
    display: block; /* img is a inline element */
}

div {
    float: right;
}

Example

float & clear

The clear property cancels float

img {
    clear: left;
}

div {
    clear: both;
}

Example

CSS Combinators

/* comma */
/* this */
h1, h2, h3, h4, h5, h6 {
    background-color: lightblue;
}

/* is way better than */
h1 { background-color: lightblue; }
h2 { background-color: lightblue; }
h3 { background-color: lightblue; }
h4 { background-color: lightblue; }
h5 { background-color: lightblue; }
h6 { background-color: lightblue; } /* this */

CSS Combinators

In addition, we can use combinators to modify the properties of nested element

We can use combinators to modify elements that are immediately nested (direct descendents) or that are nested regardless of the depth

CSS Combinators

* {
    background-color: green;  /* all applicable elements will 
                                 have a green background */
}

/* space */
div p {
    background-color: green;  /* all paragraphs inside a div element
                                 will be green */
}

/* greater than */
div > p {
    background-color: green;  /* only paragraphs immediately nested in
                                 a div */
}

CSS Combinators

There are several additional combinators, but these are the ones most often used

They all use the parent-child relationship of nesting that we've been making such a big deal of all semester

A combinator is something that explains the relationship between the selectors

A Final Pseudo Class

Let's take a quick look at the :nth-child() pseudo class

We can use this to apply CSS styling to specific child elements of a given parent

Using this pseudo class, making a striped table is a snap

A Final Pseudo Class

table {
    width: 600px;
    margin: 50px auto;
    border-collapse: collapse;
}

tr:nth-child(odd) {
    background-color: #00a;
    color: #ddd;
}
td {
    padding: 5px;
    text-align: center;
    font-size: 2rem;
    font-weight: 200;
}

A Final Pseudo Class

<table>
    <tr><td>One</td><td>Two</td><td>Three</td></tr>
    <tr><td>Four</td><td>Five</td><td>Six</td></tr>
    <tr><td>Seven</td><td>Eight</td><td>Nine</td></tr>
    <tr><td>Ten</td><td>Eleven</td><td>Twelve</td></tr>
    <tr><td>Thirteen</td><td>Fourteen</td><td>Fifteen</td></tr>
    <tr><td>Sixteen</td><td>Seventeen</td><td>Eighteen</td></tr>
</table>

A Final Pseudo Class

Questions?