n241IntroStyles - Computer Science@IUPUI
Download
Report
Transcript n241IntroStyles - Computer Science@IUPUI
Introducing Styles
CSCI N241: Fundamentals of Web Design
Copyright ©2006 Department of Computer & Information Science
Goals
By the end of this unit, you should understand …
• … how to build a properly formatted style
rule.
• … how to use an embedded style sheet.
• … how to build an external style sheet.
• … how to link to an external style sheet.
• … how to build & use style classes.
• … how to validate your CSS.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
What is a Style?
• Remember, HTML is all about structure.
As scripting languages for web
development evolved, the W3C
deprecated the HTML elements that
governed design.
• In place of the deprecated elements,
the W3C devised a model for
manipulating design of web pages using
Cascading Style Sheets (CSS).
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Cascading What?
• Don't worry too much about terminology
right now (you'll learn as you progress)!
• A style sheet presents us with a way to
adjust the design of a web page.
• The term "cascading" refers to the
ability of the browser to read style
rules from multiple sources.
• We construct style sheets as series of
rules …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Anatomy of a Rule - Selector
• A selector is the element to which you
want to apply a new style. It begins a
style rule:
p
{
background-color: #FF0000;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Anatomy of a Rule - Braces
• After the selector, we use a pair of
curly braces to enclose our declaration
statements:
p
{
background-color: #FF0000;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Anatomy of a Rule - Declarations
• Inside the braces we have declarations. We
can have multiple statements, or just one.
Each ends with a semi-colon. Each consists of
a property and a value:
p
{
background-color: #FF0000;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Anatomy of a Rule - Properties
• The first part of a declaration is the
element's property that we want to
update, background-color below:
p
{
background-color: #FF0000;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Anatomy of a Rule - Values
• To update a property, we specify a new
value, #FF0000 below:
p
{
background-color: #FF0000;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Rule with Multiple Declarations
• We can add more than one declarations
per rule:
p
{
background-color: #FF0000;
border: 1px solid #808080;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
CSS Property References
• HTML Help:
http://www.htmlhelp.com/reference/css/properties.h
tml
• CSS Property Index:
http://www.blooberry.com/indexdot/css/propindex/a
ll.htm
• HTML Dog:
http://www.htmldog.com/reference/cssproperties/
• W3 Schools:
http://www.w3schools.com/css/css_reference.asp
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
CSS is NOT HTML!
• The syntax rules for CSS are different
than those for HTML (don't worry – so
long as you follow the structure outlined
in the previous slides, you're good to go!
).
• To include a comment in CSS code, use
the following syntax:
/*
This is a comment for CSS.
*/
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Types of Styles
• One way that we can categorize styles
is where we declare them.
• Essentially, there are three categories
of styles:
– Styles that we apply directly to individual elements
only (Inline Styles – we won't use these very
much!)
– Styles that we apply to elements within a single
page (Embedded Styles)
– Styles that we apply to multiple pages (External
Styles)
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let's Try One!
• Download the file
n241IntroStyles_
examples.zip and
decompress it.
• Edit the file
lounge.html to
add the styles on
the next slide …
Now you're stylin'! Just
don't touch the hair!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let's Try One!
• Add the following in your <head>:
<style type = "text/css">
p
{
color: maroon;
}
</style>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Keep Goin' …
• Now, add the following rules:
h1, h2
{
font-family: sans-serif;
color: gray;
border-bottom: 1px solid black;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
What if … ?
• … we wanted to specify that only
the <h1> element will get a black
line?
• … we wanted to keep the sans-serif,
gray font for both <h1> and <h2>?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
One Selector, Multiple Rules
h1
{
border-bottom: 1px solid black;
}
h1, h2
{
font-family: sans-serif;
color: gray;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
External Style Sheets
• The real power of CSS is using rules to
their full potential – by applying rules to
multiple pages ("Write once, take
anywhere.").
• To do this, we need to do a few things:
– We need to create a separate file just to store our
rules (with a .css extension).
– We need to point pages we want to style to that
file using the <link> element.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let's Try One!
Groovy! We're all
stylin' now!
• Create a new file
called lounge.css
and store that file in
the css subdirectory.
• Cut the rules we
created earlier in
lounge.html and
paste them in
lounge.css.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Keep Goin' …
• Now, remove the
<style>…</style> from
lounge.html and replace it with
the following:
<link type = "text/css"
rel = "stylesheet"
href = "css/lounge.css" />
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Keep Goin' …
• Add the following to
about/directions.html and to
beverages/elixir.html (how would
you specify the path to lounge.css?):
<link type = "text/css"
rel = "stylesheet"
href = "
/lounge.css" />
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Examining Inheritance
• Edit your rule for the p element in
lounge.css so that it looks like this:
p
{
font-family: sans-serif;
color: maroon;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Inheritance
• When we apply styles, those changes
affect not only the element to which we
are applying styles, but any elements
that element encloses in a nest
(consider the <a> and <em> nested
inside our first paragraph in
lounge.html).
• Not every style is inherited.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Mapping Inheritance
html
body
h1
p
img
p
a
h2
em
p
a
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Movin' on Up …
• Look closely at your style sheet. Did you
notice that we edit the font-family
multiple times?
• Why not just put this in a new rule for
the body, to take advantage of
inheritance?
body
{
font-family: sans-serif;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Mapping Inheritance
html
body
h1
p
img
p
a
h2
em
p
a
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Overriding Inheritance
• Sometimes, we want to override
inherited properties.
• We can do this by simply re-writing the
declaration for the element that we
want to change. Let's add the following
rule:
em
{
font-family: serif;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Introducing Classes
• By default, when we use a tag/element name
as a style rule’s selector, the changes we
make to properties apply to all elements that
match that element’s type (e.g., all <p>s).
• What if we want to apply changes to
properties to only some elements of the same
type, but not others?
• We can solve this problem by developing a
class …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Creating a Class
• We can create a class one of two
ways:
– We can create a class to apply to any type
of element.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Creating Classes for Specific
Types of Elements
• We can attach a class to a
particular element, such that we
can apply the class to only elements
of that type:
We can apply this class
to any paragraph, <p>,
p.alert
that uses the class
called greenTea. We
{
cannot apply this class
color:red;
to other types of
elements.
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Creating Classes for Specific
Types of Elements
• We can also create a class to apply
to any type of element:
We can apply this class
.alert
to any element that
uses the class called
{
greenTea. This type of
class code gives us
color:red;
more flexibility.
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try One!
• Add the following
class to your CSS
file:
.greenTea
{
color:green;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Applying a Class
• To apply a class to a particular
element, we need to use the class
attribute, like this:
<p class = "alert">
Midterm Exam Today!
</p>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let’s Try One!
• In lounge.html,
link the
.greenTea class
to the paragraph
describing green
tea:
<p class =
"greenTea">
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Keep Goin’ …
• Now, let’s add two more classes to your
CSS file:
.raspberry
{
color: blue;
}
.blueberry
{
color: purple;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Keep Goin’ …
• In lounge.html, link the classes you
just created to the paragraphs
describing the Raspberry Ice
Concentration & the Blueberry Bliss
Elixir, respectively:
<p class = "raspberry">
…
<p class = "blueberry">
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Pseudo-Classes
• In addition to allowing for classes,
CSS provides support for pseudoclasses.
• These classes add special effects
to some selectors (like the <a>
tag).
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Pseudo-Classes for the <a>
• Unvisited Links:
a:link { color: #FF0000; }
• Visited Links:
a:visited { color: #00FF00; }
• Mouse Over (Hover) Link:
a:hover { color: #FF00FF; }
• Selected (Active) Link:
a:active { color: #0000FF; }
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Let's Try One!
• Add the following to your CSS file:
a:link, a:visited
{
color:#000080;
text-decoration:none;
}
a:hover, a:active
{
color:#0000FF;
background-color:#E0E0E0;
text-decoration:underline;
}
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Validation
• Just like XHTML, good form
requires that we validate our CSS
files. We can link to an validation
service using the following:
http://jigsaw.w3.org/css-validator/
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric Freeman.
Head First HTML with CSS & XHTML.
Sebastopol, CA: 2006.
• Neiderst-Robbins, Jennifer. Web Design in
a Nutshell, Third Edition. Sebastopol, CA:
2006.
• CSS Pseudo-classes from W3 Schools:
http://www.w3schools.com/css/css_pseudo_classes.asp
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science