CSS The Definitive Guide
advertisement
Online Chapter 1
4th Edition
Review elements
Whitespace handling
Rule structure
Linking to an external style sheet
Alternate Style Sheets
Media Specific Style Sheets
Using @import Declaration
Reviewing some HTML5 (header)
Elements are like little labels that describe the
different parts of a web page.
It is customary to type your element names
in all lowercase, although HTML5 isn’t picky
here. But it is rare to find someone coding in
uppercase.
The basis of document structure.
In CSS elements take two forms:
◦ Replaced
Where the elements content is replaced by something
that is not directly represented by document content.
Ex: <img src=“howdy.gif”>
◦ Nonreplaced
Their content is presented by the browser inside a box
generated by the element itself.
Ex: <span>Hi There</span>
Each rule has two fundamental parts:
◦ Selector
◦ Declaration block (can have more than one)
Property
Value
h1 { Selector
color: red;
property
}
value
CSS treats spaces like HTML does
Spaces not recognized between rules or
within rules
Blank lines will not have any programming
effect
Generates an element box within a line of
text and do not break up the flow of the line.
Difference between inline elements in HTML
vs. CSS
◦ Html restricts block-level elements from
descending from inline-level elements.
◦ CSS there is no restriction on how display roles can
be nested.
Remember this?
<link rel=“stylesheet “ type=“text/css” href=“sheet1.css”
media=“all”>
◦ Placed inside the head section of the HMTL document
◦ Must not be placed inside any other document.
◦ This statement causes the web browser to locate and load
the style sheet sheet1.css
◦ The default value for the media attribute is all (some coders
like to be explicit and by including this attribute.)
<link rel=“stylesheet “ type=“text/css” href=“sheet1.css”
media=“all”>
Rel stands for “relation” – The relation is
stylesheet
Type is always set to text/css
◦ Describes the type of data that will be loaded using
the link tag
Href the value is the URL of your style sheet
Media rules regarding media types with each
rule separated by a comma.
<style type=“text/css”>…</style>
The style element is one way to include a
style sheet
Style should always use the attribute type
The value of the type is text/css (the same as
the link element)
Should be closed with a closing </style>
Referred to as the embedded style sheet or
document style sheet
There can be more than one linked style
sheet associated with a document.
By linking more than one style sheet, the
browser will combine the rules from each and
apply them all to the document.
In our example we have a style sheet named:
base.css preferred.css alternative.css
(That would be three different style sheets)
Allows the user to pick the style they want to use, and
the browser would switch from one style sheet to
another.
The user would select from the menu bar
Use style and the user would pick the style they would
want.
Go to menu bar
~choose View (firefox)
Page Style
Choose options
Allows you to provide different themes for your site.
…
<head>
<meta charset=“UTF-8” />
<title>Palau de la Musica</title>
<link rel=“stylesheet” href=“base.css” />
<link rel=“stylesheet” href=“preferred.css”
title=“Dashed” />
<link rel=“alternate stylesheet”
href=“alternate.css” title=“Dotted” />
</head>
Create the following:
Use a base set of persistent styles that are
applied regardless of the visitor’s preference.
This is the base.css style sheet.
Img {
border: 4px solid red;
}
Will loaded by default in addition to base.css
When the visitor jumps to the page.
Img {
border-style: dashed;
}
(This was identified as the preferred style sheet in the link
statement within the head section.)
This style sheet is named alternate.css but
you can name it what you want, as with the
other style sheets above.
Img {
border-style: dotted;
}
You can designate a style sheet to be used only for
a particular output, perhaps only for printing or
only for viewing onscreen in the browser.
Allows the author to choose style sheets based on
features of a given media type.
Media descriptors are used.
Three most common
◦ all, screen and print
(The default value for the media attribute is media all, so
declaring media =“all” is redundant. Some coders prefer to be
explicit by always including media=“all”)
…
<head>
<meta charset=“UTF-8” />
<title>Palau de la Musica</title>
<link rel=“stylesheet” href=“base.css” media=“screen” />
<link rel=“stylesheet” href=“print.css” media=“print” />
</head>
<body>
…
<img src=“img/palau250.jpg” width=“250” height=“163”
alt=“El Palau de la Musica” />
<img src=“img/tickets.jpg” width=“87” height=“163”
alt=“The Ticket Window” />
…
</body>
</html>
/*Print Style Sheet*/
@media print {
img {
display: none;
}
p{
color: black;
}
Shows no images i.e. turns them off black and text
It is not unusual for more than one style rule to
apply to the same element, particularly on larger
sites that require more effort to manage CSS.
So… a style’s location can break a tie
BASIC RULE: the later the style appears, the
more precedence or importance it has….
Another way to load an external style sheet to
the HTML document.
By placing @import url(sheets2.css) at the
beginning of the style sheet that contain
them, and there are no other constraints.
There can be more than one @import
statement
Cannot use alternative style sheets
Found inside the style container and must be
placed before the other CSS rules or it won’t
work.
<style type=“text/css”>
@import url(styles.css); /*import comes first
*/
H1 {color: gray;}
</style>
/*This is a CSS comment */
Use to make your coding clearer! Use to point
out information! Use to help someone else
understand your coding.
You may start comments on their own line,
inside a declaration block, or after a rule.
/* ----------------------------------------------------------------------- */
/* ----- This style sheet contains a variety of example CSS comments ----- */
/* ----------------------------------------------------------------------- */
/* :::: From Figure C (p.183) :::: */
/*
/*
/*
/*
GLOBAL NAVIGATION ------------------------------- */
MAIN CONTENT ------------------------------- */
SIGN-UP FORM ------------------------------- */
PAGE FOOTER ------------------------------- */
Locate the reference to an external style
sheet in the html5 page and click the file
name.
◦ The style sheet should show up in a new browser
window. You can copy it from there if you like!
Use the CSS validator which will flag some
syntax errors. Validate first!
Then:
◦ Make sure to separate properties from their value
with a colon : (not an equal sign as in HTML5)
◦ Be sure to complete each property/value pair (a
declaration) with a semi-colon ;
◦ Don’t add spaces between numbers and their units
◦ Don’t forget to close your curly braces
◦ Don’t forget to close the closing </style>
CSS3 is the natural extension of the versions
of CSS that preceded it.
CSS3 is more powerful than earlier versions of
CSS and introduces numerous visual effects,
such as drop shadows, text shadows,
rounded corners, and gradients.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
The <title></title> belongs in the head
section and always after the meta element
that specifies the character encoding.
Recommended title length is 60 characters
including spaces. Because search engines
usually cut them off in their results around
there. Browsers display a varying amount of
characters but no more than 60 in the title
bar at the top of the browser before cutting
off the text.
Header element is one of four sectioning
content elements
A page can have multiple header elements
and their meaning can vary.
◦ A header at or near the top of the page may
represent the header for the whole page.
◦ Often the head can include the pages main
navigation and logo.
Links within the nav may point to content
within the page, to other pages or resources.
Use nav for only the documents most
important groups of links, not all of them
The real importance of external style sheets
is the way in which they allow authors to put
all of a site’s presentation information in one
place, and point all of the documents to that
place.
