Reviewing CSS: Cascading Style Sheets

Cascading Style Sheets (CSS) have revolutionized the way designers work with HTML. In brief, CSS syntax gives browsers a set of instructions on how to display HTML elements on a page. W3C, the peeps in charge of defining and maintaining global web standards, define CSS as "a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc." Instead of placing visual structure and styling intructions inside each HTML document, the instructions can now be placed externally, in a single place. Don't think that's interesting? Ok, let's try styling HTML the old-fashioned way...

Styling without CSS

  • bold
  • italics
  • colors
  • boxes
  • font tag 

Benefits of Using CSS

Example: Styling a paragraph

CSS Structure

CSS Syntax
SelectorDeclarationDeclaration
p
{text-decoration: underline; padding: 15px;}
  property value property value

 

CSS inclusion methods

  • inline
  • embedded
  • external

In class exercise: 

1.) Create an HTML and an CSS document and link them together using the <link> tag method.  

2.) Create a class in CSS, invoke in HMTL.  

3.) Add some basic content to the HTML document. Be sure to include the following, properly structured:

  • <div> tag to separate the main content area
  • <p> tags for paragraphs
  •  <h1> and other header tags for content headings
  • <img>: throw a few images into the content!

4.) Add some basic navigation using the <ul> and/or <ol> tags

 

Styling the content

Now that we have some basic content, let's begin to style some of it.

  • Try to center the content by giving the <body> tag margins % values
    • e.g. body
      {margin-left: 15%; margin-right: 15%; }
  • Define some colors: hex, RGB(), named colors...
  • use some <a> pseudoclasses
    • a:link { text-decoration: none; color: rgb(0, 0, 153) }
    • a:visited { text-decoration: none; color: rgb(153, 0, 153) }
    • a:hover { text-decoration: underline; color: rgb(0, 96, 255) }
    • a:active { text-decoration: none; color: rgb(255, 0, 102) }

Other CSS Details

  • CSS inheritance
  • Classes and ID
  • Over-riding inheritance with classes (dot notation)
  • Images in CSS
  • Box model:

boxdim

In Class Exercise: Create a basic CSS-styled HMTL document

Using what we about HTML and CSS, let's create a basic CSS-styled HTML document. Just as a review, the steps are as follows:

  1. create basic HTML5 document
  2. create CSS
  3. link the both the HTML and CSS document
  4. Let's place something in the HTML body
    1. For navigation, use these tags
      1. <nav>
      2. <h2>
      3. <ul> and <li>
    2. For content, use the following tags:
      1. <div>
      2. <h1>
      3. <p>
  5. Using CSS, try to get your document to look like this:

Screen Shot 2016-08-11 at 9.21.51 PM

Extra Credit!!!

For extra credit, use FontSquirrel or similar to embed your font.