Week 14 | Web III

WHAT IS CSS?

Introduction to CSS

CSS adds styles to your web pages: it’s the skin over the bones of HTML. This tutorial will teach you how to style our webpages.

  • Cascading Style Sheets (CSS) are a standard developed to allow designers control over presentational elements of a Web page and effectively separate content from presentation.
  • A style is a group of attributes that are called by a single name.
  • A style sheet is a group of styles.
  • The cascade part of CSS means that more than one stylesheet can be attached to a document, and all of them can influence the presentation. It also means that different applications of CSS can be applied to a page in order of precedence: inline, embedded, external and default.


CODE ACADEMY LESSON IV

1. What’s CSS?  Lessons 1-6

The basics: what CSS is, how it works, and why we separate form from function.

CSS SYNTAX

csssyntax

The CSS syntax is a little different from the tag and attribute format of HTML. A CSS style is made up of a selector, which is the HTML element or class name you wish to define rules for, and a set of properties and values. A property and its value are separated by a colon (:). You can define multiple properties for a style, separating them with a semi-colon(;). Property/value sets are enclosed in brackets{}.

For example, if you wanted to redefine all HTML in your <p> tags to look like this, then your style would look like this:

p {
color: #00CC00;
font-size: 13px;
font-family: "Courier New", Courier, monospace;
font-weight: bold; text-decoration:none;
}

The order of properties doesn’t matter, as long as you separate them with a semi-colon. Property values that have multiple words are surrounded by double quotes: “Courier New”.

You can apply the same style to multiple selectors by grouping them:

h1, h2, h3, h4 {

color: #00CC00
}

There is a full CSS reference and extensive code examples at:

W3 Schools CSS Tutorial

also at: http://www.barelyfitz.com/screencast/html-training/css/positioning/

CODE ACADEMY LESSON IV

2. CSS Syntax

Now that you know what CSS is, it’s time to learn how to use it.


Sizing in CSS

There are a number of different measurement schemas within xHTML / CSS. Which one to use depends on context, and you can mix and match them.

  • px – number of pixels, relative to the screen size. This is the most consistent across machines, browsers, monitors
  • % – percentage of the total width or height
  • em – size relative to the em size of the base font

We will go into when it is appropriate to use the various schemes in later weeks. For now, use the px units in your stylesheets.


CODE ACADEMY LESSON IV

3. Details, Details

You’ve got basic CSS under your belt—now we’ll cover some of the finer aspects.


 

The three types of HTML elements to apply styles to:

An important concept to understand is that there are basically three types of HTML tags: block-level elements, inline elements, and replaced tags.

  1. Think of block-level elements as boxes that have a line break before and after. Block-level elements are the ones you will spend most of your time applying style rules to, or manipulating with scripting. They include h1-h6, p, div, ul, ol, blockquote.
  2. Inline elements on the other hand, don’t have line breaks before and after. Inline elements are used in the middle of another element, and include a, b, strong, italic, em, span
  3. The third kind of HTML tag is called a replaced tag. What it means is simply that these elements have a set width and height. The most-used replaced tag is the <img> tag, which you must specify a height and width for.

If an element is not explicitly defined, it is known as an anonymous element.You will not be able to style this element directly.

CLASSES AND IDS

Classes and Ids are a way to designate specific elements in your HTML. You can apply either a class or id or both to any element:

<div id="navigation">

<p>

There is one key difference between a classes and ids:

  • IDs can only be applied to one element per page
  • Classes can be applied to multiple elements per page

When naming classes and ids, it is good practice to name them logically and semantically. The names should not describe the physical attributes of the style you plan to apply to them, but the type of thing that they are in the structure of your page. For example, if you have a unordered list of links that will serve as your navigation, this:

<ul id = "navigation">

is better than this:

<ul id = "top">

The reason for this once again we want to separate the structure from the presentation. Naming your classes and ids logically means that if you radically change the color scheme or layout defined by your style sheet, the structure will still make sense.


3 WAYS TO USE STYLE SHEETS

***NOTE: IN ORDER FOR YOU HTML PAGES TO ACCEPT THE STYLE.CSS FILE, YOU MUST INCLUDE THE FOLLOWING CODE IN THE HEAD OF YOUR HTML PAGE:
<link rel=”stylesheet” type=”text/css” href=”style.css” />

There are three methods of accessing style sheets from your HTML:

  1. Inline as part of an HTML tag.
  2. Embedded in the <head> section of your page between <style></style> tags
  3. In an external document that is linked to the page

Here is an example of a page that uses inline and embedded styles:

We are going to focus primarily on using external style sheets. The are a couple of advantages to this. First, you can apply the same styles to some or all pages of your site. Second, you can make a change on the external style sheet and all the pages it is linked to will change. And last, with a simple change to your code, you can switch style sheets and completely alter the look of your page.

Style sheets work in 4.x or later browsers (but still not consistently) such as Navigator 4.5 or 6 and IE 4 or 5. Most earlier browsers ignore them.

A good place to see style sheets in action, and to really understand how powerful they are, is the CSS Zen Garden.


CREATING AND LINKING TO YOUR OWN EXTERNAL STYLE SHEET

An external style sheet is a plain text document containing all the style declarations you wish to apply to the linked pages. It does not have the structural tags (html, head, body) that your HTML documents have.
Once you have created your style sheet, you can associate it with your page using the link tag in your HTML, placed between the <head> tags:

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

Code Academy Review


MANIPULATING BASIC CSS PROPERTIES

 

CSS Classes and IDs

This tutorial covers how to group CSS selectors into classes or identify a single selector by ID.

CSS Selectors: 23 exercises

 


WEB DEVELOPER ADD-ONS

There is an excellent suite of Firefox and Google Chrome add-ons that will help you in your site development. We’re going to install them now, and I highly recommend that you install them on your home machine:

If you’re using Google Chrome, download this Web Developer Add-On.

As the course goes on, we are going to learn to use the various tools included in the suite.


VALIDATING YOUR CODE

It is essential to make sure that you are writing valid xHTML code. Improperly formatted code can cause your pages to render in unpredictable ways or not at all in various browsers.

The W3C offers a free validator that you can run any html page through:

You can also access the validator through the “Tools” menu in the Web developer toolbar.

HOMEWORK

CODE ACADEMY  | Introduction to CSS

No. 7 | CSS AN OVERVIEW
NO. 8 | DESIGN A BUTTON ON YOUR WEBSITE


CODE ACADEMY  | CSS Classes and IDs
NO. 9 | CSS SELECTORS
NO. 10 | SORTING YOUR FRIENDS


 


CSS
USING THE WHAT IS CSS? VIDEO WE WATCHED INN\ CLASS —

Go to one of the html pages you already created and add three div’s that corollate to three div styles in the style.css page you created.


  1. Complete ALL the code academy tutorials finishing with Introduction to CSS No. 7 CSS: An Overview.
  2. Using all the properties we have covered today, create a single, external stylesheet and apply it to both your bio and your resume pages.
  3. Post the new work and link it to your homework page.
  4. Go back into your index.html, artist.html, resume.html and contact.html pages and add div’s.
  5. Create a style.css page in Text Wrangler and link it to your index.html, artist.html, resume.html and contact.html pages. Add the div names in your css page and STYLE them including font, color, size and any other attributes you want to use.
  6. Take any 12 images. They can be photos, illustrations, your artwork, anything you have. If you do not have anything you can pull images from Google images or create different colored boxes and use those as images. Create two different sizes of these images, one thumbnail image and one full size image. The full size image should not exceed 800×600 pixels. Use the “Save for Web” process to optimize the images, saving them in the file format most appropriate for each image. Save these images to the “images” folder you created in week two.
  7. Create HTML / CSS using the thumbnail size of the images that duplicates the functionality of the thumbnail gallery that we went over in class today. Take the thumbnail gallery one step further – link each thumbnail to its full sized image. Post the files and images to your server and put the link to the gallery on your blog.
  1. Add a background image.
  2. Make one of your images link to another website.
  3. Add ALT, HEIGHT & WIDTH properties to all  your images.
  4. Add a border to one of your pages. 

28 thoughts on “Week 14 | Web III”

    1. Your screen shot of your badges is not showing up.
      Your second link is dead.

Comments are closed.