Week 2

Assignment 2: CSS

Now that you have a project portal page, create a bio page for yourself. This page must contain:

  • Valid XHTML
  • A link to the XHTML validator 
    <a 
href="http://validator.w3.org/check?uri=referer"> 
<img alt="Valid XHTML 1.0!" 
src="http://www.w3.org/Icons/valid-xhtml10"/>
</a>
  • CSS Styling (we will learn all this in class)
    • At least 1 ID css selector, styling a unique element
    • At least 2 Class css selectors, styling elements
    • At least 1 Type selector, styling all elements of that type
    • At least 1 Descendant selector, styling all elements of that type and structure
  • A Photo
  • A Bio

Add a link to your bio page on your project portal. I will look for it when I grade assignments after next Tuesday’s class.

Reading

Book: CSS Mastery
Chapter 1: Setting the Foundations
Section: Structuring your code
Pages: 12-25 (The rest of chapter 1)

In Class Examples

The Ugliest Page in the World!

CSS Reset Library

lib.reset.css (more info)

Lecture Notes

Web Browsers:

Browser Tools (Firefox):

Divs and Spans

Here is the XHTML we will be using today:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Valid XHTML Document!</title>
		<style type="text/css"><!--
		
		--></style>
	</head>
	<body>
		<!-- a DIV example -->
		<div class="mainNav">
			<ul>
				<li>LInk 1</li>
				<li>Link 2</li>
			</ul>
		</div>
		<!-- a SPAN example -->
		<div class="mainBody">
			<p>Here is some text and <span class="alert">this is an alert</span> message.</p>
		</div>

	</body>
</html>

CSS

Basic structure:

CSS breaks down into the following:

  • A selector
    • Type Selectors (also called ‘element’ or ‘simple’ selectors)
      • p {color: black;}
      • a {text-decoration: underline;}
      • h1 {font-weight: bold;}
    • Descendant Selectors
      • li a {text-decoration: none;}
    • ID Selectors
      • #mainContent h1 {font-size: 1.8em;}
      • #secondaryContent h1 {font-size: 1.2em;}
    • Class Selectors
      • .datePosted {color: green;}
      • .smallBox{width: 100px;}
  • Scope brackets: { }
  • Properties (or parameters)
    • color
    • width
    • background-color
  • Property/Value Seperators (the colon, : )
  • Values
    • single values
      • #000
      • black
      • 100px
      • 100px
    • combined values
      • background: #000 url(‘/img/background.gif’) no-repeat 0 0;
      • padding: 15px 10px 15px 5px;
  • Semicolons (;)

Values

Numeric

Values that imply a numeric quality, like 10px or 10em require the definition of their type (px, pt, em, etc) only if the value is not zero. If the value is 0, it doesn’t matter if it’s in px, pt or em because it’s just zero.

Shortcuts

Some css properties have shortcuts. Rather than using the following:

padding-top: 10px; 
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

You can use the shortcut padding to specify all 4 properties:

padding: 10px 15px 20px 25px;

This is read in clockwise order:

padding: top right bottom left;

The margin property uses the same syntax.

Comments

/* this is a css comment */

/* this is a multi-line
    css comment :) */

Pseudo-classes (we will use these more in week 5)

From Page 12 of CSS Mastery:

/* makes all unvisited links blue */
a:link {color:blue;}
/* makes all visited links green */
a:visited {color:green;}
/* makes links red when hovered or activated */
a:hover, a:active {color:red;}
/* makes table rows red when hovered over */
tr:hover {background-color: red;}
/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

link and visited are called link pseudo-classes because they can only be used on anchor tags. More on pseudo-classes on w3 Schools

The Universal Selector

You can apply css to every element on the page by using the universal selector (*):

* {
padding: 0;
margin: 0;
}

Advanced Selectors (page 13-16)

More Specific Type Selectors

You can specify a class, id or other attribute as a property of an element in css to get more specific:

/* affects all <p> tags regardless of class/id */
p { font-weight: bold; } 
/* affects all <p class="large">*/
p.large { font-size:1.4em; }
/* compare to this, which affects <p><element class="large"></element></p> */
p .large { font-size:1.4em; }
/* affects only <div id="mainNav"> but wouldn't affect <ul id="mainNav">*/
div#mainNav { font-weight: bold; font-size:1.4em; }

Direct Descendants

#mainNav > ul > li {font-weight: bold;}

This applies only to ‘li’ tags that are direct descendants of a ‘ul’ tag, which are directly beneath the element with an id=”nav”. Any ‘li’ beneath ‘#nav’ that is contained within an ‘ol’ will not be affected. Also, any ‘ul’ that is below another element within the ‘#nav’ element but not directly a child of ‘#nav’ will not be affected.

Adjacent Sibling

In XML, elements that share parent elements in the DOM tree are called siblings. You can apply CSS attributes to an element only in the case that it appears after another selector, like so:

h1 + p {font-weight: bold;}

This will affect the following HTML:

<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

So that the first paragraph will be bold.

We could add complexity to this by using non-simple selectors:

#mainBody > .header h1 + p {font-weight: bold;}

This would say to bold a ‘p’ tag that is immediately after an ‘h1’, but only if that ‘h1’ is somewhere below an element with the class name of ‘header’ and only if that ‘header’ class element is a direct child of an element with the id of ‘mainBody’. You can see how this can get complex :)

Element Specificity

form {width: 30em;}
form#search {width: 15em;}

This says that all forms will have a width of 30em, but the form with an ID of ‘search’ will have 15em width.
This may seem silly since you could just say:

form {width: 30em;}
#search {width: 15em;}

and get the same effect, but the interesting thing, like most everything in CSS, is that ID selectors are not the only thing you can use for this way of accessing elements:

form {width: 30em;}
form.search {width: 15em;}

Now it will apply to a form with a class name of ‘search’. You may have other elements with a class name of search, but this will only affect the ‘form’ element with the class of ‘search’.

div#nav{background-color:#000;}

Specificity

  • !important
  • See page 16-17 of your book for details specificity chart and rules

@import

using the CSS directive @import, you can make the browser fetch css files and load up their styles. This can be done within style tags or within external CSS files:

<style type="text/css"><!--
@import url('main.css');
--></style>

@import url('main.css');
.someSelector {
 width: 100px;
}

Linking External CSS

Another way to add external CSS files to your XHTML page is to refer to them using a link element:

...
<head>
  <title>Valid XHTML Document!</title>       
  <link type="text/css" rel="stylesheet" href="week2_css.css" />
</head>
...

In Class Examples

Thursday: More CSS

Copy and save this as week2_css.html:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Valid XHTML Document!</title>       
    <link type="text/css" rel="stylesheet" href="css/week2_css.css" />
  </head>
  <body>
    <!-- a DIV example -->
    <div id="mainNav">
      <ul>
        <li><a href="Week2_CSS.htm">Link 1</a>
          <ul>
            <li><a href="Week2_CSS.htm">Link 1</a></li>
            <li>
              <div>
                <a href="blah.htm">Link 2</a>
              </div>    
            </li>
          </ul>
        </li>
        <li>
          <div>
            <a href="blah.htm">Link 2</a>
          </div>    
        </li>
      </ul>
      <ol>
        <li><a href="link1.htm">Link 1</a></li>
        <li>
          <div>
            <a href="blah.htm">Link 2</a>
          </div>    
        </li>
      </ol>
    </div>
    <!-- a SPAN example -->
    <div id="mainBody">
      <h1>Bio</h1>
      <p class="firstP large">Here is some text and <span class="alert">this is an alert</span> <a href="message.htm">message</a>.</p>
      <p class="large">asdf asdfasdf dfasdfa sdfasd asdf asd fasdf asdf asdf</p>
      <p>asdf asdfasdf dfasdfa sdfasd asdf asd fasdf asdf asdf</p>
    </div>
  </body>
</html>

Copy and save this as css/week2_css.css:

@import url('lib.reset.css');

body {
  /*   we will give the body a height so we can play 
    with vertical center on our background and not 
    worry about the body being too short to make a 
    difference */
  height:600px;

  /* the long way */
  background-color:#000000;
  background-image: url('http://intellectualpirates.net/img/Adam_Hand_4.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;

  /*   The short way: this overrides all the background
    properties above (since it appears later in the CSS */
  background:#036 url('http://intellectualpirates.net/img/Adam_Hand_5.jpg') repeat-y fixed -10px 200px;

  /* the long way to do padding */
  padding-bottom:100px;
  padding-top:100px;
  padding-left:30px;
  padding-right:10px;

  /* shortcuts */
  padding:100px 10px; /* vertical horizontal */
  padding:100px 10px 100px 30px; /* top right bottom left */
  margin:0;
}
/* apply css to more than one element */
#mainNav, #mainBody {
  background-color: #fff;
  width:500px;
}
/* direct descendants */
#mainNav > ul > li > a,
#subNav > ul > li > a {
  color:#000;
  text-decoration:none;
  font-family: "courier new", "Arial", sans-serif;
  width: 100px;
}
          
/* Pseudo-classes: on element "states" */
/* makes all unvisited links blue */
a:link {color:blue;}
/* makes all visited links green */
a:visited {color:green;}
/* makes links red when hovered or activated */
a:hover{color:red;}
a:active {color:#FF9900;}
/* makes table rows red when hovered over */
tr:hover {background-color: red;}
/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}
        
.firstP.large {
  color:blue;
}

.firstP {
  font-weight:bold;
}
.large {
  font-size:1.5em;
  color:#FF9900 !important;
}

h1 + p {
  padding-left:20px;
}

3 thoughts on “Week 2”

  2. Thanks. The whole blog theme does need to be customized though. This setup just doesn’t work for the formatting I’m putting in. Poor use of space and a little too full of pizzaz–but it was quick and dirty :)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web Development Courses, Rants, Tutorials and Hacks