Chapter 1 Chapter 2 Chapter 3 Chapter 4

HTML5 ~ CSS & Image Maps ~ Chapter 3


Cascading Style Sheets | Image Alignment | Image Maps |Review

In this chapter of HTML, we will cover cascading style sheets, image alignment, and image maps.

Cascading Style Sheets

a css word cloudCascading style sheets are used for describing the look and the formatting of the Web page. HTML was NEVER intended to contain tags for formatting a document. CSS is one of the most powerful tools a Web designer can incorporate. CSS allows the designer to affect the entire mood and tone of a Web site. CSS can also save a tremendous amount of time and effort. Well written style sheets can be updated quickly and allow sites to change what is prioritized or valued without any changes to the underlying HTML code.

CSS Syntax

A CSS rule consists of a selector and a declaration. The selector points to the HTML element you want to style. The declaration contains one or more declarations that are separated by semicolons. Each declaration includes a property name and a value. The property and the value are separated by a colon.

image of a CSS rule by http://www.w3schools.com/css/css_syntax.asp

By implementing the CSS rule shown above, all document content formatted with an <h2> element would also be blue and 12 pixels in size.

CSS can be implemented three different ways:

The method of styles used is not inclusive. You can use all three methods in the same Web page, or a combination.

Inline Styles

An inline style may be used to apply a unique style for a single element (tag). An inline style loses many of the advantages of a style sheet because is mixes content with presentation. It is recommended that inline style method be used sparingly!

To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. Here is an example of using the text-align property with the paragraph tag and the style attribute to center text:

<p style="text-align:center;">Some text</p>

With inline styles, you have to include the style attribute, property and value every time you want to use it.

Embedded Styles

Embedded styles, also known as internal styles are used per Web page and are inserted into the head section (between open and close head tags) of the Web page.

Here is an example of implementing embedded CSS:

<head>

<style type="text/css">

p {font-weight:normal; color:grey;}

h1 {color:green;}

</style>

</head>

External Style Sheet

cssThe external style sheet uses a separate .css document that is link via the <link> tag in the head section of the HTML document.

To create the external style sheet, you open a text editor document and save it as something.css where something is replaced by the name (one word, all lowercase) that you give your style sheet (I use something relevant to the topic of the website that I am creating). The extension must be .css.

The CSS rules start right at the top of the document. There is NO HTML code in the style sheet. This is what the CSS would look like for a body selector:

/*Changes to the body of the Web page*/

body {

   font-family:arial,georgia,sanserif;

   background-color:yellow;

}

This example, once linked to the HTML document, would change the background color of the page to yellow and would change the font to arial if available, or georgia, or even to any san serif font if necessary.

The CSS rule began with a CSS comment to indicate what changes are occurring as a result of the rule. It is always a good idea to comment to your CSS so that anyone reading your code can understand what is happening, especially as the css starts to get more complicated.

You will need to make sure you link the style sheet to the HTML document using the link tag. Your code should resemble this where url is the file name of the HTML file:

<link href=”url” rel=”stylesheet” type=”text/css” />

Link elements must be placed in the head section of the Web page document. The rel attribute specifies the relationship between the current document and the linked document. The type attribute specifies the style sheet language of the element's contents and overrides the default style sheet language. The style sheet language is specified as a content type (e.g., "text/css"). Authors must supply a value for this attribute; there is no default value for this attribute.

CSS Class

A class can be used several times, so you should use classes for items that you know you're going to use a lot. An example would be if you wanted to give all the paragraphs on your webpage the same styling, you would use classes. Using classes is simple. You just need to add an extension to the typical CSS code and make sure you specify this extension in your HTML. You can use CSS classes with any HTML element! CSS code in classes will override the general CSS code for that element.

class using class
Define a class in the CSS Using the class in the HTML

Image Alignment

By default, images are aligned with the left edge of the Web page. However, they can be moved to the center or the right edge of the Web page.

To align an image to the left, right, or center and keep the image on its own line, you will use a paragraph tag on the left of the image tag. Your code would look like this:

<p style="text-align:right;"><img src="imagefile" alt="alternative text" /></p>

If you wish to wrap the text around the image, then you need to float the picture to the left or the right. Your code to float to the right would look like this:

<img src="imagefile" alt="alternative text" style="float:right;"/>

I like to set up the float to both the left and the right in the external CSS as a class so it is ready to go when I need it.

floating example

Linking an Image

You can make an image into a hyperlink just like you can link text. You will put the anchor tag on the left side of the image tag like this:

<a href="destination.html"><img src="imagefile" alt="alternative text" /></a>

The image will now have a blue frame around the outside indicating that it is a hyperlink. When the user clicks on the picture, they will be taken to the destination indicated as the value of the href attribute in the anchor tag.


Image Maps

note about image mapsAn image map is a picture that contains one or more hotspots. A hotspot is a hyperlink on a section of the picture.

An image map is creating with the <map> </map> element. The image map needs to be named using the name attribute. The hotspots are defined with the <area> tag which is reliant on its attributes which include shape, coords, href and alt. The code for an image map would look like:

image map code

describing the coordinates for an image map

Step-by-step process for creating an image map.

Caution: If you are going to resize your image that is being used as an image map, you must do so with the photo editing program. Do not use height and width attributes with image as this will negatively affect the placement of the hotspots.

Practice: Creating an Image Map

Directions: You will create an image map with a picture of the United States. You will plot your coordinates using a picture editing program such as Windows Paint and hyperlink them to appropriate Web sites. Follow the instructions below to create your Web page with an image map.

Download the image file here: usa_map.jpg.

image map instructions

Assessment: Creating a Cats & Dogs Web Site

Directions: You are going to create a Web page about cats and dogs. The Web page will use an external CSS. All styles must be in the CSS and linked to the html file. The Web page will also include an image map.

Download the instructions here: Cats & Dogs Directions

Download the data files here: dog_cat.jpg, dogs.txt, grass.jpg, puppy.jpg

Download the gradesheet here: Cats & Dogs gradesheet


Resources

If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.


Credits


Transcript of this lesson