Personal tools
  •  

Lesson 7

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Styles

Styles are the current trend and most likely the future trend of web pages. It used to be that you used hidden tables (tables without a border showing) to format web pages, at least the positioning and placement of stuff. Well not anymore. No fear though, you have already learned how to do some of the styles within a web page. One of the coolest things about styles is the ability to build a style sheet. A style sheet is a file or document that contains styles. It then can be linked to a web page or multiple web pages. This is a very powerful feature.

Imagine that you just created a 50 page website for a client. All along you have been working with a representative of the marketing department. The site looks really slick. Only one problem. The boss of the company wants the color of all the headings to be Aggie blue instead of BYU blue. Oh no, you have 50 pages each with multiple headings to change the color in.

With a linked style sheet, no problem. You open up the style sheet and change the color of the defined headings. Now every page that is linked to that style sheet is updated. Style sheets are applied as the page is loaded into a web browser. This allows you to build the page and then apply the appropriate fonts, colors, sizes, and even positioning.

Carefully go through this chapter and make sure you understand styles. You will be building an external style sheet to link to a page.

The goals of this lesson are:

  • Gain an understanding of style sheets and their power.
  • Learn how to build an external style sheet and link web page too it.
  • Learn how to use styles for positioning elements on a web page.

Readings

Day 9
Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days.
ISBN 0-672-32519-5

Elements & Tags

selector {property1: value1; property2: value2} <style>
<link rel="stylesheet" href="style.css" type=text/css" />
color:
font-weight: font-size:
font-style: border:
line-height: border-top:
border-right: border-left:
border-bottom: background-color:
padding: margin:
width: margin-left:
margin-right: float:
position:

Activities

Create a simple web page with a <H1> an <H2> a <DIV>. You should have a paragraph of text (2 or 3 sentences) within your <div> tag. Name your web page lesson7a.html

  • Now create an external style sheet and name this style sheet. style7aa.html
  • Within this style sheet create styles for your <h1> <h2> and <div> tags.
  • Your <h1> font color (color:) should be Navy Blue (or something close)
  • Your <h2> font color should be purple
  • Your <DIV> font should be arial
  • Your <DIV> font size should be 12
  • Your <DIV> font color should be blue

Link your HTML page to the style sheet you created using the <link rel = ... /> tag< within your html page. Save your style sheet (style7aa.css) and your lesson7a.html page and upload them to the FTP site. Make sure you test them out. Now play around with your external style sheet. Change all of the styles to something different than they are. Resave your webpage as lesson7b.html and your style sheet as style7bb.css. Upload both of them to your lesson7 folder on the server. Now comes the real fun. Using a favorite poem or lyrics to a song you like. Use any positioning elements you have read about in the chapter to create a right floating and a left floating element like that shown on page 279, figure 9.12. Save your page as lesson7c.html and upload it to the server. You may use inline or internal stylesheets (style sheets within the html document) for this exercise. Lesson 7a & 7b are worth a total of 5 points, and lesson 7c is worth 5 points for a total of 10 points for this lesson.

Resources

www.webaim.org

Reflective Questions

What are some simple things you can do to insure your web pages are accessible to persons with vision loss?

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . factadmin. (2007, October 09). Lesson 7. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/learn-and-apply-html/lesson-7.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.