Slides - CUNY.edu
Download
Report
Transcript Slides - CUNY.edu
Cascading Style Sheet (CSS)
1
Cascading Style Sheets (CSS)
a style defines the appearance of a document
element.
o E.g., font size, font color etc…
a style sheet: collection of styles for a Web
page or Website
style sheets use common language and syntax
main style sheet standard: Cascading Style
Sheets (CSS)
2
CSS history
developed by WWW Consortium (www.w3c.org), the
same organization that develops standards for HTML
designed to augment HTML, not replace it
a whole new way of formatting Web pages
provides several tools not available with standard
HTML
different versions
o CSS1 released in 1996 (fonts, text, color, background)
o CSS2 released in 1998 (positioning, visual formatting)
o CSS3, latest standard being developed
3
Benefits of style sheets
a design tool
makes website design more flexible
easier to maintain and modify
more aesthetically interesting
consistent look
4
5
Applying a Style Sheet
Three ways to apply a style to an HTML
document:
1. Inline Styles
2. Embedded Style Sheet
3. External Style Sheet
6
Style types
o Inline styles
styles are added to each tag within the HTML file
style only affects that particular tag
7
Using inline styles
format a single section, better use inline style
syntax
<tag style=“style declarations”>
o tag is the name of an HTML element (h1, h2, p, etc)
o style declarations
the styles defined for the particular tag
must be enclosed within double quotation marks
use semi-colon separate multiple attributes
<tag style=“attribute1:value1; attribute:value2”>
o e.g.
<h1 style="text-align: center; color: red">
8
But what if there are same tags appearing
multiple times in the webpage and you want
to format all of them uniformly
9
Style types (contd.)
o Inline styles
styles are added to each tag within the HTML file
style only affects that particular tag
o Embedded or global styles
applied to an entire HTML file
allowing the Web designer to modify the appearance of
any tag in the document
10
Creating an embedded style
embedded style, a style applied to various sections
within a Web page
use <style> tag within the <head> … </head> section
within <style> tag, enclose style declarations
syntax
<head>
<style type=“text/css”>
style declarations
</style>
</head>
11
Embedded Style
syntax for style declaration:
selector{attribute1:value1; attribute2:value2; ...}
o collection of attributes and values
selector
o identifies an element in your document, e.g., a heading
o identifies attributes and values within the braces for that
element
example
<style type="text/css">
h1 {text-align: center; color: red}
</style>
12
Embedded Style (contd.)
Simple Practice exercise:
Using Embedded styles, convert “course description” and
“reference texts” in main.html to blue
13
Grouping selectors
What if there are many tags or blocks which follows
the same style throughout the page?
apply the same declaration to a group of selectors by
including all of the selector names separated by commas
<style type=“text/css”>
h1, h2, h3, h4, h5, h6 {text-align: center; color: red}
</style>
14
Now the next level!
Just the way we changed the styles uniformly in a
single webpage, how about applying that across
multiple webpages, i.e., your website
We now need an external style sheet
15
Style types (contd.)
o Inline styles
styles are added to each tag within the HTML file
style only affects that particular tag
o Embedded or global styles
applied to an entire HTML file
allowing the Web designer to modify the appearance of
any tag in the document
o Linked or external style sheets
placed in an external file, linked with Web pages
allowing Web designer to modify the appearance of tags
in several documents across the website
16
Creating an external style sheet
1.
Crate a new text file
2.
Save it using the extension “.css”,
3.
Place your styles here
Within a style sheet, <style> tag is NOT
needed, only need style declarations
17
Creating an external style sheet
Create a text file containing style declarations
/* Author: author name
*/
h1, h2, h3, h4, h5, h6 {text-align: center; color: red}
Name the file: mystylesheet.css
Remember:
o Only external stylesheet creation not sufficient
o Need to link the stylesheet and the html pages where you
need the styles
18
Linking to style sheets with <link>
Example: link to a style sheet named “mystylesheet.css,”
<link rel="stylesheet" href="mystylesheet.css" type="text/css" />
Placement within <head> … </head> of the webpage where
you need the styles
19
Style Conflict
Apply external, embedded and inline all three types
of styling with h1 tag
External:
o
Embedded:
o
Text-align: center and color: blue
Inline:
o
Text-align: center and color: red
Text-align: center and color: green
What is the result?
20
Style precedence
in case of styles conflict, precedence is
determined in the following order:
1. an inline style overrides any embedded style or
external style sheet
2. an embedded style overrides an external style
sheet
3. an external style sheet overrides the internal
style rules set by the Web browser
21
Understanding Cascading Order
22
Style Inheritance
If a style is not specified for an element, it
inherits the style of its parent element.
This is called style inheritance
body {color: green}
p {color: red}
In the above example, the body element is
the parent element
23
Practice exercise
All the elements in my unordered (bulleted)
list must be red throughout the website
All the elements in my ordered (numbered)
list must be blue throughout the website
24