Cascading Style Sheets
Controlling the Display
Of Web Content
PHPuse XHTML
Why
style sheets
Javascript
 Separate structure
from presentation
 HTML files less complex CGI
HTML
 One style sheet for an entire
Java site keeps the
styling consistent
perl across different pages
CSS
 Different users can
have
different
style sheets
XML
 Can have different style sheets for different
media (print vs. screen e.g.)
PHP
CSS
Style
Sheets
XHTML
 Style sheetsJavascript
are used to specify the
CGIdocument.
presentation
style
of
a
web
HTML
Java
 Cascading Style Sheet
(CSS) is a
perl
language for specifying presentation
style
CSS
XML
 Overseen by W3C
http://www.w3.org
PHP
Components
of CSS
XHTML
Javascript
 Style declarations
property
:
value
HTML
CGI
 Selectors determine Java
which properties are
perl
assigned to different HTML
elements
CSS
XML
 Inheritance and cascading rules control
what properties affect child elements
PHPStyle
Rule
XHTML
selector Javascript
{ property1 : valueCGI
1;
HTML
property2 : value
Java2;
perl…
CSS
propertyn :XML
valuen
}
h1 {font-size: large; color : #009 }
PHP do XHTML
Where
the rules go?
Javascript
 Separate file
(with .css extension)
Use <link> element toCGI
attach style sheet to
HTML
html file
Java
<link rel="stylesheet"
perl
type="text/css"
CSS
XML
href="myStyle.css"
/>
 In a <style type="text/css>
element in the <head> of the HTML
document
PHP
Attached
Style Sheet
XHTML
Javascriptin style.css
CGI
…
HTML
Java
h2 { font-size:
perl
CSS
XML
<html><head>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head><body>
<h2>… </h2>
<h2>… </h2>
</body></html>
…
150% }
PHP
Style XHTML
Element
<html><head>Javascript
<style type="text/css">CGI
body { font-size:
HTML small }
Java
h1 {font-size: large;
color: #009 }
perl
</style>
CSS
</head><body> XML
<h2>… </h2>
</body></html>
PHP Selectors
XHTML
Javascript list of tag names
 Element: comma-separated
CGI
 can use * to select all elements
HTML
 Class: tag.classname
to select all elements
Java
with class=classname
perl
CSS
 Attribute: tag[attr]
or
XML
tag[attr="value"] to select elements
with a particular attribute or attribute value
PHP
More XHTML
selectors
Javascript
 Id : #idName
to select elements with
particularHTML
id attribute CGI
 Contextual: a img Java
perl
 Pseudoclass: :link :active
CSS
XML
:visited :hover
 Pseudoelement: p:first-letter
p:first-line
PHPProperties
XHTML
 background -Javascript
color, image (with position and
repeat)
CGI
HTML
 text - color,
background color, spacing,
alignment, decoration, Java
indentation
perl
 borders - color, style, width CSS
 font - size, style XML
 margins and padding - each side independently
if desired
 lists - markers
PHP Border,
Margin,
Padding
XHTML
Javascript
 Block boxes
CGI
HTML
Java
perl
CSS
 Inline boxes
XML
PHP
Sources
XHTML
 Web Design Javascript
and Programming by Paul S. Wang
CGI
Java
 http://en.wikipedia.org/wiki/Cascading_Style_Sheets
perl
 W3 Schools
CSS
XML
and Sanda S. Katila
HTML
 Wikipedia
 http://www.w3schools.com/css/default.asp
 Complete CSS Guide (online version)
 http://www.westciv.com/style_master/academy/css_t
utorial/index.html
PHP
favicons
XHTML
 Make a custom
icon that shows up in the title
Javascript
bar of the browser and in the
bookmark list.
CGI
HTML
 acceptable formats: gif, png,
the windows ico
Java
 Put it in your
public_html directory
perl
CSS
 Add link element(s) to the head
element
XML
 <link rel="shortcut icon"
 Create a 16x16 bit image file
href="images/lwp.ico" type="image/xicon" />
 <link rel="icon" href="images/lwp.ico"
type="image/x-icon" />
HowPHP
to make
an ico image
XHTML
Javascript
 Create a 16x16
image that you can open
CGI
with gimp
(or
create
it
in
gimp
if
you
HTML
know how)
Java
perl
 From gimp, do save as with
a .ppm
CSS
XML
extension
 do
ppmtowinicon -output image.ico image.ppm