cascading style sheets css. standard defined by the w3c css1 (released 1996) 50 properties css2...
TRANSCRIPT
![Page 1: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/1.jpg)
Cascading Style Sheets
CSS
![Page 2: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/2.jpg)
CSS
Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties
(positioning) CSS3 (in development)
CSS2 Well supported by most modern browsers
![Page 3: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/3.jpg)
CSS
Allows you to separate the structure of a page
from the presentation
Presentation = displayed/delivered
Presentation and formatting of content is defined
by the CSS rules
Structure & meaning is handled by XHTML
Before CSS, if you wanted all of your text to be
blue, you might assign a blue value to all of the
color tags one-by-one in the XHTML.
![Page 4: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/4.jpg)
CSS - Benefits
Offers more control Type: control line spacing, and type size;
Rollovers: create rollover effects that don’t require images and javascript; Layout: you can layout entire pages
Less work: one css file can style an entire site (100s of pages)
Smaller files / faster downloads (no redundant styling tags & nested tables)
More accessible (meaningful content) Improved browser support
![Page 5: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/5.jpg)
CSS
Structural Layer - Meaningful markup (XHTML)
accurately describe the meaning of content with XHTML tags
Presentation Layer - CSS Style Rules
describing how an element should look (selectors &
declarations)
Attach them: Structural Layer + Presentation Layer
External, Embedded, Inline
![Page 6: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/6.jpg)
CSS - Rule Structure
Separate language with its own syntax
2 Parts
Selector: Selects the element to be affected
Declaration: “declares” a style for an selected element
Declaration block: property & value
![Page 7: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/7.jpg)
CSS - Structure
Declaration block
Property: identifies what to change
Value: how to change it
Selector – example
h1{
font-size: small;
font-family: Georgia, ‘Times New Roman’, Times, serif;
color: #CC3300;
margin-top: 4em;
margin-bottom: 10em;
}
![Page 8: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/8.jpg)
Types of Style Sheets
External (linked) Most powerful
A single style sheet can format hundreds of pages
(linked to each page)
To make changes – update the external style sheet
all page that are linked to it are updated.
![Page 9: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/9.jpg)
Types of Style Sheets
External
Not part of the XHTML document
Saved in a separate .css file
You create a link from your XHTML
document to the .css file
<link rel = “stylesheet” href=“mystyles.css” type=“text/css”/>
![Page 10: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/10.jpg)
Types of Style Sheets
Embedded
Embedded into the XHTML document (an internal
part of the XHTML)
All code placed inside the <head> tag
Affects only the one page its embedded in
<style type = “text/css”>
<!--
h1{color:red; font-family: Arial;}
-->
</style>
![Page 11: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/11.jpg)
Types of Style Sheets
Inline Used when you need to override some other style
defined in an embedded or external style sheet
Part of the XHTML document
Less powerful
Usually used only to override other styles or when
you have an exception to a rule
![Page 12: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/12.jpg)
Types of Style Sheets
InlinePart of the XHTML document
Written as an attribute of the tag
<body>
<h1 style=“color:red; font-family:arial”> Text is here.
</h1>
</body>
![Page 13: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/13.jpg)
CSS - The Cascade
Inheritance (parents, children, ancestors, siblings)
All XHTML elements are contained within one another
Children inherit properties from a parent (Ex: if font-family:
“helvetica” is applied to the <body> tag, all children (<p>,<h1>,
<em>, etc) will be helvetica as well.
![Page 14: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/14.jpg)
CSS - The Cascade
Cascade
System of hierarchy that determines which rules will be followed when
several sources of style info is assigned to the same elements
Style Sheet Hierarchy (the closer the style is to the content the more
weight it is given)
Browser default
User Settings (reader style sheets)
External Style Sheets (linked, then imported)
Embedded Style Sheets
Inline Style Sheets
Author !important
Reader !important
![Page 15: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/15.jpg)
CSS - The Cascade
Cascade
System of hierarchy that determines which rules will be followed when
several sources of style info is assigned to the same elements
Style Sheet Hierarchy (the closer the style is to the content the more
weight it is given)
Browser default
User Settings (reader style sheets)
External Style Sheets (linked, then imported)
Embedded Style Sheets
Inline Style Sheets
Author !important
Reader !important
![Page 16: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/16.jpg)
Meaningful Markup
<div>…</div>
![Page 17: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/17.jpg)
Generic Elements
<div>…</div>
Generic block-level element
<span>…</span>
Generic inline element
Name them using id or class
![Page 18: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/18.jpg)
div
<div>…</div>
Used like a container to group content
Gives context to the elements in the grouping
Give it a descriptive name with id or class
Ex: <div class=“products”> can be used to group an
<img> with <p> to show they are conceptually related
Ex: <div id=“news”> can be used to group a section of
content for context, structure or layout purposes.
![Page 19: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/19.jpg)
span
<span>…</span>
Generic inline element
Used to add meaning to content
Ex: <ul>
<li> Andy: <span
class=“phone”>123.4567</span></li>
<li> Joe: <span
class=“phone”>101.0101</span></li>
</ul>
![Page 20: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/20.jpg)
Element identifiers - id
Id identifier
Used to identify a piece of data
Unique element in the document
Value of id must be used only once in a document
<div id=“header”> (masthead & navigation here)</div>
<div id=“main”> (main content elements here) </div>
<div id=“links”>(list of links here)</div>
<div id=“news”>(news sidebar items here)</div>
<div id=“footer”>(copyright info, etc)</div>
![Page 21: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/21.jpg)
Element identifiers - class
class identifier
Used to group similar elements
Multiple elements may share a class name
<div class=“listing”>
<img src=“book.gif” alt=“name” />
<p><cite>The Complete Manual of
Typography</cite>, James Felici</p>
<p>A combination of type history and examples of
good and bad type.</p>
</div>
<p class=“description”>A combination of type history and examples of good
and bad type.</p>
![Page 22: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/22.jpg)
Type Selectors
Used to redefine a specific XHTML tag
body, td, th{
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 2em;
color: #33CCFF; }
![Page 23: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/23.jpg)
Descendant Selectors
Targets elements that are contained within
another element
Ex: li em { color: silver; }
targets emphasized text only when it appears in a list
item (li)
Ex: ol a em { font-varient: small-caps; }
![Page 24: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/24.jpg)
ID Selectors
Targets elements by their id value
Used to style a specific element in a site or group of pages
#divSidebar{
margin-left: 10 px;
text-align: center;
}
In your XHTML document you’d need the following:
<div id=“divSidebar”> This is the sidebar area of the page. </div>
Ex: In the xhtml file: <li id=“nameofstyle”> Item #1 in list </li>
In the .css - #nameofstyle {color:red;}
![Page 25: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/25.jpg)
Class Selectors
Used to “classify” elements into a conceptual
group
Multiple elements can share a class name
Used to specify a custom selector name and
apply that style to an XHTML element
Ex: In your .css file:
.smallprint {font-size: 10px;}
In your XHTML document:
<p class=“smallprint”> This is small
text. </p>
![Page 26: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/26.jpg)
Hierarchy of Selectors
Most to least specific
ID Selectors
Class Selectors
Contextual Selectors
Individual Element Selectors (type selectors)
![Page 27: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/27.jpg)
Pseudo-Class Selectors
Used to describe the state of an
element. Assigns a style that happens
when an object is a certain state
A:hover{
text-decoration:none;
color: #33CC33
![Page 28: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/28.jpg)
Pseudo-Class Selectors
Common Pseudo-Classes
:link- A style applied to an element that has not
yet been visited
:visited – A style applied to an element that has
been visited
:hover – A style applied to an element when a
mouse hovers over it (link)
:active – A style applied to an element when the
user clicks or activates the element
![Page 29: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/29.jpg)
Resources
Niederst, J. (2007). Learning Web Design. O'Reilly Meida, Inc.Chapter 11: Cascading Style Sheets Orientation
Andrew, R. (2007). CSS Anthology. Sitepointhttp://www.sitepoint.com/books/cssant1/
Meyer, E. (2006). CSS Web Site Design. PeachpitPress
Eric Meyer: http://meyerweb.com/eric/writing.html
![Page 30: Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3](https://reader036.vdocuments.site/reader036/viewer/2022062316/56649e355503460f94b2471a/html5/thumbnails/30.jpg)
Let’s see how this works…