intro/review - La Salle University
advertisement
Cascading Style Sheets
Basics
Why use Cascading Style Sheets?
• Allows you to set up a series of rules for all pages
in a site.
• The series may be changed by making a single
change to the rule—without requiring changes to
all the pages in the site.
• A separate file can be defined for the rules.
• Standards-compliant
How to add CSS to HTML Tags
• You can use the tags <style> </style>to list
a series of rules embedded in the header
• The styles are used to define specific sets of
characteristics for HTML tags, classes, or
IDs. Classes can be added to tags by using a
class attribute : <p class="fred">
Block vs. inline tags
• Block-level tags such as <p> add a line
break before and after the tag.
– <div> is block-level
• Inline tags such as <b> do not.
– <span> is inline
• Don't confuse these with inline styles, e.g.:
– <p style="color:red";>
Styles inline: in the Tag
• CSS rules consist of
selector {property1:value1; property2:value2;}.
• (For inline styles, the rules are enclosed in
quotes.)
• <h1 style="font-family: 'Times New
Roman'; font-variant: small-caps; color:
red;"> Hello World </h1>
Style Sheets Defined in <head>
• Surround with <style> … </style> tags. For HTML
include comments:
<style type="text/css">
/* CSS rules go here */
</style>
• Selectors can be HTML tags (h1), classes (.fred), ids
(#fred), pseudo-classes (.fred:hover), pseudo-elements
(.fred:first-letter) attributes (img[alt]), others. Ids can only
be used once per HTML page.
Sample Style sheet in <head>
<style type="text/css">
h1 {font-family: Georgia, ‘Times New Roman’, Times, serif;
color: red; text-align: center;}
h2 {font-weight: bold; color: orange;}
.dropcap {font: 100%/200% serif; color: blue; margin-top:
1em; position: relative; left: 10px; top: 10px;}
p {color: red; font-family: courier, monospace; padding:
1em;}
#fred {border: 2px solid #cf4;}
</style>
(Use vertical format as in Zeldman Chap. 9)
Using the Style Sheet
• When you use the H1, H2 or P tags the
styles defined in the style sheet are applied.
• To use the .dropcap class you may
– Either add the class to the tag
• .dropcap and add the class name <p
class="dropcap">
– Define a set of div or span tags and add the
attribute class=" "
• <span class="dropcap">
External Linking
• You may also define a style sheet as a text
file which includes the defined set of rules.
• The file contains only the selectors and the
property: value pairs.
• The file is the same as the rules in the
<head> element without the <style></style>
tags.
• The external file is then connected to the HTML page by
using the tag
• <link rel="stylesheet" href="xxx.css" type="text/css" />
Note /> for XHTML; for HTML5 just
<link rel=“stylesheet” href=“xxx.css” >
• The xxx.css is the name of the file path that contains the
list of rules.
• You should end the file with the extension css to be sure
you know what the file contains.
• You may also import one CSS file into another:
<style type="text/css"> @import url(other.css)</style>.
Order of style rules (cascade)
• The last definition is the one which is applied to
the tag.
• So if a css file is attached with a definition for p
tags and there is an inline definition for the p tag
after the reference to the embedded or external
file, the inline definition will apply. In general
inline>embedded>external.
• If the user has a set of defined browser
characteristics which conflict with the css, the user
characteristics will override the css definition.
Defining Classes
• You can define a set of specifics which may
be applied to a series of tags.
• The definition is prefaced with a
.classname. You reference the class name
in the HTML tag by using the attribute
class="classname"
Defining IDs
• In the style sheets, you may also define an ID,
which acts like a class except there can be only
one per page <div class="header">. Note in
HTML5 this would be replaced by <header>
• The ID always starts with a pound/hash sign (#):
#idname
• To apply the ID tag to the HTML tag, you add the
attribute <p id="idname">
• See Zeldman chapter 8 for reasons to use id.
Example
• #area1 {color: red}
• < div id="area1">
Multiple Tags with the same
Style (grouped selectors)
• Separate the list of tags by commas and the
place the set of style rules in parentheses for
the entire group.
• h1, h2, h3 {color: blue;}
Descendant (contextual) Selectors
• You can pass a style definition down a list of related
selectors. E.g.
#copy li p {font-size: 1.5em;} (Read this right to left. All p
that are descendants of li that are descendants of an
element with id="copy" get this rule.)
• The selectors are separated by a space.
• The first selector in the list is the parent, the others are
descendants.
• Changes to the first selector will be inherited by the next
selector.
CSS 2.1 selectors (IE 7+, MOSe)
• Child selectors
li>p {color: red;} (all p that are children of an li)
• Adjacent siblings
li+li {color: #234;} (all li that are adjacent siblings of li)
• Universal (wild card) selector
* {color:red;}
• #copy * i{color:#123456;}
• Attribute selectors
a[href="page2.html"] {color: black;} OR
div[align] {font-family: serif;}
Pseudo-classes
• Most common are
:link, :visited, :hover, :active. E.g.
a:hover {text-decoration:underline;}
• Also (2.1) :first-child, :focus, :blur, :lang()
• With IE7+ (and always with MOSe) can use
the "whatever:hover" e.g.
li:hover {text-decoration:underline;}
Pseudo-elements
• Not often used, but Gillenwater uses :before
and :after for "generated content."
• :first-letter, :first-line, :before, :after
Some other options
• !important tag
• Adding the !important to the style rule will
override any other rule.
• Media queries: in <link …> or <style>
media="screen" media="print" media="handheld"
media="all" etc. <style media="print">
• media="print" — used for a print page style sheet.
(Resume project)
• media="screen" – used for a browser display [but
omit if only sending to a browser]
Competing rules
• The cascade as described earlier
• Inheritance (rules passed to descendants)
• Specificity (id=100, class=10, tag=1) (sort
of)
• Lower rule in a style sheet or declaration
wins
h1 {color:blue;}
h1 {color:red;} so h1 will be red
Comments
• CSS comments look like JavaScript:
<style type="text/css">
/* Multiple lines of comment go here and can continue
until the closing mark */
p {color:red;}
</style>
• Conditional comments are best way to serve IE rules. E.g.
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="ie7.css">
<![endif]-->
OR <!--[if lte IE 7> ... <![endif]-->
Or <!--[if IE]> ... <![endif]-->
Defaults for font-family
• serif—small ornamentation at the end of the
letters
• sans-serif – not serif
• monospace—all letters occupy same
amount of space
• cursive—resembles handwriting
• fantasy—decorative fonts that are not the
same as the other styles
Setting Font
• font-family: font stack (give the one you prefer
first); multiple word families need quotes
font-family: "courier new", courier, monospace;
• @font-face is used to define the name and location
of a font to be downloaded to the user’s computer.
• @font-face{font-family: nametodownload;
src:url(filelocation);}
• Best idea—use browser-safe screen fonts
(Georgia, Verdana)
Other font properties
• font-size:
– Absolute (pt, in cm, mm)
– Relative (sort of) (px, em, %)
– Absolute expression
• xx-small, x-small, small, medium, large, x-large,
xx-large (smaller, larger are relative)
• font-style:
– italic
•
font-weight:
– normal, bold, lighter.
– Or use a value of 100 to 900 in increments of 100.
• Creating smallcaps
– font-variant
• small-caps
• normal
• Shorthand: font options separated by spaces after the font:
property. E.g.
h1 {font: bold italic small-caps 12px/18px verdana, serif;}
• At a minimum, need font-family, font-size. E.g.
h1 {font: 12px georgia, "times new roman", times, serif;
