COM372-14 : Web Design and Development

Styling

Lesson Number 09, September 15, 2014

Due For This Class

Lesson Breakdown

  1. HTML Review
  2. Hands-on with CSS

HTML Review

Starter HTML Template

A very basic HTML page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PAGE TITLE</title> <!-- DON'T FORGET THE TITLE -->
  </head>
  <body>
  <!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->

  <h1>This is my heading</h1>

  <p>This is a paragraph</p> 

  <!-- AND ABOVE HERE -->
  </body>
</html>

Our starter HTML template is available to download on Github.

<title> vs Title

Only the content within the <body> tag will be shown to the end user.

Your <title> tag will only be shown in search results and in the top of the tab of your browser.

When writing HTML pages, we may have to repeat ourselves - for example, if we are marking up an article we have written that we want to call "When Pigs Fly", we may want to include the title of the article as both our <title> tag and as the first <h1> on the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>When Pigs Fly</title> <!-- DON'T FORGET THE TITLE -->
  </head>
  <body>
  <!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->
  <h1>When Pigs Fly</h1>
  <h2>an article by Kelly Anne Pipe</h2>

  <p>This is a paragraph</p> 

  <!-- AND ABOVE HERE -->
  </body>
</html>

<head> and <body>

Your <head> tag includes information about the page and how to render it. Information in the <head> will not be seen by the end user.

The following tags can go inside of the <head>.

<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>

If you are marking up content with things like <h1>, <p>, etc, this content must go after you close your <head> tag and have opened a <body> tag.

Your <body> is your wrapper for all content that should be seen by the end user.

Your last two things on every page should be a CLOSE for your <body> tag and a CLOSE for your <html> tag.

What is CSS?

Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track.

"What is CSS" is from Mozilla's Developer Network Documentation

Style Rules

CSS styles are applied using a system of rules (or rulesets). The exact syntax for CSS rules is described below. CSS rules:

  1. Identify which HTML elements should have styling applied
  2. Specify the "properties" (color, size, font, and other attributes) of the styled HTML elements
  3. Contain the values that control the appearance of each property

For example, a CSS rule might state:

I want to find every <h2> element on a page, and change the color of text surrounded by these tags to green.

or

I want to find every <p> element with a class attribute of author-name, set the background color to red, resize the text to twice the size of normal paragraph text, and add 10 pixels of spacing around each instance.

Defining Style Rules

Style rules can operate on different sets of items, selected in different ways. For example, they can be directly applied to HTML elements (body, article, nav, list, p, em, strong, etc.), or they can be applied to any elements with custom made classes or IDs . This is the basic form:

selector {
  property1: value;
  property2: value;
  property3: value;
}

The important parts are as follows:

  • The selector identifies which HTML elements are affected by the rule, using actual element names, such as , or other identifiers such as class attribute values. When applied to the actual element names, selector is simply replaced by the name of that block. For classes the syntax is .classname, for IDs, #idname.

  • The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons.

  • The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect attributes such as text color, background color, the position of the element on the page, font type, border color and thickness, and many other appearance and layout controls.

  • The values are the settings that specify details of each property applied to elements. The values are dependent on the property. For example, properties that affect color can use hexadecimal colors like #336699, RGB values like rgb(12,134,22) or color names like red, green, or blue. Properties that affect position, margins, width, height, and others can be measured in pixels, ems, percentages, centimeters, or other units.

Review this specific example:

p {
  margin: 5px;
  font-family: arial;
  color: blue;
}

The HTML element this rule affects is <p> — every <p> in the HTML document or documents that this CSS rule is applied to will display with these styles, unless they have more specific rules also applied to them, in which case the more specific rules will override this rule. The properties affected by this rule are the margins around the paragraphs, the font of the text inside the paragraph tags, and the color of that text. The margins are set to 5 pixels, the font is set as Arial, and the color of the text is set to blue.

A whole set of CSS rules are added to a CSS document to form a style sheet. This is the most basic syntax when writing CSS rules. Some rules are more complex, but not much — probably the coolest thing about CSS is its simplicity.

content from WebPlatform.org's Getting started with CSS

In-Class Activity

Let's try our hand at styling a page using CSS.

  1. Open your project-portfolio in Brackets.
  2. Create a new file and name it css-practice.html
  3. Copy and paste the HTML code from this gist into your css-practice.html file, and save it.
  4. Using the CSS selectors, attributes, and attribute values on our CSS Practice page (also handed out in class), style the page so it looks like the sample.

css-practice-final

  1. When you have finished, save this and upload it to GitHub. Link it from your main index.html in your project-portfolio (also commit that change and be sure to sync with GitHub).
  2. Let me know when you are done!

If you are finished before the end of class:

  1. Try to add classes to your elements. How could we make the different H2s have different colors?
  2. Read this CSS Tricks article about using multiple classes on a single element. How could we avoid repeating ourselves with our font-family declarations?
  3. Begin reading the homework assignment
  4. Start working on Codecademy #3, HTML Basics II (this is due next Monday)

Homework

  • Read The Dao of Web Design. Though this article is 13 years old, it is still considered a "classic" of web design writing and is essential reading for any web designer.
  • Read pages 207 - 224 in your HTML & CSS book.