CSS
C
ascading
S
tyle
S
heets
(Continue)
Selector forms
Recall the CSS rule
The rule selector can take several forms indicating different semantics.
Rule Selector forms
Simple
Class
Generic class
Id
Universal
Psudo
Selector forms - Continue
Simple Selector Forms
The selector is a tag name or a list of tag names, separated by commas
Examples:
p
{ … }
h1, h3
{ … }
Class Selectors
Used to allow different occurrences of the same tag to use different style
specifications
The class is specified with the
class
attribute
Names begin with dot ‘.’
Examples,
p.narrow
{ … }
p.wide
{ … }
<p
class = "narrow"
>
...
</p>
...
<p
class = "wide"
>
...
</p>
Selector forms - Continue
Generic Class Selectors
A generic class can be defined if you want a style to apply to
more than one
kind of tag
Examples:
.
sale { …
}
Id Selectors
id selector allows the application of a style to one specific element
Names begin with hash ‘#’
Example:
#section14 {...}
Universal Selectors
Applies to all elements in the document
*
{color: red;}
<
h1
class = "sale"> Weekend Sale
</h1>
...
<
p
class = "sale"> … </p>
Selector forms - Continue
Pseudo Classes
Pseudo classes are styles that apply when something happens, rather than
because the target element simply exists
Names begin with colons ‘:’
“
hover
” classes apply when the mouse cursor is over the element
“
focus
” classes apply when an element has focus
“
visited
” classes apply to the element after being clicked
“
active
” classes apply to the element before being clicked
“
first-line
”
classes can specify format of first line in page or paragraph
“
first-letter
” classes
can specify format of first letter in page or paragraph
Selector forms - Continue
pseudo-elements are used to
address sub-parts of elements
can specify appearance of link in
various states
:visited
:active
:hover
can specify format of first line in page
or paragraph
:first-line
can specify format of first letter in
page or paragraph
:first-letter
Danger
:
changing the look of
familiar elements is confusing
Careful :
current browsers do not
support all CSS2 features
<html>
<!
–
- CS211
page19.html -->
<head>
<title>Title for Page</title>
<style type="text/css">
a {
color :
red
;
text-decoration :
none
;
font-size :
larger
}
a:
visited
{
color :
black
}
a:
active
{
color :
orange
}
a:
hover
{
color :
blue
}
p:
first-letter
{
font-size
:
large
;
color
:
white
;
background-color
:
darkblue
}
</style>
</head>
<body>
<p>
Welcome to my Web page.
I am so
happy you are here.
You've reached the end of your free preview.
Want to read all 22 pages?
- Winter '19
- Cascading Style Sheets, P
