review: three parts to a webpage: - content - structure xhtml - presentation css in this chapter...
TRANSCRIPT
Chapter 2:How CSS Works
Review:
Three parts to a webpage:
- Content
- Structure XHTML
- Presentation CSS
In this chapter we will focus on introducing and examining
the mechanics of CSS and how we can use style sheets to
“beautify” the structure of a webpage.
What is CSS?• Cascading Style Sheet
• A list of rules that define a particular style that is applied
to XHTML markup.
• Ex: Font size of a paragraph, thickness of a border
around an image, position of a headline.
• Gives web designers complete control over the layout of
their web pages.
• Three ways to add CSS to a web page:
• Inline
• Embedded
• Linked
Inline Styles• Put style declarations right in a specific tag with the “style”
attribute.
• Not recommended and very rarely used.
• CSS and XHTML were implemented to get rid of
presentational markup.
• Will override any styles declared in a linked or embedded
style sheet.
<p style=“font-size: 25pt; font-weight:bold; font-style:italic; color:red;”>By adding inline CSS styling to this paragraph, we can override the default styles.</p>
Embedded Styles• Place CSS styles in the head of your XHTML document.
• Again, not recommended because the scope is limited to
one page.
• Will override a linked style sheet, but will still lose to an
inline style.<head><title>Embedded Styles</title><meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />
<style type=“text/css”>
h1 {font-size: 16px;}p {color:blue;}
</style>
</head>
Link to example
External Style Sheet• Ideal method of using CSS Truly separates presentation
from structure.
• Styles have a site-wide scope Can change one thing in the
style sheet and it will impact every page that links to it.
• Can specify styles that make the page look good on
different media (print, mobile, etc.)<head><title>Embedded Styles</title><meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />
<link href=“style.css” media=“screen” rel=“stylesheet” type=“text/css” />
</head> Can change to other media types (list)
External Style SheetLet’s make a sample page linked to an external
style sheet.<head><title>External Styles</title><meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />
<link href=“style1.css” media=“screen” rel=“stylesheet” type=“text/css” />
</head>
<body><p>All paragraphs will be modified.</p><p>See? Same style.</p>
<h2>It also has the same effect on us header 2’s.</h2><h2>See?</h2>
</body>
external.html
style.css
p {color:red;}
h2 {color:blue; font-style:italic;}
Link to example
CSS Rules• Each rule in CSS follows a specific
format:
Selector {Property:value;}
• The selector is the corresponding tag in
the XHTML markup.
• The property is one of the valid CSS
style attributes (a good list of them). The
values correspond to the specific property
and can also be found on the w3schools
CSS reference list.
CSS Rules• Multiple declarations can be contained within a rule.
p {color:red; font-size:12px; line-height:15px;}
• Multiple selectors can be grouped.
h1, h2, h3, h4 {color:red; font-size:12px;}
• Multiple rules can be applied to the same selector
h1, h2, h3, h4 {color:red; font-size:12px;}
h1 {font-style: italic;}
CSS & Document Hierarchy• A CSS style declaration will apply to every tag of the
selector’s type.
• In order to make it apply to only a certain part of your
document, you must utilize XHTML’s document hierarchy.<div id="header">
<h1>Here's the biggest heading.</h1><h2>Here's a smaller one.</h2>
</div>
<h1>This h1 won't have the style applied to it.</h1>
hierachy.html
div h1 {color:red;}
style2.css
Link to example
Classes and IDs• The second way of defining specific styles without the use
of the document hierarchy is by adding “class” and “id”
attributes to the XHTML markup.
• Define classes with a .
<h1 class=“special”>This will be some special text</h1><h1>This, unfortunately, won’t be.</h1>
<p class=“special”>But this will be!</p><p>This won’t.</p>
class1.html
h1 {color:red;}p {color:blue;}.special {font-family: Helvetica, sans-serif; font-style:italic;}
style3.css
Link to example
Classes and Document Hierarchy• If you want to, say, target one paragraph with a given
class, you can write the following:p.special {font-family: Helvetica, sans-serif; font-style:italic;}
• You can also combine the document hierarchy with classes
to further specify styles:
<h1 class=“big”>Here's the <span>biggest</span> heading.</h1><h2 class=“small”>Here's a smaller one.</h2>
<h2>This h2 won't have any class styles applied to it.</h2>
h1 {font-color:red;}
.small {font-size:x-small;}
.big {font-size:x-large;}
.big span {font-style:italic;}
style4.css
class2.html
Link to example
CSS and IDs• IDs work almost exactly like classes in that they can be
used to identify specific portions of a webpage that will be
styled.
• However, an ID is more powerful than a class because it is
used to identify unique pieces of a page (header, footer,
etc.).
• Can also be used to enable JavaScript to be triggered, and
takes precedence over classes in cascading.<p id=“specialtext”>This is special text</p>
p#specialtext {css rules;}
Selectors• Tell the browser to only apply a certain style if a certain
condition is met.
• Universal Selector
• * All markup will contain the specified style, unless
overridden.
• * {color:green;}
• Adjacent Sibling Selector
• + Selects a tag that follows a specific sibling tag
• h1 + p {font-variant:small-caps;}<h1>Test</h1>
<p>This will be in small caps</p>
<p>This won’t be</p>
• Attribute Selectors
• [] Targets only elements with specific attributes
• img[title] {border: 2px solid blue;}<img src=“images/someimage.gif” title=“This will have the style” />
<img src=“images/someimage.gif” alt=“This won’t” />
Pseudo-Classes• Cause rules to be applied when certain events occur.
• Most often used for mouse clicks or hovers.
• Anchor Link Pseudo-Classes
• Most commonly used with hyperlinks and color
changing
• Link, Visited, Hover, Active
Ex:a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:navy;}
Will set the link color to black, the link’s color to gray if
you’ve clicked on it, removes the underlining when hovered,
and changes the color to navy when the user holds the
mouse down on the link.
You can use “hover” on any element to change its style
when the mouse is hovered over it.
Link to example
Pseudo-Elements• Adds markup around already existing content.
• first-letter, first-line, before, after
• “before” and “after” are useful for displaying items
retrieved from a database in a coherent manner.
Ex:<h2 class=“age”>number retrieved from db</h2>
h2:before {content:”The user is “;}
h2:after {content:” years old.”;}
If the number was 25, the output on the page would be “The
user is 25 years old.”
Inheritance and Cascading• Inheritance is passing a style down the document hierarchy.
• Declaring the font family, color, etc. in the body selector
will make the text in every text element that font type.
• Many properties are not inherited because it doesn’t make
sense for them to be– e.g. a border will not be inherited by a
table cell (td) inside a table with a border.
• Inheritance is cumulative– that is, if you define a tag’s font
size as 80% and it is descendant from a tag with font size
80%, that child tag’s font size will be 64% (80% of 80%).
Inheritance and Cascading• Cascading describes the process of letting the browser
decide which styles to apply to a tag, amidst many possible
style declarations.
• Browsers follow a natural hierarchy of styles, with each one
below taking precedent over the ones above:
• Default browser style sheet
• User style sheet (rare, but useful for the visually
impaired)
• Author style sheet (external / linked CSS file existing on
the server)
• Author embedded styles
• Author inline styles
• Selectors with IDs have precedence over classes, which
have precedence over selectors only.
• The more specific the style declaration, the higher the
precedence.
• Defined styles override any inherited style, regardless of
specificity.
Inheritance and CascadingExample of higher specificity:
p {color:red;}
p.largeText {color:orange;}
p#largeText {color:yellow;}div p#largeText {color:green;}
div ul.myList {background-color:blue;}
Each has higher specificity than the one preceding it, thus
giving each precedence over the ones before it.
Link to example
Rule DeclarationsThree types of values:
• Words
• Numerical Values
• Color Values
Words font-weight: bold;
Numerical Values font-size:12px;
Color Values color:#336699;
For font sizes, when possible, and to retain consistency with
page resizing and user styles, set the “base” font-size to
1em in the body, and use other size declarations as
proportions of that base size.
E.g. font-size:.5em will yield half the size of the
base.
Rule DeclarationsFor color values, you have three options for declaring colors:
• Words aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white,
yellow
• Hexadecimal #RRGGBB -- 00 = 0, FF = 255
• Percentages R%, G%, B%
color:black;
color:#000000;
color:rgb(0%, 0%, 0%);