Download
1 / 57
570 likes | 816 Views
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 (
E N D
1. HTML For the World Wide Web
2. 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” Cascading Style Sheets (CSS)
3. 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 CSS Standards
4. 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. CSS1Document Features
5. 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 CSS2 Document Features
6. 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 3 Ways to use CSS
7. Applied directly to an element through the use of the style attribute.
<h1 style=“text-align: center; color: red”>Type Your Heading Here</h2>
Inline Styles
8. Levels of Style Precedence
9. 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 */ Comments in External Style Sheets
10. 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
11. 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
12. Sunny Acres
13. 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.
View the Sunny Acres Web Pages
14. 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. Add an Embedded Style Sheet
15. Tammy’s Layout sketch
16. 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} Create an External CSS
17. 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. Link the CSS to the home page
18. 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, Color Codes
19. 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 Define the Text & Background Colors
20. 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
Fonts
21. Generic Font Examples
22. 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. Font Selection
23. 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.
Working with Fonts & Text Styles
24. 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. Setting the Font Size
25. 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…) Font Size Units
26. 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. Relative Units
27. 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.
Font Size Key Words
28. 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. Set the Font Size for h2 Hedings
29. 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 Spacing & Indentation
30. 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 line height
31. 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. Controlling Text Indentation
32. 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 spacing of h2 headings
33. 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.
Change the Address Style
34. 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" />
Save your file and open the index.htm file in your browser. Verify that the scarecrow image is a link to the home page. Working with Images
35. 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" /> Changing the Image Size
36. 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. Add a Background Image
37. 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 Floating an element on a page
38. 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. Float the Promotional Image
39. 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} Changing the Margin Style
40. 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.
Change the Image Margin
41. 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 Padding Styles
42. 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
43. 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
Border Styles
44. Border Style Types
45. 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
Add a border to the Address
46. 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}
Width and Height Styles
47. 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. Set the style of h3 headings
48. 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. Controlling Page Layout with div Containers
49. 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. Create the outer div Container
50. 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 width of the outer div Container
51. 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. Set the Style for the List of Links
52. 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 inner div Container
53. 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.
Create the styles for the inner div Container
54. 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. Setting the Links Display Style
55. 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
56. Open the maze.htm file in notepad.
Repeat the previous steps using a background-color value of (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. Apply the External CSS to the Other Pages
57. 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. Turn in your work
