Introduction to cascade style sheets CSS.pdf

Src: http://www.stanford.edu/people/markb/
CSS
Cascading Style Sheets

WHAT ARE CASCADING STYLE
SHEETS?
• Cascading Style Sheets (CSS) are rules. Each rule consists of a selector and a
declaration (which, in turn, is made up of a property and a value).
• They were established by the World Wide Web Consortium (W3C).
• CSS rules control the look (Style) of web pages or XML files by providing
central locations (Sheets) where HTML or XML tags are interpreted by the
browser.
2

SHEETS?
• Why the term “cascading”?
• In CSS, multiple styles can be applied to a particular document (usually a
web page or XML file).
• The browser will interpret these styles in a top-down (Cascading) fashion:
• Style rules set up site-wide are overridden by styles located within individual
pages.
• Style rules located within individual pages are overridden by styles inside an
individual tag.
• In addition, the end user can set up styles in the browser that will override the
author’s styles.
3

SHEETS?
• All matching rules for a particular selector will be applied, except where they
conflict with each other.
• If rules are in conflict, the last rule to be declared is applied.
• In the following example, <h2> tags would be displayed in red and italics
(but not blue):
• h2 {font-style: italic;}
• h2 {color: darkblue;}
• h2 {color: red;}
4

SHEETS? CONTINUED
• CSS-aware browsers apply their own stylesheet for every HTML element as the
first set of rules in the cascade.
• This set of rules forms the default display for every element.
• By using CSS, you override these implicit styles with an explicit declaration.
• By using CSS, you can also:
• control text formatting
• control location on the page
• eliminate the need for tables as a layout tool
• create logos using just text, instead of having to rely on graphics
5

SHEETS? CONTINUED
• CSS Specifications:
• CSS 1: http://www.w3.org/TR/REC-CSS1-961217.html
• CSS 2: http://www.w3.org/TR/CSS2/
• CSS 2.1: http://www.w3.org/TR/CSS21/
• For more detailed, technical discussions of the differences between CSS 1,
CSS 2, and CSS 2.1, go to the following:
• Between CSS 1 and CSS 2: http://www.w3.org/TR/CSS2/changes.html
• Between CSS 2 and CSS 2.1: http://www.w3.org/TR/CSS21/changes.html
6

PROS AND CONS OF USING CSS
• Pros
• Greater designer control of the appearance of the page
• Easier management of site-wide changes
• Greater accessibility to web sites by non-graphical browsers and web-page-
reading software
• Cons
• Different browsers may interpret Style Sheets in different ways
• Some styles may not be seen at all on some browsers
7

CSS EXAMPLES
• The CSS Zen Garden shows some of the most advanced uses of CSS:
• http://www.csszengarden.com/
• CSS in the real world: ajc.com's 'News Break'
• http://www.holovaty.com/blog/archive/2002/09/28/2340
• Web Standards Tech Briefing – with CSS:
• http://techbriefings.stanford.edu/web_standards/example1.html
• Web Standards Tech Briefing – without CSS :
• http://techbriefings.stanford.edu/web_standards/example2.html
8

CSS BASICS
• Under standard HTML, to create a web site with <h2> tags that have the
standard features of a Header tag (that is, their own paragraph, bold, with a
size change) and are dark blue, you must code each one as follows:
• <h2><font color="darkblue">This is a darkblue H2 tag</font></h2>
• That’s a lot of information to type every time you want to use a dark blue
<h2> tag.
• Using CSS, all you need to do is type a regular <h2> tag. The style information
will be included in the Style Sheet as follows:
• h2 { color: darkblue;}
9

CSS RULES
• To change the color of ALL <h2> tags from darkblue to green, simply change
the called-for color to “green.”
• The next time anyone sees the site, all the <h2> tags on all the pages will be
displayed as green instead of darkblue.
• These styles are called rules.
• Each rule consists of a selector and a declaration (which is made up of a
property and a value).
10

CSS RULES- CONTINUED
• In the example below, h2 is the selector, color is the property, and darkblue is
the value. When used with web pages, selectors are usually HTML tags.
h2 {
color: darkblue;
}
• Syntax for a CSS rule:
selector {
property: value;
}
11

GROUPING STYLES AND
SELECTORS
• Styles can be grouped:
• Using multiple styles
• Using multiple selectors
• Using contextual selectors
• Using direct child selectors
• Using adjacent selectors
• By attribute
12

GROUPING STYLES AND
SELECTORS
• Each rule can include multiple styles using semicolons to separate
them:
h2 { color: darkblue;
font-style: italic;}
• Additionally, multiple selectors that have the same styles can be
grouped using commas to separate them:
h1, h2, h3 { color: yellow; }
13

GROUPING STYLES AND
SELECTORS
• Direct child selectors allow you to specify that something will change,
but only when immediately inside of another element.
• With the following style, only those strong elements that are directly
inside of an h1 will be purple.
• No strong tags deeper within the sheet will be purple.
h1 > strong {
color: purple;
}
14

GROUPING STYLES AND
SELECTORS
• Adjacent selectors allow you to specify that something will change only when
preceded by something else.
• In the style below, only those links (a) that are preceded by an h2 will be green.
• h2 + a { color: green;}
• Elements being modified by adjacent selectors appear immediately after one
another.
• Using this style, this link would be green:
<h2>Visit Stanford!</h2>
<a href="http://www.stanford.edu">click here</a>
This link would not:
<h2>Visit Stanford!
<a href="http://www.stanford.edu">click here</a></h2>
15

GROUPING STYLES AND
SELECTORS
• You can also group selectors by attribute.
• With the style below, text that is centered using h2 tags
(<h2 align="center">) displayed surrounded by a dotted
border:
h2[align="center"] { border: dotted;}
16

WHERE DO YOU PUT THE STYLES?
• Style information can be located:
• Inline with individual tags
• Internally to each page
• Externally to the pages in a site, in a separate file
• Generally, creating an external style sheet file is the preferred method.
• To take full advantage of CSS, the Style Sheet for a site should be in an
external file, so that any changes made there will apply throughout the site.
• This also means that only one style document must be downloaded for a
single site (making the pages load faster).
17

STYLE LOCATION: INLINE
• For extreme control, style information can be included in an individual tag.
• The style effects only that tag and no others in the document.
• This option is most useful for those rare occasions when a single tag needs to
have a slightly different style.
18

STYLE LOCATION: INTERNAL
• Style information can also be included in the <head> section of an individual
web page.
• This tends to work best when a single page needs to have a slightly different
look than the rest of the site.
19

STYLE LOCATION: EXTERNAL
• The most common place to put style information is in an external document
that each page of a web site points to directly.
• Any changes made to this single document will then be applied throughout
the entire web site as each page is accessed by users.
• External Style Sheets have a .css extension.
20

HIERARCHY OF STYLES
• When style information for one site is located in all three places, the hierarchy is as
follows:
• External Style Sheets affect the entire site.
• Internal styles affect only their own pages and override external styles.
• Inline styles affect only their own tags and override both internal and external styles.
• Example
• if an external Style Sheet sets <h2> tags to purple and a particular page has an
internal style that changes that color to orange, the <h2> tags will be orange only on
that page and nowhere else in the site.
• If there is a single <h2> tag on that page which specifies green as its color, then the
color for that one tag will be green.
• All other <h2> tags on that page would be orange; the <h2> tags on the rest of the site
would be purple.
21

CLASSES AND IDS
• HTML has two attributes that make CSS even more useful: class and ID. They make it easy to
apply style to just about any tag.
• Classes can describe a generic style that can be applied to any HTML element or can be
created for specific elements.
• When defining a style for elements with a particular class attribute in the Style Sheet, declare a
rule using a dot (.) followed by the class name.
• To limit the style to a particular element with that class attribute, use a selector combining the
tag name with a dot followed immediately by the class name.
• The following rule would apply to any element with the attribute class=“shade"
.shade { background: yellow; }
• The following rule would apply only to paragraph tags with the class shade (<p
class="shade">)
p.shade { background: red; }
22

CLASSES AND IDS
• IDs are similar to classes, but IDs are unique – they can only be used with one
instance of an element within a document.
• When defining a CSS rule using an ID-based selector, use a
number/pound/hash sign (#) followed by the style name. To limit the style to
a particular element with that ID attribute, use a selector combining the tag
name with a # and then the ID name.
• The following rule would apply to any element with the attribute id="intro"
#intro { font-size: 2em; }
• The following rule would apply only to heading 1 tags with the id intro (<h1
id="intro">)
h1#intro { color: green; }
23

EXAMPLE: CLASS
• Here’s an example of a web page
with an internal CSS style
containing a class called
“highlight”:
24

INLINE VS. BLOCK DISPLAY (HTML)
• All HTML elements (tags) are assigned a display property value of either inline or block.
• Inline elements display in browsers horizontally.
[INLINE ELEMENT 1] [INLINE ELEMENT 2] [INLINE ELEMENT 3]
• Block elements display in browsers vertically (stacked one on top of the other).
[BLOCK ELEMENT 1]
[BLOCK ELEMENT 2]
[BLOCK ELEMENT 3]
• Examples of inline elements:
<a> <img> <strong> <em> <span>
• Examples of block elements:
<p> <h1-h6> <div> <hr> <table> <ul> <ol>
25

INLINE VS. BLOCK DISPLAY (CSS)
• Using CSS, you can change the inherent display property:
• To force a block display, use the declaration display: block;
• To force an inline display, use the declaration display: inline;
• To force a list, use the declaration
display: list-item;
• To hide elements matching the selector, use the declaration
display: none;
26

EXAMPLE – DISPLAY: BLOCK;
• Normally, <a> tags display inline.
• But, by changing the style of the a tag with
a {display: block;}, they will display as a vertical navigation menu:
27

EXAMPLE – DISPLAY: INLINE;
• Normally, the heading tags display in block format:
• To have them display inline, add the style
h1,h2,h3 {display: inline;}:
28

SPAN AND DIV
• There are two tags that are particularly useful when using CSS: <span> and
<div>.
• They are both container tags that have minimal formatting associated with
them.
• The <span> tag is an inline element that simply holds text without doing
anything special to it.
• The <div> tag is a block element and causes the text it encloses to start on a
new line.
• Using <span> and <div> tags in conjunction with classes and IDs allows for
great flexibility in creating pages.
29

EXAMPLE: SPAN, DIV, CLASS, AND ID
• Here’s an example of a
web page using a class,
an id, and the span and
div tags:
30

FONT AND TEXT STYLING
When choosing a font, there are several things to keep in mind:
1. Not everyone has the same set of fonts.
2. If you use a font that the visitor doesn’t have, the page will display in the default font (usually Times), unless
you provide more choices. To do this, add more than one font in your declaration, and always end with the
font family (serif, sans-serif, or monospace):
font-family: Verdana, Arial, Helvetica, sans-serif
3. Documents designed to be printed tend to look better in Serif fonts (Times, Georgia, Book Antiqua, etc.)
4. Documents designed to be viewed onscreen tend to look better in Sans-serif fonts (Verdana, Arial, Helvetica,
etc.)
To apply a font to the entire web page, modify the body tag:
body {font-family: Verdana;}
To apply a font to a specific section of text, create a class, and use the span tag with that class:
.neatstuff {font-family: Comic Sans MS;}
<span class="neatstuff">This is in Comic Sans</span>
31

MODIFYING LIST ELEMENTS
• In HTML, by default, unordered lists (<ul>) appear as bullets and ordered lists (<ol>) appear as numbers.
• Using CSS, you can modify how list items appear:
• Properties:
list-style, list-style-type, list-style-image, list-style-position
• Values:
disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha,
upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-
ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none, url("url-of-
graphic.gif"), inside, outside
• Examples:
ul { list-style: disc; }
ol { list-style: upper-roman;}
li { list-style: url("http://www.foo.com/images/blackball.gif");}
ul li { list-style-position: inside;}
32

POSITIONING
• Using CSS, you can place elements exactly on a page using a technique
called “positioning.” Positioning is determined by an X axis and Y axis. To
specify a point on the screen, you can use the X and Y coordinates for that
point.
• There are several ways to specify position in CSS: absolute, relative, fixed,
inherit, and static.
• The three most often used are absolute, relative, and fixed.
33

ABSOLUTE, RELATIVE, FIXED, INHERIT, AND STATIC
POSITIONING
• Absolute positioning defines the position of a given bounding box from the top and left side
margins of the web page. This not only allows objects to be placed in an exact location, it
also allows objects to be placed one on top of another.
• Relative positioning defines the positioning in such a way that elements are offset from the
previous element in the HTML code. This allows objects to be placed in relation to one
another.
• Fixed positioning defines the position of a given box relative to the window and remains in its
specified location even as the content scrolls underneath it.
• Inherit positioning explicitly sets the value to that of the parent (if the parent is
position:absolute, the child will be position:absolute; if the parent is position:fixed, the child will
be position:fixed).
• Static positioning is the default. It defines the position of a given box essentially as an
unpositioned element – it flows in the normal rendering sequence of the web page.
34

EXAMPLE:
POSITION:FIXED (IN FIREFOX)
37

RESOURCES
• A List Apart – articles on practical issues and suggestions for working
with CSS correctly
http://www.alistapart.com/topics/code/css
• Example XHTML Pages, with and without the CSS Style Sheet:
http://techbriefings.stanford.edu/web_standards/examp
le1.html
le2.html
le.css
• The CSS Zen Garden shows some of the most advanced uses of CSS:
http://www.csszengarden.com/
• CSS in the real world: ajc.com's 'News Break':
http://www.holovaty.com/blog/archive/2002/09/28/2340
• Microsoft's CSS Information:
http://msdn.microsoft.com/workshop/author/css/referen
ce/
attributes.asp
• Microsoft's Style Sheet Demonstrations:
http://www.microsoft.com/typography/css/gallery/extra
ct1.htm
http://www.microsoft.com/typography/css/gallery/slide
1.htm
• W3C Style Examples
http://www.w3.org/Style/Examples/007
• W3C CSS 2.1 Specifications:
http://www.w3.org/TR/CSS21/
• W3Schools CSS Tutorial:
http://www.w3schools.com/css
• W3Schools CSS Reference:
http://www.w3schools.com/css/css_reference.asp
• Webmonkey’s Cascading Style Sheet Guide:
http://www.webmonkey.com/reference/stylesheet_guid
e/
• Brian Wilson’s Cascading Style Sheet Reference Guide:
http://www.blooberry.com/indexdot/css/index.html
38

Introduction to cascade style sheets CSS.pdf

More Related Content

Similar to Introduction to cascade style sheets CSS.pdf (20)

Recently uploaded (20)

Introduction to cascade style sheets CSS.pdf