Embed Size (px)
Citation preview
1
CSS Background
2
The Big Picture• Browsers follow an object model
– First it creates a DOM (document object model)
– Interprets the HTML and creates all page elements (sub objects)
• Uses CSS to apply properties to each sub-object in the DOM (where the CSS designates a property to apply)
• CSS stylesheets were first called “property sheets”
3
CSS
• CSS = Cascading Styles Sheets
• A way to style HTML. – Whereas the HTML is the content, the
style sheet is the presentation of that document
• Everything was once organized with tables…
4
Inspiration
• Zen Garden– http://www.csszengarden.com/
• Note Browser differences
5
Why CSS
• Clean up the mess
• Most (older) sites use tables and font tags– None of which conveys semantic meaning
<font size=“+3” face = “helvetica” color = “red”>PageTitle</font>
• What good is a font tag to a speech-synthesis browser?
6
Why CSS
• Search engines
• Increase accessibility
• Easier to maintain – Easier to make site wide changes
• Can be used site wide
7
HTML vs. CSS<h2><font color=“purple”>This is purple</font><h2>
• This has to be applied EACH time
VS.
h2{color:purple;}
• This is universal to all selectors named h2
8
Cascading…what does that mean?
• Provisions for conflicting rules• Priority:
– Browser default – External style sheet – Internal style sheet (inside the <head> tag) – Inline style (inside an HTML element) – So - an inline style
• (inside an HTML element) has the highest priority – which means that it will override a style declared inside the
<head> tag, in an external style sheet, or in a browser (a default value).
9
Cascading…what does that mean?• Provisions for conflicting rules (external)
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="../stylesheets/headerlinkstyles_subpages.css" rel="stylesheet" type="text/css" /><link href="../stylesheets/portfoliobase.css" rel="stylesheet" type="text/css" /><link href="../stylesheets/portfoliodescription.css" rel="stylesheet" type="text/css" />
<body> ---- this is where your webpage goes</body>
</html>
10
Why CSS….more reasons• CSS = stylistic language• HTML = structural language• W3C – body that debates web standards
– Is removing stylistic elements from HTML– XHTML (current accepted standard)
• Some older stylistic HTML will be rendered obsolete and not supported
• <font>, <u>, <strike>, <center>• HTML might eventually be replaced by XML
– More powerful, more flexible –easily localized
– Does not declare styles
11
XHTML is a W3C Recommendation
• XHTML 1.0 became a W3C Recommendation January 26, 2000.
12
CSS and XHTML
• Web 2.0 – “Web 2.0 doesn't have a hard boundary,
but rather, a gravitational core”• http://www.oreillynet.com/pub/a/oreilly/tim/news
/2005/09/30/what-is-web-20.html
• CSS and XHTML is the 2.0 standard
13
XHTML
14
XHTML
• XHTML – EXtensible HyperText Markup Language – Aimed to replace HTML – Almost identical to HTML 4.01 – Stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application – Therefore follows the rules of XML
15
Why XHTML?• We have reached a point where many pages
on the WWW contain "bad" HTML.– The following HTML code will work fine if you view
it in a browser, even if it does not follow XML rules:
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
16
XML• XML = markup language where everything has to be marked up
correctly– Results in "well-formed" documents.
• XML was designed to describe data and HTML has evolved a tool to display data.
• Different browser technologies– Internet on computers– Internet on mobile phones and hand helds.
• Do not have the resources or power to interpret a "bad" markup language.
• HTML + XML (and their strengths) = markup language that is useful now
– XHTML pages can be read by all XML enabled devices – AND while waiting for the rest of the world to upgrade to XML supported
browsers: XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible !!!
– and forward compatible
17
XHTML
• Follows the rules of XML– elements must be properly nested – elements must always be closed – elements must be in lowercase – documents must have one root element
18
XHTML elements must be properly nested
Wrong<ul>
<li>Coffee</li> <li>Tea
<ul> <li>Black tea</li> <li>Green tea</li>
</ul> <li>Milk</li></ul>
Correct<ul>
<li>Coffee</li> <li>Tea
<ul> <li>Black tea</li> <li>Green tea</li>
</ul> </li>
<li>Milk</li></ul>
19
XHTML elements must always be closed
• Wrong<p>This is a paragraph
<p>This is another paragraph
• Correct<p>This is a paragraph</p>
<p>This is another paragraph</p>
20
XHTML elements must be in lowercase
• Wrong<BODY>
<P>This is a paragraph</P>
</BODY>
• Correct<body>
<p>This is a paragraph</p>
</body>
21
XHTML documents must have one root element
• All XHTML elements must be nested within the <html> root element. – All other elements can have sub (children)
elements. – Sub elements must be in pairs and
correctly nested within their parent element.
– The basic document structure is:<html>
<head> ... </head><body> ... </body>
</html>
22
CSS Overview
23
Browsers (Stats)• All major browsers support Cascading Style
Sheets• Web Statistics and Trends – Sept 2007*
• http://www.w3schools.com/browsers/browsers_stats.asp• Also see: http://www.upsdell.com/BrowserNews/stat.htm
IE 7 IE 6 IE 5 Fire
Fox
Mo-
zilla
Safari other
2006 3.1% 54.5% 3.2% 28.8% 2.4% N/A 1.7%
2007 20.8% 34.9% 1.5% 35.4 % 1.2% 1.6% 1.5%
24
CSS
• The CSS syntax is made up of three parts: – Selector
• Three types– ID (#nameOfYourChoice or HTML)– Class (. nameOfYourChoice or HTML)– HTML(<p>, <a>, <body>…etc)
– Property – Value
25
CSS• 'properties' are inside curly brackets (called braces)
– take the form of words such as color, font-weight or background-color.
• A value is given to the property following a colon and semi-colons separate the properties.
This is a selector #centerPanel {This is a property position:relative; <-Value followed by ;
background:#dff3fd;margin-left:auto;margin-right:auto;width:1000px;height:100%;z-index:1;
Curly Bracket (Brace) }
26
External vs. Internal Stylesheets
• Can be part of the page itself OR
• Can be brought in as a link– I always start with them internal – and then
usually externalize
27
Inserting Style Sheets
• External<head>
<link rel="stylesheet" type="text/css“
href="mystyle.css" />
</head>
28
Inserting Style Sheets• Internal
<head><style type="text/css">
hr {color: sienna;
}p {
margin-left: 20px;}body {
background-image: url("images/back40.gif");}
</style>
</head>
29
Selectors – rule of thumb
• .class selectors for general use
• #ID selectors for specific use
• You can group selectors– Separate each selector with a comma.
h1,h2,h3,h4,h5,h6 {color: green
}
• Much more to know here…buy a good book
30
Class SelectorsIn the Style sheet:
p.right {text-align: right}p.center {text-align: center}
In the HTML:<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
31
Selectors
• Do NOT start a class or ID name with a number!
• It will not work in Mozilla/Firefox.
32
Pseudo Classes• link is for an unvisited link.
a:link { color: black; font-size: 0.8em; font-family: Verdana;}
• visited is for a link to a page that has already been visited. a:vlink { color: black; font-size: 0.8em; font-family: Verdana;}
• active is for a link when it is gains focus (for example, when it is clicked on). a:active { color: black; font-size: 0.8em; font-family: Verdana;}
• hover is for a link when the cursor is held over it.a:hover { color: #2b5978; font-size: 0.8em; font-family: Verdana;}
33
Adding Comments
/* This is a comment */
p{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
34
Fonts and CSS
35
Font-family• The font you specify must be on the user's computer
– little point in using obscure fonts.
• ‘Safe' fonts are few– Common: arial, verdana and times new roman - but you can
specify more than one font, separated by commas. – If the user does not have the first font you specify, the browser will
go through the list until it finds one it does have. – This is useful because different computers sometimes have
different fonts installed. • font-family: arial, helvetica, for example, is used so that similar fonts are
used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).
• Note: if the name of a font is more than one word, it should be put in quotation marks– font-family: "Times New Roman".
36
Font Family#centerPanel {
position:relative;font-family:Arial, Helvetica, sans-serif;background:#dff3fd;margin-left:auto;margin-right:auto;width:1000px;height:100%;
}
37
Font Size• Be careful with this….• Avoid Pixels – inconsistent display (esp. on Macs)
p {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
• pts and picas okay…but really designed for printp {
font-family:Arial, Helvetica, sans-serif;font-size:12pt;}
• ems are reccomended– Relative font measurement wher one em = the hieght of M in
the default user size
38
ems• 100 % user’s default
p {font-family:Arial, Helvetica, sans-serif;font-size:1em;}
• 90%p {
font-family:Arial, Helvetica, sans-serif;font-size:0.9em;}
• 110%p {
font-family:Arial, Helvetica, sans-serif;font-size:1.1em;}
39
Font Weight• Bold or not
– In practice this usually only works as font-weight: bold or font-weight: normal.
• In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900,
• Many browsers will not support (safest to stick with bold and normal
p {
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
font-weight: bold;
}
40
Font Style
• This states whether the text is italic or not. – It can be font-style: italic or font-style:
normal.p {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight: bold;
font-style:italic;
}
41
Font Decoration• This states whether the text is underlined or not. • text-decoration: overline, which places a line above the text.
p {font-family:Arial, Helvetica, sans-serif;font-size:1em;font-weight:bold;font-style:italic;text-decoration:overline;
}
• text-decoration: line-through
• text-decoration: underline should only be used for links because users generally expect underlined text to be links.
• This property is usually used to decorate links, such as specifying no underline with text-decoration: none.
42
Sample body {
font-family: arial, helvetica, sans-serif; font-size: 0.8em; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
a { text-decoration: none; }
strong { font-style: italic; text-transform: uppercase; }
43
Text Spacing• The letter-spacing and word-spacing properties are for spacing
between letters or words. The value can be a length or normal.
• The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font.
– number (which specifies a multiple of the font size, so '2' will be two times the font size, for example), a length, a percentage or normal.
• The text-align property will align the text inside an element to left, right, center or justify.
p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5; text-align: center; }
44
Spans and Divs(Tying this all together)
45
<span> and <div>
• "dummy" tags that don't do anything in themselves. – Excellent for carrying CSS style
46
<Span>• <SPAN> is an "inline-tag" in HTML, meaning
that no line breaks are inserted before or after the use of it.
• Use sparingly
• Style.hilite{
background-color: #FFFFCC;
}
• HTML<p> These <span class=“hilite”>stuffed
peppers</span> are lovely.<p>
47
<div>
• Dreamweaver calls them layers– z-index:1 – Think of them as a container– Your page will now be composed of divs
which will be described by styles– Often called a “box model”
48
Key Properties to know
49
Positioning
• Describe the placement of the divs– static– absolute– relative– fixed– inherit
50
Absolute Positioning• Removed from the document flow• Dreamweaver default• Calculated from the upper left corner of
the page – Unless the div is defined inside another
div, in which case it will be calculated from the upper left corner of the parent layer.
• Assumes a fixed design– Not accessible
• Good Servant….bad master
51
Relative
• The position will be calculated relative to the element that comes before it– Defaults to under the element before– Use a “float” property to place side by side
• Remains in the flow of the document
• Good for accessibility
• Good master…fine servant
52
Margin and Padding
• A margin is the space outside of the element
• Padding is the space inside the element.
53
Property Examples– All from http://www.w3schools.com/
54
Backgrounds• Set the background color
This example demonstrates how to set the background color for an element.
• Set an image as the backgroundThis example demonstrates how to set an image as the background.
• How to repeat a background image only verticallyThis example demonstrates how to repeat a background image only vertically.
• How to repeat a background image only horizontallyThis example demonstrates how to repeat a background image only horizontally.
• How to place the background imageThis example demonstrates how to place the image on the page.
• How to set a fixed background imageThis example demonstrates how to set a fixed background image.
– All from http://www.w3schools.com/
55
Borders• Set the style of the four borders
This example demonstrates how to set the style of the four borders.• Set different borders on each side
This example demonstrates how to set different borders on each side of the element.• Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.• Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.• All the bottom border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the bottom border in one declaration.
• All the left border properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for the left border in one declaration.
• All the right border properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for the right border in one declaration.
• All the width of the border properties in one declarationThis example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.
• All the border properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values.
– All from http://www.w3schools.com/
56
Lists• The different list-item markers in unordered lists
This example demonstrates the different list-item markers in CSS.
• The different list-item markers in ordered listsThis example demonstrates the different list-item markers in CSS.
• Set an image as the list-item markerThis example demonstrates how to set an image as the list-item marker.
• Place the list-item markerThis example demonstrates where to place the list-item marker.
• All list properties in one declarationThis example demonstrates a shorthand property for setting all of the properties for a list in one declaration.
– All from http://www.w3schools.com/
57
Text Margins• Set the left margin of a text
This example demonstrates how to set the left margin of a text.• Set the right margin of a text
This example demonstrates how to set the right margin of a text.• Set the top margin of a text
This example demonstrates how to set the top margin of a text.• Set the bottom margin of a text
This example demonstrates how to set the bottom margin of a text.
• All the margin properties in one declarationThis example demonstrates how to set a shorthand property for setting all of the margin properties in one declaration.
– All from http://www.w3schools.com/
![Rémi Forax - lrde.epita.fr · PDF fileRémi Forax Université Paris ... Object fallback(CallSite cs, Object[] args) { ... } The BSM installs a fallback method creates. ... ASM –](https://img.dokumen.tips/doc/110x75/5a710de67f8b9aac538c7ebd/rmi-forax-lrdeepitafr-nbsppdf-filermi-forax-universit.jpg)
