for the world wide web. a style sheet is a set of code that describes the layout and appearance of...
TRANSCRIPT
For the World Wide Web
A style sheet is a set of code that describes the layout and appearance of a web page.
HTML specifies the content and structure of a web page but not necessarily the appearance.
To create a document design we use a different language. The most common style sheet language is Cascading Style Sheets (CSS)
We have already used some CSS in the first two lessons
style="text-align: center"
HTML, XHTML and CSS are all languages that are international standards
The standards are maintained by the World Wide Web Consortium (W3C) http://www.w3.org
CSS1 the first version of CSS was introduced in 1996
CSS2 was available in 1998 An update to CSS2, CSS2.1 unveiled in 2002
to correct errors in CSS2 CSS3 is currently under development
CSS1 introduced the following styles◦ Fonts: Setting the font size, type, & other
properties◦ Text: Controlling text alignment and applying
decorative elements such as underlining, italics and capitalization
◦ Color: Specifying the background and foreground colors of various elements
◦ Backgrounds: Setting the background image for an element
◦ Block-level elements: Setting the margins, internal space, and borders of block-level elements.
CSS2 added the following styles to CSS1◦ Positioning: Placing elements at specific
locations on the page.◦ Visual formatting: Clipping and hiding element
content.◦ Media types: Creating styles for various output
devices Printers Mobile devices
◦ Interfaces: Controlling the appearance and behavior of browser features such as scroll bars and mouse cursors
Inline Styles◦ Easy to use by applying directly to the element that the
style affects◦ Not easy to duplicate across the entire website◦ Inserted directly in the HTML content code
Embedded Style Sheet◦ Collect all of the styles used in a web page in the <head>
section of the page.◦ Allows styles to be applied to multiple elements◦ Limited to one page
External Style Sheet◦ Can apply styles to multiple elements on multiple pages◦ Allows for quick changes to the entire website
◦ Applied directly to an element through the use of the style attribute.
<h1 style="text-align: center; color: red">Type Your Heading Here</h2>
<head><style type-"text/css"> h1 {text-align: center; color: red} h2, h3 {text-align: right; color: blue}</style>
</head>
Browser’s internal style sheet
External Style Sheet
Embedded Style Sheet
Inline Style Sheet
User-defined Styles
Highest Precedence
Lowest Precedence
External CSS are separate files from the HTML files. Comments in an External CSS are coded using the /* to start the comment and */ to end the comment. Any text in between these two comment marks will be ignored by the CSS.
/*Text typed between these two CSS comment marks will be ignored. White space is also ignored so CSS styles can be placed on different lines and indented */
Tammy Nielsen and her husband Brent live and work at Sunny Acres, a 200 acre farm near Council Bluffs, Iowa. Over the past 25 years, the Nielson family has expanded the farm’s operations to include:◦ A farm shop, which sells fresh produce, baked goods, jams and
jellies, and gifts.◦ A pick-your-own garden, which operates from May through
October and offers great produce at discounted prices.◦ A petting barn, with over 100 animals and the opportunity to
bottle-feed the baby animals.◦ A corn maze, with over 4 miles of twisting trails through
harvested corn fields.◦ A Halloween Festival featuring the corn maze haunted with
dozens of spooks and tricks.◦ Special holiday events during the winter
Tammy created a website for Sunny Acres several years ago to make information about the farm easily accessible to her current customers. The website has become outdated, so Tammy would like your help to enliven it with a new design. She has several pictures she wants to use on the site and has ideas for the look and feel of each page. She needs your help to apply CSS to improve the site.
The page that users see when first accessing the site.
The home page, describing the operations and events sponsored by the farm
A page describing the farm’s petting barn
A page describing the farm shop and pick-your-own garden
A page describing the farm’s Halloween Festival & haunted maze
A page describing the farm’s corn maze
Save the nine images on the class website in a new folder called Sunny Acres.
Down load the seven files in the download box on the class web site and save them to the Sunny Acres folder.
Open each of the seven files using notepad and add your name and date to the comment sections.
Review the HTML code in each file to become familiar with their structure.
Open the home.htm file in your browser and click the links at the top of the page to view the current appearance of each page.
Return to the home.htm file in notepad. Directly above the closing </head> tag, insert
the following embedded style sheet: <style type="text/css"> h2, h3 {color: green}
</style></head> This will set the color of all h2 and h3 headings
on this page to green Save your changes and refresh the home page.
Sunny Acres Logo
List of Links
Heading
Promotional Photo
Heading
Heading
------------------------------------------------------------------------------------------------
--------------------------------------------------------------------
• -------------------• --------------------• --------------------
The home page has all of thecontent that Tammy needs, but its design needs work. Tammy has sketched the way she would like the page to look. She would like a consistent look on all of the other pages. To do this you will use an external cascading style sheet.
Open the farm.css file in notepad Below the closing comment mark */ add the
following style to center the address tag on any page it appears.
*/address {text-align:
center}
We need to link the farm.css file to home.htm file. To do this we need to add a <link> tag to the head section of the home.htm file.
Return to the home.htm file in notepad. Between the closing </style> tag and the closing
</head> tag insert the following:
<link href="farm.css" rel="stylesheet" type="text/css" />
This tells the browser to apply the styles found in the farm.css file to the home.htm page. Look up the <link> tag in the HTML book to learn what each of the attributes control. Save your changes and refresh the home page.
Look at the inside back cover of the HTML book. There you will find a fold out page with codes for colors.
Colors can be specified as a ◦ Red, Green, Blue (RGB) triplet or ◦ Hexadecimal number code
These codes will be used in style attributes to set the color of text, shapes, backgrounds and foregrounds on web pages.
There are 17 colors that are commonly used and can be specified by name:◦ Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon,
Navy, Olive, Orange, Purple, Red, Silver, Teal,White, Yellow
Return to the home.htm file in notepad. Change the style for the h2 and h3 headings
<style type="text/css">
h2, h3{color: white; background-color: rgb(0, 154, 0)}</style>
</head> Save your changes Return to farm.css and insert the following
above the address elementbody {background-color: white}
Save your changes and refresh the home page
By default browsers display web page text in a single font, usually Times New Roman. You can specify a different font for any page element using the style:
font-family; font1, font2, font3, font4 The fonts can either be a specific font or a generic
font. Browsers recognize five generic font groups
◦ Serif◦ Sans-serif◦ Monospace◦ Cursive◦ Fancy
Within a font family there are a variety of different fonts and you do not know if a specific font is loaded on the users’ computers. CSS allows you to choose a list of fonts to be used in the order that they appear in the style. For example:
font-family: Arial, Helvetica, ‘Trebuchet MS’, sans-serif
This tells the browser to first look for the Arial font; if Arial is not available look for Helvetica, then Trebuchet MS. If none of these fonts are available use the generic sans-serif font.
Note that font names with more than one word must be enclosed in single or double quotes.
Apply the san-serif font to the body text using the external style sheet
Return to the farm.css file in notepad Add the following style to the body element.
body {background-color: white; font-family: Arial, Helvicia, sans-serif}
Save your changes and refresh the home.htm file in your browser. All of the text should now be displayed in a sans-serif font.
Tammy would like the Welcome heading on the home page to be displayed in slightly larger text than the rest of the text on the site. The style to change the size of text is:
font-size: length Where length is a length measurement
◦ A unit of measurement◦ A keyword description◦ A percentage of the size of the element◦ A keyword expressing the size as a percentage of
the element.
There are five standard font units◦ mm (millimeters)◦ cm (centimeters)◦ in (inches)◦ pt (points)◦ pc (picas)
For comparison◦ 72 points = 1 inch ◦ 12 points = 1 pica◦ 6 picas = 1 inch
Units can be expressed as ◦ whole numbers (1, 2, 3…) ◦ Decimals (0.5, 1.6, 3.9…)
To cope with a variety of devices that are used to display web pages, designers choose to use relative units which are expressed relative to the size of other elements on the web page.
The em is a unit that can adapt to different output devices.◦ 1em is equal to the current font size. ◦ 2em means 2 times the size of the current font.◦ If an element is displayed with a font of 12 pt,
then 2em is 24 pt.
There are seven keywords that can be used to specify font size.◦ xx-small◦ x-small◦ small◦ medium◦ large◦ x-large◦ xx-large
Browsers are configured to display a specific font size for each of these seven keywords.
Return to the farm.css file in notepad Below the body style add the following:
h2 {font-size: 2em} This will make all of the h2 heading fonts
two times the size of the body font. Save your file and refresh the home page.
Verify that the headings are larger than the body.
You can control the spacing of letters in words and the spacing of words in a line.
The styles are:letter-spacing: valueword-spacing: value
Where value is the size of the space between letters or words.
The units used for spacing values are the same as the units used for font size.
The spacing between lines in an element can be controlled using the following style
line-height: length Where length is a specific length or a
percentage of the font size. For example to double space a paragraph
the style would be:p {line-height: 2}
To control the indentation of the first line of a block of text use the following style:
text-indent: value Where value is a length expressed as an
absolute or relative units or as a percentage of the width of the text block.
The units used for spacing values are the same as the units used for font size.
Tammy thinks the headings are too crowded and would like to increase the spacing between letters to spread them out across the page.
Return to the farm.css file in notepad. Add the following to the h2 style:
h2 {font-size: 2em; letter-spacing: 0.4em; text-indent: 1em}
Save the file and refresh the home page.
Tammy thinks that the address text at the bottom of the page is too large and would like it to be smaller, non-italics, small caps, sans-serif font.
To accomplish this change we can modify the address style to make all of these changes.
Return to the farm.css file in notepadaddress {text-align: center; font: normal small-
caps 0.8em sans-serif} Save the file and refresh the home page.
Verify that the address line changed.
Open the index.htm file in notepad After the <div> tag insert the following inline image:<img src="salogo.gif" alt="Sunny Acres" /> <br/> Tammy wants to add an animated GIF to be a link to
the home page. To do this add the following below the salogo.gif image tag:
<a href="home.htm"><img src="scarecrow.gif" alt="animated GIF"
style="border-width: 0" /></a> Save your file and open the index.htm file in your
browser. Verify that the scarecrow image is a link to the home page.
Browsers will display images at the same size that the images are saved. You can specify the number of pixels used to display an image.
Return to the index.htm file in notepad Specify the size of the salogo.gif file by adding the
following:<img src="salogo.gif" alt="Sunny Acres"
width="599" height="223" /> <br/> Specify the size of the scarecrow.gif file by adding the
following: <img src="scarecrow.gif" alt="animated GIF"
width="500" height="300" style="border-width: 0" />
Tammy has another suggestion for the splash page. She would like to change the background from plain white to the image found in the background.jpg file.
Return to the index.htm file in notepad. Insert the following in the opening <body>
tag.<body style="background-image: url(background.jpg)"> Save your file and refresh the index.htm file
in your browser. Verify that the background has changed.
Tammy wants to change the way the promotional image displays on the home page. She does not like the way the image forces a large space between the heading and the paragraph. She would like the image placed along the right side margin and the paragraph to wrap around it. You can do this by floating the image. To float an element apply the following style:
float: position Where position is left, right or none
Return to the farm.css file in notepad. At the bottom of the file add the following:
#promoimage {float: right}
This style uses the id promoimage that is attached to the <img> tag in the home.htm file to identify the image that is to be floated.
Save your file and refresh your home page. Verify that the image has floated to the right and that the paragraph has wrapped around it.
CSS supports several styles that set an elements margins◦ margin-top: length◦ margin-right: length◦ margin-bottom: length◦ margin-left: length
Where length is expressed in the same units used for the font size.
These four margin styles can be combined into a single style:
margin: top right bottom leftFor example to set the all of the margins on the h2 headings to 10 pixels use the following:
h2 {margin: 10px 10px 10px 10px}
Tammy would like more space between the paragraph text and the promotional image on the home page. She would like the left and bottom margin increased by 1em. The top and right margins are fine the way they are so they can be set to 0em.
Return to the farm.css file in notepad. Add the following margin style to the promotional
image style
#promoimage {float: right; margin: 0em 0em 1em 1em}
Save your file and refresh the home page. Verify that the left and bottom margins have increased.
Padding is way of adding white space around the content of an element.
Padding Styles◦ padding-top: length◦ padding-right: length◦ padding-bottom: length◦ padding-left: length◦ padding: top right bottom left
CSS supports three types of styles for box model borders◦ Border width◦ Border color◦ Border style
There are four styles that affect the◦ border-top◦ border-right◦ border-bottom◦ border-left
By combining these three types of styles with the four sides we get 12 different ways to change a border
Border width◦ border-top-width: length◦ border-right-width: length◦ border-bottom-width: length◦ border-left-width: length◦ border-width: top right bottom left
Border color◦ border-top-color: color◦ border-right-color: color◦ border-bottom-color: color◦ border-left-color: color◦ border-color: top right bottom left
Border Style◦ border-top-style: type◦ border-right-style: type◦ border-bottom-style: type◦ border-left-style: type◦ border-style: top right bottom left
Having discussed a number of options for border styles, Tammy has selected a double green border 0.5em in height to be added above the address on every page. To keep the border from crowding the address she wants to increase the padding between the text and the border to 1em
Return to the farm.css file in notepad Add the following styles to the address element
address {text-align: center; font: normal small-caps 0.8em sans-serif; border-top: 0.5em double green; padding-top: 1em}
Save your file and refresh the home page. Verify that the double line is displayed above the address
To control the width and height of an element on a web page CSS uses the following styles:◦ width: value◦ height: value
Where value is expressed in the same units used for the font size.
An example of setting the width and height of a paragraph:
p {width: 500px; height: 75px}
Tammy doesn’t like the appearance of the h3 headings on the home page. Currently the headings extend all the way across the page. She would like them to be the same width as the text that follows them on the page.
Return to the farm.css file in notepad. Insert the following style directly below the
style for the h2 headingh3 {width: 20em; padding-left: 1em}
Save your file and refresh the home page Verify that the headings have been changed.
Division <div> containers let you identify sections of your page and apply styles to everything within the <div> container.
To create a <div> container place an opening <div> tag at the beginning of the container and a closing </div> tag at the end.
To label the container use the id attribute and give the container a name
<div id="name"> Use the id in the CSS to create the style for the
container.
Tammy wants to modify the page layout to limit the length of the h1 green line.
Open the home.htm file in notepad. Directly below the opening <body> tag insert
<div id="outer"> Scroll down to the bottom of the file. Driectly
above the closing </body> tag insert the following:
</div> Save your changes to the file.
Return to the farm.css file in notepad. Add the following style to the bottom of the
file#outer {width: 50em}
Save your changes and refresh the home page. Verify that the width of the page has changed.
Tammy has included a list of links at the top of the home page. She would like to display them to the left of the Sunny Acres introduction. The links are in a <div> container of their own with the id="links"
Return to the farm.css file in notepad. Add the following style to the bottom of the file:
#links {float: left; width: 10em; background-color: white; border-style: outset; border-width: 0.5em}
Save your file and refresh the home page. Verify that the links have been changed.
Tammy thinks the page would look better if the text did not wrap around the links box. She would like you to put the introduction in a separate column. You can do this by placing the introduction in a <div> container.
Return to the home.htm in notepad. Directly above the opening <h2> tag for the Welcome
title, insert the following:<div id="inner">
Directly above the opening <address> tag insert the following:
</div> Save the changes to your file.
Return to the farm.css file in notepad. Add the following style to the bottom of the
file:#inner {margin-left: 12em; padding:
1em; border-left: 0.1em; solid green} Save the changes to your file and refresh
the home page. Verify that the introduction has been reformatted.
Tammy likes the way the page looks but thinks that the links are too hard to read. She thinks that it would be better if each link was on a separate line. You can do this in the CSS by setting the display style of the links.
Return to the farm.css file in notepad. Directly below the address style add the following:
a {display: block; margin 0.3em} Save your file and refresh the home page. Verify
that the links have been placed on separate lines.
Tammy is happy with the home page and wants to apply the same styles to each of the other pages on the site. She wants each page to have a different color on the heading lines. To do this you can insert an embedded style on each page.
Open the haunted.htm file in notepad. Directly above the closing </head> tag insert the
following:<style type="text/css">
h2, h3 {color: white; background-color: black}</style><link href="farm.css" rel="stylesheet" type="text/css" />
Save the changes to the haunted.htm file
Open the maze.htm file in notepad. Repeat the previous steps using a background-
color value of rgb(200, 105, 0) Open the petting.htm file in notepad Repeat the previous steps using a background-
color of blue. Open the produce.htm file in notepad. Repeat the previous steps using a background-
color of red. Save all of the files. Return to the home page and
click on the links for each page. Verify that the styles and colors are working.
Take a screen shot of each page and paste them into a word document with your name, period and date in the header.
Print a copy of the .htm and .css files. Staple all of the pages together and turn
them in.