Embed Size (px)
Citation preview
1
Cascading Style Sheets
Cascading Style Sheets sound intimidating. In reality, however, CSS is one of the most convenient tools available to Web developers Rachel Andrew. "The CSS Anthology: 101
Essential Tips, Tricks & Hacks"
Using HTML and JavaScript to Develop Website
2
What we are talking about…
We will look at: » What are CSS
– Advantages and disadvantages» Types of CSS
– Look at embedded CSS– Look at external CSS
» Using Selectors» Using Classes» Positioning Items
– Border – Margin– Padding– Creating a 2 column layout– Creating Navigation Items
3
What are cascade style sheets?
When HTML has a fundamental problem:» it does not separate page content from presentation» Not a good solution to:
– Share a style (e.g., color scheme) among many pages at a site
– Layout a site – forced to use tables within tables (within tables)
» The W3C created cascade style sheets to allow seaperate display format from document content.
4
Web Page with and without CSS
CSS controls text size, style, color.Line spacing, graphic spacing, and many other things
This layout used stylesheets and tables. Much of this could have been done without tables.
Every page within the site, has same text color and look and feel
5
Cascading Style Sheets!
The basic idea: Separate style information from text content
What do they do? » Specify a common set of styles and spacing instructions for
elements on a page. » E.g., a web site with 5 different pages, might use style
sheets to specify things like: – Common size for headers, – default font type,– background images or colors, – margin sizes and – and other page styles.
6
CSS – Advantages/disadvantages
Some advantages of using CSS: » Control - Offers greater page layout controls for all pages at
a site. E.g., can specify margin, indents, line spacing, element positioning, font size, etc.
» Style Separate From Document Structure » Smaller Size? - Can decrease document size - E.g.,
(reducing the number of FONT tags) » Maintainability - Easier site maintenance
Disadvantages: » Browser Support - Not supported in browsers earlier than
I.E. 3.0 or Netscape 4.0.» Browser Implementation - IE and Netscape implement
the standard differently.
Netscape and IE implement many elements slightly different so need testing with both browsers.
7
What we are talking about…
We will look at: » What are CSS» Advantages and disadvantages» Types of CSS
– Look at embedded CSS– Look at external CSS
» Using Selectors» Using Classes» All About Properties
– A big properties example
8
Basic CSS Syntax
Place style info at top of HTML document:
H1 {Color: red; font-size: 24pt; }
H2 { Color: green; font-size: 12pt; }
Notice use of 2 selectors with general syntax: selector:{property:value}
Specifies to make all <H1> tags red text and size 24pt.
Selector - identifies the element to be affected. Includes things like H1, H2, P, EM, LI EM.
property:value - identifies a stylistic property to be defined with some value. Includes things like color: red, font-site: 12pt, font-face Verdana.
9
Types of Style Sheets
Still, style sheets can be used in 3 different ways: 1. Inline Styles - Put the style information in-line the text of the
document. – Would specify the style for a particular line of text in the document.
(highest precedence). 2. Embedded Styles - Embed the style sheet on the top of the
document. – For example, would specify the default color for all items in this web page.
3. External Styles - Collect the style information in an external file and link them into all the needed files at your site. – For example, would provide a file that has all style information (like color of
headers) and include or link that file into all pages of your site.
Note: Its called cascading style sheets because inline style specs override, embedded style specs override,
external style specifications
Note: Style sheets are typically used as a separate file. Then every page that wants that “style” links to the sheet.
10
1 - Inline style sheet information
<body>
<h2 style="color: red; text-transform: uppercase;">
An Unusual Heading</h2>
<h2> A Normal Heading </h2>
</body>
Can specify style sheet info inline with the HTML
Note: Most people seldom use inline style specification. It overrides all other style specifications and therefore effects their control.
11
2 - Embedded example
Place style info at top of HTML document: <HTML><HEAD><STYLE TYPE="text/css">
I {Color: red;}H2 { Color: green; font-size: 12pt; }
</STYLE> <TITLE> Sample web Page </TITLE></HEAD><BODY><H2> Sample Web Page </H2> This is a sample web Page with <i> emphasis</i> added.</body></html>
Note the “style” tag, used in head section.
12
3 - External (or linked) Style Sheets
HTML file looks like: <HTML><HEAD><LINK REL="STYLESHEET" HREF="stylesheet.css" TYPE="text/css"><TITLE> This is a sample web Page with emphasis added</TITLE> </HEAD><BODY><H1> Interesting Example!! </H1>Writing <I>interesting</I> Web Pages is not that hard <I>if</I> you know the <B> HTML </B> language. <H2> A Short Quote </H2>Here is what JFK said . . .<P>Now is the time for all good men to come to the aid of our country.
</BODY></HTML>
External file called stylesheet.css H1 { Color: red;
font-size: 28pt; } H2 { Color: green; font-size: 22pt; } P {margin-left: 44pt; }
This line loads in file stylesheet.css
stylesheet.css contains only these lines. Make sure it has no blank lines and use .css suffix!
13
What we are talking about…
We will look at: » What are CSS» Advantages and disadvantages» Types of CSS
– Look at embedded CSS– Look at external CSS
» Using Selectors» Using Classes» All About Properties
– A big properties example
14
Using CSS Selectors
Type Selectors – Can use lots of different HTML elements:
For example, H1 { Color: red; font-size: 36pt; }
H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; } EM, I { color: green; }
B { color: red; font-size: 18pt; } H1 {Color: red; font-size: 24pt;
H2 { Color: green; font-size: 12pt; } EM { Color: red; }
15
Specifying Properties in Shorthand
So far specify properties one at a time h1 {
font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; }
Can also specify same with the following: h1 { font: bold 12pt/14pt Helvetica; }
16
Specifying a Page Default . . .
Use the * selector to specify a default for page:
* { color: red; font-size: 15pt;}
<HTML><HEAD><STYLE TYPE="text/css">* { color: red; font-size: 15pt;}</style><TITLE> ID Example </TITLE></HEAD><BODY><P>There are 3 ways to define style sheets:<ol><li><b>Inline styles.</b> These are aadded to the HTML tags<li><b> Internal stylesheets: </b> defined at beginning of document.</div><li><b> External stylesheets:</b> defined in <i>an external file</i>.</ol></body></html>
17
Properties - font-family font-family - specifies a family of fonts to use Values: list of fonts to use Applies to: all elements Example:
P { font-family: Veranda, sans-serif } Notes:
» There are 5 possible font-families it is like specifying a generic name. It is a good idea to make one of these last in the list 1. sans-serif (e.g., halvetica or arial) 2. monospaces (e.g., courier or new courier) 3. cursive (e.g., Zapf-chancery) 4. serif (e.g., Times) 5. fantasy (e.g., western, impact, or some other display oriented font)
18
Properties - font-style
font-style - specifies between the normal (default), italic, and or oblique font-face within a font-family. (oblique is slanted text, italic is slanted with more cursive characters.) » Values: normal | italic | oblique » Applies to: all elements » Example:
H1 { font-style: italic }
» Notes: Bold is part of the font-weight not font-style.
19
Properties - font-weight
font-weight - specifies the weight or boldness of the font to use.
Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Applies to: all elements Example:
STRONG { font-weight: 700 } Notes: Allows either a descriptive tag (normal, bold,
bolder or lighter) or a number. Normal is the default = 400. Typical bold is 700. Not all numbers may be supported within a particular font-family and browser have inconsistent support of this feature
20
Properties - font-size
font-size - specifies a size of font to use Values: absolute size | relative size | length percentage Applies to: all elements
» As can be seen from above can be specified 3 different ways: – Absolute size
Values: xx-small | x-small | small | medium | large | x-large | xx-large Example: H1 { font-size: x-large } Notes: These are descriptive terms that reference a table of sizes kept in the
browser.
– Relative Sizes Values: larger | smaller Example: H1 { font-size: larger } Notes: specifies size relative to the parent object.
– Length Sizes Values: number + em | ex | px | pc | mm | cm | in Example: H1 { font-size: 24pt}
21
Font-size cont - Length sizes can be specified differently …
Code Unit Description
px Pixel Number of pixels relative to the monitor resolution
pt Point A unit of measuring type (from publishing) equal to 72 pts = 1 inch
pc Pica A unit of measurement from publishing. 1 = pts or 1/6 inch
em Em A relative measurement equal the with of the capital M in the current font
ex Ex A relative measurement for the height of the width of the letter X in the current font.
in Inches Measures in inches
mm Millimeter Measures in millimeters
cm Centimeter Measures in centimeter
22
Properties - font-color
color - specifies the color of the element. » Values: color_name | RGB Hex Value | RGB New Values » Applies to: all element » Notes: As can be seen from above, specify 1 or 3 ways
– color_name: Use 1 of the 16 color names. values - aqua, gray, navy, silver, ... Example:
» STRONG { font-style: italic; color: purple } – RGB values: Use hex value that fill in the RGB values.
values - 000000, ..., FFFFFF Example:
» STRONG { font-style: italic; color: #FF00FF } – RGB New Values
values - rgb(255,0, 255) or rgb(100%, 0%, 100%) Example:
» STRONG { font-style: italic; color: rgb(255, 0, 255) } » STRONG { font-style: italic; color: rgb( 100%, 0, 100%) }
23
Properties – line-height
line-height - sets height of lines. Values: normal | number | length | percentage Applies to: all element Notes: As can be seen from above, specify 1
or 3 ways Examples:
P ( line-height: 1.2 }
P { line-height: 1.2em }
P { line-height: 120% }
24
Properties – text-indent
text-indent - specifies the amount of indentation from the far left.
Values: length | percentage Applies to: block level elements Notes: As can be seen from above, specify length or percent of
normal text » Examples:
P{ text-indent: 3em }
<HTML><HEAD><STYLE TYPE="text/css"> P { text-indent: 3em } </style><TITLE> Indent Example </TITLE></HEAD><BODY>This is a example of a of a sentence. <P> A new paragraph. This is new paragraph.</BODY></HTML>
25
Properties – background color
background-color - specify the color or RGB value for background color.
Values: color name | RGB value Applies to: all element Notes: Sets the background color of the element.
» Examples: P.warning { background-color: red }
STRONG { font-weight: 900; background-color: silver }
<HTML><HEAD><STYLE TYPE="text/css"> STRONG { font-weight: 900; background-color: silver } </style><TITLE> Background example </TITLE></HEAD><BODY>This is a example of a <strong> Very strong section </strong>.</BODY></HTML>
26
Properties – background color
background-image - specify the background image for an element.
Values: URL Applies to: body tag Notes: Sets the background image for element.
» Examples:
BODY { background-image: URL(back.gif) }
Clearly this means with a CSS with this one tag, I can linkinto all my HTML documents and get common background.
27
Classes In CSS
Classes enable creation of special categories of properties per tag» Can call classes on demand
– For example make some <H1> tags look one way and others a different way.
E.g., suppose this is in a file called stylesheet3.cssH1 { color: green; } H1.important {font: 36pt "Comic Sans"; Color: Blue}
H1.normal {font: 24pt "Arial"; Color: red}
The first part denotes the HTML element.
The second part denotes the “name” or label for the element.
Defines the element and property to set.
28
Using the class ….
Once linked to this style sheet. Have to different ways to create H1 elements:
<H1 CLASS="important"> Check It Out! </H1>
This is an important header
<H1 CLASS="normal"> … </H1>
Note: you can also write a ‘default class’ with no name:.red { color=red }
This can be used in multiple places as such<div class=red> or <b class=red>
29
Class Example . . .
<HTML><HEAD><STYLE TYPE="text/css"> H1 { color: green; } H1.important {font: 36pt "Comic Sans"; Color: Blue} H1.normal {font: 24pt "Arial"; Color: red}</style><TITLE> This is a sample web Page with emphaisis added</TITLE></HEAD><BODY><H1> Normal H1 </H1><H1 CLASS="important"> Check It Out! </H1>This is an important header<H1 CLASS="normal"> Very Interesting Indeed </H1>This is a less important header. </BODY></HTML>
Regular H1 tags use this
Define H1.important and H1.normal classes
<H1>
<H1.important>
<H1.normal>
30
Using ID selectors Allows you to override style properties:
B.important {color:blue; font: 24pt> #red{Color: red}B {font-weight: 700 }I { color: green; font: 36pt "Comic Sans"; }
So you could write the following: <B id=#red> <I id=#red> <B id=#red class=important> <div id=#red>
Specifies anything with id=#red becomes color red
(By Specification only use once per html element) but this is poorly enforced.
31
ID Example . . . <HTML><HEAD><STYLE TYPE="text/css">B.important {font: 18pt }#red { Color: red; font:8pt }b {color: green; } </style><TITLE> ID Example </TITLE></HEAD><BODY>There are ways to define style sheets:<ol><li><b>Inline styles.</b> These are aadded to the HTML tags<li><b id="red"> Internal stylesheets: </b> defined at beginning of document.</div><li><b class='important'> External stylesheets:</b> defined in an external file.</ol></body></html>
Size=18 from important
Color from ID=
Note: The rules on ID are not consistently enforced on all browsers. (Some allow > 1 ID use per document, others overlap differently)
Color from default definition
32
Selectors - Special Built-in Classes – AKA Pseudo classes
There is a set of classes that are special built-in. For example, are 4 common ones used with <a>.
A:link { color: red } A:visited { color: maroon }
A:active { color: lime }
A:hover { color:green }
<HTML><HEAD><STYLE TYPE="text/css"> A:Hover{ color:red }</style><TITLE> Indent Example </TITLE></HEAD><BODY>Welcome to my site<a href=""> home </a> | <a href=""> contact </a> | <a href=""> questions </a> |</BODY></HTML>
When put cursor over link it changes color
Not visited yet
As being clicked
While cursor is over link
33
Objectives . . .
How to create tables» Basic <table>, <tr>, <td> tags
Some arguments with table » Height, width, border
Special “tricks” » Cell text alignment » Padding the columns and Rows » Spanning Columns and Rows» Special Examples
Creating page layouts
34
Hands on Assignment Create an external style sheet that will change the
following HTML to look like the following (note the background color is #c6c6c6)
<HTML><HEAD><LINK REL="STYLESHEET" HREF="labstylesheet.css" TYPE="text/css"><TITLE> This is a sample web Page with emphaisis added</TITLE></HEAD><BODY> Welcome to my page
Note that the default color is blue
<h1> all h1 have different style </h1>
<h2> While using h2 we have complete control of everything </h2>
</body></html>
35
One possible Solution
* { font-color: blue; background: "#c6c6c6"; } H1 { Color: red; font-size: 12pt; } H2 { Color: green; font-size: 10pt; } P {margin-left: 44pt; }
36
Do Only This lab . . . <BODY> <div class=bigcenter>First Annual CSS Test Results </div><table class=t1><th> No </th> <th> Name </th> <th> Score </th> <th> Comments</th> <tr class=yellow> <td> 1 </td> <td> George </td> <td> 56 </td> <td>Missed Lab 1. Got a 60% on Test.</td></tr><tr class=grey> <td> 1 </td> <td> John Smithson </td> <td>100</td> <td>Perfect Score. Great Job.</td></tr><tr class=yellow> <td> 1 </td> <td> Maggie May</td> <td>89</td> <td>Very close to an A. Should have completed last HW on time.</td></tr></table></body></html>
Use the following html to create a page that looks like the Following: (Use embedded CSS)
Border=2 width=100%
Align center, size 36px.
37
One Possible Solution . . .
HTML><HEAD><STYLE TYPE="text/css">.bigcenter { font-size: 36px; color: grey; text-align: center;}.yellow { background: yellow; padding-top: 36px; } .grey { background: #c6c6c6; padding-top: 36px; } .t1 { background:#dddddd; border: 2; width: 100% }
</style><TITLE> Table Lab </TITLE></HEAD><BODY> <div class=bigcenter>First Annual CSS Test Results </div><table class=t1><th> No </th> <th> Name </th> <th> Score </th> <th> Comments</th> <tr class=yellow> <td> 1 </td> <td> George </td> <td> 56 </td> <td>Missed Lab 1. Got a 60% on Test.</td></tr><tr class=grey> <td> 1 </td> <td> John Smithson </td> <td>100</td> <td>Perfect Score. Great Job.</td></tr><tr class=yellow> <td> 1 </td> <td> Maggie May</td> <td>89</td> <td>Very close to an A. Should have completed last HW on time.</td></tr></table></body></html>
