Style Sheets

HTML CSS (Cascading Style Sheets)

What is CSS?

CSS is a language that means cascading style sheets. Cascading style sheets are used to change properties like font face, size, font in tables, scrollbar color, link color and hover color, and other style attributes on Web sites, without having to use long HTML codes. The coolest thing about CSS is that you can link to an external style sheet, and this sheet can change the style (font size, color, link color, link hover etc.) on your whole Web site just by editing the one style sheet. The problem with CSS is that some properties are supported by both Netscape and Internet Explorer, some are just supported by IE and some are just supported by Netscape.

What does a style sheet look like?

The following example is the WORLD'S BIGGEST style sheet. Well, maybe that's an exaggeration, but I tried to include all the important stuff in this sheet. Attributes are placed between brackets [ and ] and need to be removed, including the brackets, for the code to work. Substitute your attribute for the word "value." Your finished style sheet will be placed between the tag:

Begin style sheet:

A:link
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:visited
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:active
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:hover
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000;

background-image:url(yourimage.gif);
background-color:#000000;

cursor:value [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize }

body
{ background-color: #000000;
background-image:url(value); [url of background image to be used, i.e. background.gif]
background-repeat:value; [repeat, no-repeat, repeat-x, repeat-y]
background-position:valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: [scroll, fixed]

font
font-family: Tahoma, arial, verdana;
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size:value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]

scollbar
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000 }

td
{ font-family: value; [arial, tahoma, verdana, common fonts]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value [2cm, 4cm : two values for four sides, add numerical value] }

input, text area
{ background: #000000 url(yourimage.gif);
font-family: tahoma, arial, verdana;
color: #000000;
border-style: value [dotted, dashed, solid, double, groove, ridge, inset, outset];
border-color: #000000;
border-width: valuepx [numerical value, 5, 6, 8...] }


In angle brackets: /style

End style sheet

CSS Vocabulary

Link: regular text link
Visited: link that has already been visited
Active: link that you click on
Hover: link with your cursor over it

background-image: background image of your link on hover
background-color: background color of your link on hover

By changing the link attributes above you can remove the underline from links, add a background image on hover, etc. You can substitute underline, overline etc. for the word "value" in the above style sheet and remove everything between [ and ] including the brackets.

• underline
• underline overline
• overline
• line-through
• none
• blink  (this is for Netscape only =)

body: all of your body attributes go in this CSS tag
background-color: the color of your background
background-image: the image you want in the background
background-attachment: If you add "fixed" here, the text will scroll and the background won't
background-repeat: attributes of your background

Here is a list of the attributes you can use in the background-repeat tag to change how your background will appear on your page:

• repeat Adding this tag just makes your background image tile like it does with the regular background tag.
• no-repeat Adding this tag makes your background image appear in it's regular size in the upper left hand corner of your page, the image shows only once.
• repeat-y Adding this tag makes your background image tile vertically on your page, along the left margin.

• repeat-x Adding this tag makes your background image tile horizontally on your page, along the top margin.

You can place your background image anywhere on your page by using percentages and a background-position attribute:

 In angle brackets

STYLE TYPE="text/css">

BODY {background-image: url(your file name.gif); background-repeat: no-repeat;background-position: 0% 0%}

In angle brackets /STYLE>

The first percentage is for your horizontal alignment. The second percentage is for your vertical alignment. For instance, if you wanted your background image to be in the top center of your page, your percentage would be 50% 0%.

CSS Vocabulary Fonts

font-family: the font type you would like to use on your site
color: font color
letter-spacing: amount of space in between the l e t t e r s of your font
font-weight: You can change the text attributes to bold, bolder and specific font weights in the above code by adding the font-weight tag:

• lighter:  font-weight:lighter
• normal:  font-weight:normal
• bold:  font-weight:bold
• bolder:  font-weight:bolder
• 100:  font-weight:100
• 600:  font-weight:600
• 900:  font-weight:900

font-size: You can change the font attributes from xx-small to xx-large in the above code by adding the font-size tag:

• xx-small:  font-size:xx-small
• x-small:  font-size:x-small
• small:  font-size:small
• medium:  font-size:medium
• large:  font-size:large
• x-large:  none; font-size:x-large
• xx-large:  none; font-size:xx-large

Or you can just use pt. sizes for fonts:

• 12pt:  font-size:12pt
• 18pt:  font-size:18pt

Setting up A Basic Style Sheet

You start your style sheet with this tag:
In angle brackets: style type="text/css">


and end it with this one:
In angle brackets /style>

All of your attributes will go in between those two tags. For instance, if you wanted just a style sheet to remove the underline from your links, you would use this style sheet:

HTML Exercise~ Local Style Sheets

Set up a local style sheet. Using the supplied code replace the code with your oun text. Then set up an internal style sheet.

Designer Research 5x5x5

Stefan Sagmeister

Look up the work of 5 or more of the world's top designers. Find out 5 interesting points about the each of you 5 chosen designers related to their career as a designer and 5 designs by them that shows off their distinct style.

You can select from the list below of graphic designers or any genre of design: graphic design, fashion, costume, jewelry design, furniture, industrial design, architecture, landscape, interior, urban, game design, skateboard/skate park, amusement park,  board game design, web design,  product, packaging, brand, communication design, user interface/experience design,...


You will share your favourite designer with the class- 5 interesting points related to their career, and 5 images.

Later, we are going to try to adopt their style to create something cool.

Share your favorite designer with the class in this Google Doc:
https://docs.google.com/document/d/1NLQctSb3KuQGZ35cDddZGkIl0whvjQL5HnhDq7ixudw/edit?usp=sharing.

Here are some famous graphic designers:

1. David Carson
2. Armin Hofmann
3. John Maeda
4. Michael Bierut
5. Saul Bass
6. Stefan Sagmeister
7. Paula Scher
8. Paul Rand
9. Peter Saville
10. Massimo Vignelli
11. Jessica Walsh
12. Shigeo Fukuda
13. Erik Spiekermann
14. Rick Poynor
15. Wim Crouwel 
16. Matthew Carter
17. Wolfgang Weingart
18. April Greiman
19. Abram Games
20. David Airey
21. Louise Fili
22. Seymour Chwast
23. Irma Boom
24. Marian Bantjes
25. Lester Beall
26. Henry Steiner
27. Anton Stankowski
28. Susan Kare
29. Jon Hicks
30. Katherine McCoy
31. Shepard Fairey

TED: Designer Stefan Sagmeister-shares happy design

CSS- Cascading Style Sheets

Style Sheets

STYLE Sheets: A type of template file consisting of font and layout settings to give a standardized look to web based documents. Design attributes are embedded in the STYLE Sheet so the whole document takes on a specific intended look. A STYLE sheet can be either Local, Internal, or External.

Anatomy of a style sheet:

Different Types of Style Sheets

Different type of style sheets

1. Local Style Sheets: Information goes within the HTML tags like this for example
   "P STYLE"=
2. Internal Style Sheets: Information goes in the "HEAD" " /HEAD" tags and also between "STYLE" "/STYLE"  tags.
3. External Style Sheets: Information is saved on a separate document and attached to each sheet via a link within the HEAD tag.

Learn CSS with the Code Academy:

https://www.codecademy.com/learn/learn-css

Here are a few attribute links:

www.w3schools.com

Web Page Project

You are to design a web page. The subject matter is your choice, but you should consider your design and organization based on your theme.

Include the following:

1. All of the tags should be correct html
2. Index Title
3. Background color/image
4. Large Heading
5. Smaller Heading
6. Horizontal Line
7. A List
8. Information organized in a table.
9. Some information in paragraph form.
10. Link(s) to another site(s).
11. Coloured links
12. Your email address
13. An html challenge
14. Creative design
15. Strong composition, easy to read
16. Lay-out and organization suites the subject matter.

You can include more if you wish for bonus marks.

HTML Tables

We are going to make a checkerboard table:

Checkerboard Table Exercise
Table Tags:
<TABLE>
<TR> </TR> Table Row-add a new line.
<TR> <TD> </TD> Table Data-how to add information, and/or a new column.
</TR> </TABLE>

Make a checkerboard using table tags.

Instructions:

1. First start a new html page using the basic formula from the first day.  Open and close your html using the standard html tags. Remember to save as a "checkerboard.html"
2. Within the <BODY> tags of your html document, start your table with <TABLE> tag to open and close your table with </TABLE> .
3. Each time you add a new line you type in <TBODY> <TR> table row.
4. Each time you add some info into a column, put <TD>table data </TD>around it.
5. Then you put a </TR>at the end of the row.
6. If you want to add another row, add another <TR> and end with </TR>.
7. You will need to set the width and height of each cell within each TD tag, type WIDTH ="150" HEIGHT="150. and don't forget the ""s
8. To add colour to your table cells, it also goes within the TD tag td bgcolor="#FFFF00".

You are to alternate your colour in each cell 5 x 5 cells good luck
Tables are great, because you can align things on your page without having to have everything in the center of your page. Without tables, you can't put things next to each other (cascading style sheets will replace tables when everyone decides to upgrade their browsers, the older browsers still can't read CSS so most people still use tables).

Here are some examples of simple tables. Microsoft Internet Explorer and Netscape don't show tables the same way, even if you use the same codes.
<TABLE>
<TR>
<TD>Cell 1 </ TD>
<TD>Cell 2 </ TD>
</TR>
</TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

Adding a border to tables

Cell 1 Cell 2 Cell 3 Cell 4

Cell 1 Cell 2 Cell 3 Cell 4

Adding color to tables

Cell 1 Cell 2 Cell 3 Cell 4

Cell 1 Cell 2 Cell 3 Cell 4

Cell 1 Cell 2 Cell 3 Cell 4

Cell 1 Cell 2 Cell 3 Cell 4

How do I get rid of the border? Just add the tag border="0" to your table tag:

Cell 1 Cell 2 Cell 3 Cell 4

Cell 1 Cell 2 Cell 3 Cell 4

row 1 rows 1-3 row 1 row 1 row 2 rows 2-3 row 2 row 3 row 3

row 1 rows 1-3 row 1 row 1 row 2 rows 2-3 row 2 row 3 row 3

Crazy Colours cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8

Lissa Explains it All cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8

Setting widths in tables? Just add the width tag with specific widths to your table tag. You can also specify percentages in the tag, for instance . Just make sure the widths and percentages add up to 100%.

Cell 1 Cell 2

Cell 1 Cell 2

Adding a background to the table. It's very simple to add a background to a table. In the table tag (it's the first tag in your table) add "background="yourbackground.gif." Like this:

yourbackground.gif

">

A background will fill your whole table.

Cell 1	Cell 2
Cell 3	Cell 4

Just need a background in one or more cells of your table? Add the background to the individual cell like this:

Cell 1	Cell 2
Cell 3	Cell 4

How do I frame an image with a table border?  Framing an image is very easy. Just enclose your image in a simple table with a border. You can choose any color you like, and any size border width. Just change the information you see in bold text to your own information:

5

" bordercolor="9966ff" cellpadding="0" cellspacing="0">



bird
.gif" width="50" height="50" alt="bird">

If you need a double border, try this:

5

00ff00" cellpadding="0" cellspacing="0">



5
" bordercolor="9966ff" cellpadding="0" cellspacing="0">



bird
.gif" width="50" height="50" alt="bird">

HTML Exercise~ Checkerboard Table

Make a table with five rows and five columns. Add a colour to every other cell. Then put a different colour in the blank cells. You will have to set table widths to see the colours. And finally I want you to put an image into the center square (make sure it is saved as a “jpg”). Your final result should look like a checkerboard with a picture directly in the center.

 

Table HTML Vocabulary

• Table The table tag looks like this: . All of your table information goes between these two tags to make up a table. All tables start with the tag and end with the tag.
• Table Row An individual row that contains at least one data cell. On this page I've used two data cells. The tag looks like this: .
• Table Data An individual cell in a table row. The tag looks like this: . The table, table row, and table data tags always nest like this:
  
  Here is an example of a table with rows and cells:

Link Scavenger Hunt

Start a new html site and try this link exercise, changing the URL [Uniform Resource Locator AKA web address AKA http: www...] or what's between the A HREF=" _____" /A tags and "click here"

Note: You will have to change/retype the quotes in notepad

<HTML>

<HEAD>
<TITLE> donna's web sites </TITLE>
</HEAD>

<BODY>

<H1>My Web Sites</H1>
<HR>
<P>Here are some of my chosen web sites- <em>check them out:</em> </P>

<OL>
<LI><A HREF=”http://www.the1staddress.com”>click here</a> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>

</OL>
<A HREF="mailto:donna.usher@shaw.ca">click here to contact me</A>

</BODY>
</HTML>

List of suggested sites:

1. browser
2. map site/travel site
3. music site
4. video site
5. weather
6. news source
7. an amazing site
8. a terrible site
9. html tutorial
10. choice

Html Vocab- Links, Email, Lists

Link Tag.

<A HREF=”http://www.theaddress.com”>  something to on click here <A >

(substitute your own info where you see bold text):

E-mail Link.

This is called a "mailto" and this is how you do it

(substitute your own info where you see bold text):

<A HREF=”mailto:donna.usher@shaw.ca”>  contact <A >

Buttons.

To add a button image to a mailto link (you could add this to any link) this is what you do:
<A HREF=”mailto:donna.usher@shaw.ca”> < IMG SRC="myphoto.jpg"  > <A >

List Tags. [surprisingly lots to learn about lists]

How do I make numbered (ordered -OL) lists?   Making a numbered list is really easy, and it's a great tool for organizing information on your Web site:

<OL>
<LI > Ballet  </LI>
<LI > Tap </LI>
<LI > Jazz </LI>
<LI > Modern </LI>


It will look like this:

1. Ballet
2. Tap
3. Jazz
4. Modern

How do I make bulleted (unordered or UL) lists?   A different type of list:

<UL>
<LI > Modern </LI>
<LI > Jazz </LI>
<LI > Tap </LI>
<LI > Ballet  </LI>
<OL>

It will look like this:

• Ballet
• Jazz
• Tap
• Modern 
  

There are different kinds of lists. Sorry, my code explanations got all fuddled. If you are interested, you can find all the code here: https://www.w3schools.com/html/html_lists.asp

• Ballet
• Jazz
• Tap
• Modern

You can make the circles in the above list squares instead by adding type="square" into the code        

• Ballet
• Jazz
• Tap
• Modern

You can combine ordered and unordered lists to make outlines. The following code is just an example of what you can do, you can experiment with this to make your own:

1. Dance Types
   
   
   
   • Ballet
     
   • Jazz
     
   • Modern
     
   • Tap
   
   
2. Dance Movies
   
   
   
   • Turning Pointe
     
   • Chorus Line
     
   • Tap
     
   • Center Stage
     

Sometimes your lists will be split up on your page between headers, and you may need to start a list from a different number. 

5. Ballet
6. Tap
7. Jazz
8. Modern

To substitute Roman numerals replace the 

1. Ballet
2. Tap
3. Jazz
4. Modern

Need alphabetical order instead? 

1. Ballet
2. Tap
3. Jazz
4. Modern