HTML For the World Wide Web.

HTML For the World Wide Web

Cascading Style Sheets (CSS)
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"

CSS Standards HTML, XHTML and CSS are all languages that are international standards The standards are maintained by the World Wide Web Consortium (W3C) CSS1 the first version of CSS was introduced in 1996 CSS2 was available in 1998 An update to CSS2, CSS2.1 unveiled in to correct errors in CSS2 CSS3 is currently under development

CSS1Document Features 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 Document Features 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

3 Ways to use CSS Inline Styles Embedded Style Sheet
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

Inline Styles Embedded Style Sheet
Applied directly to an element through the use of the style attribute. <h1 style="text-align: center; color: red">Type Your Heading Here</h2> Embedded Style Sheet <head> <style type-"text/css"> h1 {text-align: center; color: red} h2, h3 {text-align: right; color: blue} </style> </head>

Levels of Style Precedence
Highest Precedence User-defined Styles Inline Style Sheet Embedded Style Sheet External Style Sheet Browser’s internal style sheet Lowest Precedence

Comments in External Style Sheets
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 */

Sunny Acres 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

Sunny Acres 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.

Sunny Acres A page describing the farm’s petting barn
index.htm home.htm petting.htm produce.htm haunted.htm maze.htm 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 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 corn maze

View the Sunny Acres Web Pages
Download the Sunny Acres folder, extract the files and move the folder to the Documents folder on your computer 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.

Add an Embedded Style Sheet
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.

Tammy’s Layout sketch Sunny Acres Logo The home page has all of the
content 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. List of Links Heading Promotional Photo Heading Heading

Create an External CSS 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}

Link the CSS to the home page
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.

Color Codes 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

Define the Text & Background Colors
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 element body {background-color: white} Save your changes and refresh the home page

Fonts 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

Generic Font Examples

Font Selection 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.

Working with Fonts & Text Styles
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.

Setting the Font Size 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.

Font Size Units There are five standard font units For comparison
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…)

Relative Units 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.

Font Size Key Words 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.

Set the Font Size for h2 Hedings
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.

Controlling Spacing & Indentation
You can control the spacing of letters in words and the spacing of words in a line. The styles are: letter-spacing: value word-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.

Controlling line height
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}

Controlling Text Indentation
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.

Change the spacing of h2 headings
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.

Change the Address Style
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 notepad address {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.

Working with Images 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.

Changing the Image Size
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" />

Add a Background Image 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.

Floating an element on a page
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

Float the Promotional Image
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.

Changing the Margin Style
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 left For example to set the all of the margins on the h2 headings to 10 pixels use the following: h2 {margin: 10px 10px 10px 10px}

Change the Image Margin
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 Styles 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

Border Styles 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 Styles Border Style Border width Border color
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

Border Style Types

Add a border to the Address
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

Width and Height Styles
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}

Set the style of h3 headings
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 heading h3 {width: 20em; padding-left: 1em} Save your file and refresh the home page Verify that the headings have been changed.

Controlling Page Layout with div Containers
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.

Create the outer div 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.

Set the width of the outer div Container
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.

Set the Style for the List of Links
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.

Create the inner div Container
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.

Create the styles for the inner div Container
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.

Setting the Links Display Style
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.

Apply the External CSS to the Other Pages
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

Apply the External CSS to the Other Pages
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.

Turn in your work Upload your Sunny Acres folder to Google Drive
When the folder is finished uploading, click on the Share button. Click on Advanced Change the permission from Private to Anyone with the link can view. Copy the link and past it into your Google Docs Journal.

HTML For the World Wide Web.

Similar presentations

Presentation on theme: "HTML For the World Wide Web."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML For the World Wide Web.

Similar presentations

Presentation on theme: "HTML For the World Wide Web."— Presentation transcript:

Similar presentations

About project

Feedback