Course notes 4
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

CSS Standards:

CSS 2.1, CSS 3.0, CSS Mobile Profile, WAP CSS, WebKit Extensions, CSS Extensions(not standard), Wireless CSS
They are almost the same but there are some differences. The basic CSS is supported in all.

Check to see what standards are supported on the device you are targeting.

Safe to use non-standard CSS but it might not look pretty - Web browsers typically ignore tags they do not recognize.

Three ways of using CSS:

Inline - the CSS is in the tag in the body of the html page.

<body>
    <p style="text-size:10px;">Text Here</p>
</body>

Internal - CSS is specified in the <head>

<head>
<style type="text/css">

    body {
        background-image:url("images/back40.gif");
    }
</style>
</head>

External - CSS is located outside of the html page - you need to call it from within the head tag

<head>
    <link rel="stylesheet" type="text/css" href="theStyleSheet.css" />
</head>



CSS Selectors:

Selectors are used in the External and Internal CSS to figure out what to apply the style to. All instances of that tag will be effected by the style.

Type selectors:

These selectors are the same as the tag names:

h1, h2, ..., p, a, body, hr, ol, ul, tr, td, table, etc..

In the CSS:

h1 {
    color:#FF0;
}


In the BODY:

<h1>Title</h1>


Descendent Selectors:
This specifies that a tag within another tag will be effected by the stylesheet. Only tags inside the other tag will be changed and all cases within the page of the tag within a tag will be effected.

In the CSS (two Type selectors):

p a {
    color:#FF0;
}


In the BODY:

<p>
    This is the text and now I have a <a href="link.html">LINK</a>
</p>

OR

In the CSS:

div ol {
    list-style-type: circle;
}


In the BODY:

<div>
    This is the text and now I have a list
    <ol>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</div>



Class Selectors:
You must indicate the element in the body that is to be effected by including a " class". In the CSS the selector always starts with a DOT . The same class can be placed multiple places on the page.

In the CSS:

.bigFont {
    font-size:120%;
    font-weight:bold;

}


In the BODY:

<p class="bigFont">
    This is the text
</p>


Combining Type and Class selectors:
For this example, all divs with the class="big" will be effected.

In the CSS:

div.big {
    font-size:16px;
    font-weight:bold;

}


In the BODY:

<div>
    This is not going to get the style
    <div class="big">
        This is the big text
    </div>
    <p class="big">This text will not be effected by the style</p>

</div>


ID Selectors:
IDs are UNIQUE to a page and there will never be more than one per page. They start with a #.

In the CSS:

#uniqueParagraph {
    color:#FFFF00;

}


In the BODY:

<p id="uniqueParagraph">
    This is the text
</p>


Pseudo-class Selectors:
This is used to effect special attributes of some selectors.

In the CSS (they MUST come in this order):

a:link {
        color:#FF0000;
}                                                 /* unvisited link */
a:visited {
        color:#00FF00;
}                                                  /* visited link */
a:hover {
         color:#FF00FF;
}                                                  /* mouse over link */
a:active {
         color:#0000FF;
}                                                  /* selected link */ 

In the BODY (nothing special needs to be written in the tag - it already understands the link, visited, etc.):

<a href="go.html">
 


More on CSS and Selectors:
There is so much more to tell you about CSS Selectors but you may not need it right away so here are a number of useful links.

CSS Intro (w3schools.com) - use the NEXT CHAPTER button to get to very useful stuff.

w3.org Editor's Draft - Selectors

Using CSS

Backgrounds

Background Color:

background-color: #6600FF;

Ex: <BODY style="background-color: #6600FF;">

Background Image:

background-image: url('image location');

Ex: <BODY style="background-image: url('../images/bgimage.gif');">

Background Image - Repeat:

background-repeat: repeat-y;   --repeat-x,   no-repeat,   repeat

Ex: <BODY style="background-repeat: repeat-y;">

Background Image - Position:

background-position: center, top, bottom, left, right

Ex: <BODY style="background-position: center;">

You can specify two values:

Ex: <BODY style="background-position:top center;">

If you specify one value the second one will be "center"

Background Image - Attachment:

background-attachment: fixed, scroll

Determines whether the background stays fixed or scrolls with the page

Ex: <BODY style="background-attachment: fixed;">


Font Styles

font-size options:
font-size:16px;
font-size:150%;
font-size:x-large;

font-family options:
font-family:'Times New Roman', Times, serif;
Different Family names: Arial, Helvetica,Times New Roman, Times, Courier New, Courier
Generic names: sans-serif, serif, monospace, cursive, fantasy

font style and weight options:
font-weight:bold;
font-style:italic;

Multiple CSS font definitions:
style="font-size:16px; color:#CC0000; font-weight:bold;"


Margins and Padding

Margins are the space outside of an element. Padding is the space inside an element.

Margins do not add height or width to an element, but padding does. So if you set an elements height and width to 100px, and its padding to 10px, its total height and width will be 120px.

margins vs padding

You can set the margin or padding individually per side like this:

body {
      margin-top: 0px;
      margin-right: 10px;
      margin-bottom: 0px;
      margin-left: 10px;
}


Or, you can set them all in one line in (top, right, bottom, left) like this:

body {
      margin: 0px 10px 0px 10px;
}


If you leave some blank, it will use its opposite side. The example below sets the top margin to 0px and the right margin to 10px - then, because the bottom margin isn't set, it uses 0px (set for top margin) as the bottom margin, and because the left wasn't set, it uses the left's margin (10px).

body {
      margin: 0px 10px;
}

Here are the CSS margin elements to help you adjust how things align to the edge of your page.

You can also use negative numbers:

body {
      margin-top: -2px;
      margin-left: -2px;
}


IMPORTANT NOTE:
Browsers set their own default margin and paddings to many elements, but its a different amount for each browser. To combat this (and start with a clean slate), you should start your CSS file with the following code:
* {
      margin: 0px;
      padding: 0px;
      }

CSS Rollovers

<head>
      <style type="text/css">
            #smiley:link, #smiley:visited {
                  display: block;
                  width: 100px;
                  height: 100px;
                  background-image: url('images/smiley.jpg');
                  background-position: top left;
             }
            #smiley:hover, #smiley:active {
                  background-position: bottom left;
            }
      </style>
</head>

<a id="smiley" href="#"></a>




The Example:




The Explanation:


The anchor: First we create a link (anchor), and give it an id. The id lets us reference this specific link.

The style part 1: Then, using styles, we give it a width and height of 100 pixels. To do this, we must first define it as a "block" level element by using the "display" definition.
anchor
The image: We then create an image that is twice as high as the link. In the top half of the image is our "normal" state, and in the bottom, the "over" state.
smiley

The style part 2: We set the background image of the link to our newly created image, and set its position to the top left.
Then, on its hover and active states, we set its background position to be BOTTOM left.
smiley normal state     smiley normal state    

This creates a window effect, where you're basically looking through the link, and only seeing one portion of the background image at a time.


Table-free layout - CSS Positioning

Position properties: static, relative, absolute, fixed, and inherit

Normal flow is the order in which the objects appear in your markup and how they nromally appear on the page (without be altered by the CSS positioning).


Static Positioning

This is the normal state. It stacks the elements one on top of the other. You can not use postioning attributes like top, bottom, etc.
[SEE example 1]

<head>
<style type="text/css">

#block1 { 
	    position: static;
	    width: 100px;
	    height: 100px;
	    background: #FFCC00;
}
#block2 { 
	    position: static;
	    width: 100px;
	    height: 100px;
	    background: #FF7700;
}
#block3 { 
	    position: static;
	    width: 100px;
	    height: 100px;
	    background: #FF4400;
}

</style>
</head>
<body> <div id="block1"></div> <div id="block2"></div> <div id="block3"></div> </body>

Relative Positioning

is made up of three parts. First, the "position" - this is simply set by "position: relative;"

By setting something's position to "relative", you've told it you want to position it "relative" to where it would normally flow in the document.

To tell it WHERE you want to position it, use "top" or "bottom", and "left" or "right".

css absolute positioning In this example we've made a page with an image, then a paragraph of text.

The image has been set to "position: relative;" (which doesn't move it at all), "top: 30px;", and "left: 60px;"

This seems kind of backwards, because we didn't move it up OR left - but what you're telling it to do with "top", is - move this item X pixels FROM the top of where it would normally flow in the document. The same with "left" - we're telling it to move X pixels FROM the left of where it would normally flow.

You'll also notice that it overlaps the text - with position:relative, the elements "box" stays where it was, and keeps anything else from taking up the space, and moves the element where we tell it to go. Picture it as if we had a piece of paper - we set a photo in the top left, wrote some text next to it, and drew an outline around the photo. We could MOVE the photo (over the text), but its outline would still be on the page, keeping the text from being able to move up in its spot.

[SEE example - relative positioning]

<head>
<style type="text/css">

#block1 { 
position: relative;
}
#block2 {
position: relative;
left: 10px;
bottom: 20px;
} </style> </head>
<body> <div> <img id="block1" src="../images/caricature.jpg" width="120" height="150" alt="char" /> This is my text and the block will be relative to this.<br /><br /> </div>
<div> <img id="block2" src="../images/caricature.jpg" width="120" height="150" alt="char" /> This is my text and the block will be relative to this plus I pushed it down 20 pixels from the top and pushed it 10 pixels from the left from where it was supposed to be. </div> </body>
You can use top:10px; bottom:10px; right:10px; left:10px; and change the pixels to whatever you want.

Absolute Positioning

(like relative positioning) is made up of three parts. First, the "position" - this is simply set by "position: absolute;"

To tell it WHERE you want to position it, use "top" or "bottom", and "left" or "right".

By setting something's position to "absolute", you've told it you want to position it "relative" to its first positioned parent or ancestor (No, its not a typo). With RELATIVE positioning, you position something "relative" to itself - with ABSOLUTE positioning, you position it relative to its parent (specifically, its first parent or ancestor that has a position set - relative or absolute). I'm sure that makes no sense - so lets try it out to make it more clear.

css absolute positioning In the picture to the left, we've created a document with an image, and some text. The image has "position:absolute;", and has "top:0px;" and "right:0px;".

The body is the image's parent, and is the highest it will go to look for a positioned ancestor, so the image is positioned based on the <body> tag - 0px from the top, and 0px from the left.

[SEE example3 - absolute positioning]





<head>
<style type="text/css">

#block1 { 
position: absolute;
top: 0px;
left: 610px;
}
#block2 {
position: absolute;
bottom: 0px;
left: 200px;
} </style> </head>
<body> <div>
<img id="block1" src="../images/caricature.jpg" width="120" height="150" alt="char" />
The image is positioned absolute - in relationship to its parent (the body).
<br /><br /><br /><br /><br /><br />
</div> <div> <img id="block2" src="../images/caricature.jpg" width="120" height="150" alt="char" />
The image is positioned absolute - in relationship to its parent.
The parent is the thing it is inside of, BUT if its parent has not been set to position:relative; OR position:absolute; it goes up a level and looks for one of its ancestors that has position:relative; OR position:absolute; If it cannot find an ancestor that has its position set, it moves in relationship to the body.
</div> </body>

Let's see what happens when we put a div within a div and both have been set to position:absolute.

[SEE example - absolute with parent set to absolute]

<style type="text/css">

#block1 { 
width:300px;
height:300px;
background-color:#FFCC00;
position: absolute;
top: 200px;
left: 300px;
} #block2 {
position: absolute;
bottom: 0px;
left: 0px;
} </style>
</head> <body>
<div id="block1">
<div>
<img id="block2" src="../images/caricature.jpg" width="120" height="150" alt="character" />
The image is positioned absolute - in relationship to its parent.
</div>
</div> </body>

 


CSS Float

According to W3Schools.com, "The float property specifies whether or not a box (an element) should float."

This is kind of like defining a "turtle", as "an animal that closely resembles a turtle" - not very helpful.

A good example to show what they mean by "float", is this - create a document with an image, then a paragraph of text. (Feel free to grab text from Lipsum.com (which is what most web developers use for "filler text".

You'll notice, like the first image below, your image will appear, then the text will appear to its right. But, because an image is an inline element, it only resides in one line of text - even if its 1000px tall, it will sit on a single line of text.

Normally, we would want that text to come up alongside the image - which is why we use "float".

css float none Without using float, if you put an image, then text, you'll notice the text starts on the baseline of the image (shown left). This is because an image is an inline element, so it resides within the line, regardless of its height.

css float left This image (shown left) demonstrates what happens when we give the image the style of "float: left;". By "floating" the image to the left, we're telling it to allow things to slide up to the right of it.
css float right Using the same example as the previous image, we instead tell the image to "float: right;", which moves it to the right, and allows other elements to slide up to its left.

Examples:

 
<style type="text/css">
#float1 
{
float:right;
} #float2
{
float:left;
} </style>
</head> <body> <div>
<img id="float1" src="../images/caricature.jpg" width="120" height="150" alt="character" />
The image has been set to float right and all the text will flow around the image.
This is not normally what happens because images usually take up a whole bunch
of space when they are put next to text. We have to tell the text to float around the image
specifically.
<br /><br /><br /><br /><br />
</div> <div>
<img id="float2" src="../images/caricature.jpg" width="120" height="150" alt="character" />
The image has been set to float right and all the text will flow around the image.
This is not normally what happens because images usually take up a whole bunch
of space when they are put next to text. We have to tell the text to float around the image
specifically.

</div> </body>

[See the Float exercise]