Using CSS

CSS enables more flexibility in the display of content. Where HTML describes what a particular piece of content is, CSS enables us to describe exactly how to display that content. CSS can be applies very generally to an entire class of HTML elements, it can be applied to a certain class of elements (defined by us), or it may even be applied only to

CSS allows us to specify the style (fonts, colors, etc.) of an individual HTML element by including CSS declarations within a 'style' attribute

The Box

CSS styling is applied within a box, which is the bounding area of the element to which the CSS is being applied:

The Cascade

Fonts

<div style="font-family: Verdana, sans-serif; font-size: 22pt; font-style: italic"> wubba </div>	wubba
<div style="font-family: 'Patrick Hand SC', cursive; font-size: 22pt;"> wubba </div>	wubba

Text Effects

<div style="text-shadow: 5px 5px 5px #666666;">
    This is the text
</div>

This is the text

Borders, Margins and Padding

<div style="margin-bottom: 40px;">
    wubba
</div>

wubba

<div style="padding:10px;
            border:2px solid;
            border-radius:25px;">
    This is the text<br/>This is more text
</div>

This is the text
This is more text

<div style="box-shadow: 10px 10px 5px #888888;">
    This is the text
</div>

This is the text

Colors and Backgrounds

<div style="color: chartreuse; background: #000000">wubba</div>	wubba
<div style="background-image: url(../img/SunsetAboveClouds.jpg); cursor: crosshair; zoom: 300%"> wubba </div>	wubba

Note that URLs are relative to the location of the CSS file, not the , but is more typically defined in one or more *.css files, which in turn are linked to the HTML page.

2D Transforms

<div style="transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 / -webkit-transform: rotate(30deg); / Safari and Chrome */"> This is the text </div>	This is the text
<div style="transform: translate(30px, 50px); -ms-transform: translate(30px, 10px); /* IE 9 / -webkit-transform: translate(30px, 10px); / Safari and Chrome */"> This is the text </div>	This is the text
<div style="transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); /* IE 9 / -webkit-transform: scale(1.5, 1.5); / Safari and Chrome */"> This is the text </div>	This is the text
<div style="transform: skew(20deg, 10deg); -ms-transform: skew(20deg, 10deg); /* IE 9 / -webkit-transform: skew(20deg, 10deg); / Safari and Chrome */"> This is the text </div>	This is the text

Media Queries

CSS media queries support responsive design by enabling or disabling styles based on the capabilities of the device on which the CSS is being applied. For example:

The background color of this section will change depending on the browser size

The behavior shown above was specified with the following style element embedded in our header:

<style>
    @media all and (min-width:0px) {
        .media-specific-box {
            background-color: white;
        }
    }
    @media all and (min-width:800px) {
        .media-specific-box {
            background-color: yellow;
        }
    }
    @media all and (min-width:1200px) {
        .media-specific-box {
            background-color: red;
        }
    }
</style>

This behavior is quite rich, enabling us to apply different styles based on different devices, including: embossed, all, screen, braille, handheld, print, projection, speech, tty, tv.

Although it works to define the media queries inline, more typically we apply entirely different stylesheets based on the device (or device size):