1 css – cascading style sheets. 2 css - intro introduced in late 1996 provides a way to separate...

1

CSS – Cascading Style Sheets

2

CSS - intro

Introduced in late 1996 Provides a way to separate presentation from structure HTML

Originally not intended to deliver graphic content and multimedia

Designed to allow authors to define structure of document

CSS Allows greater control of Web page design Works with existing HTML and XHTML tags to tell

them how to behave

3

CSS – intro con’t

Initially not well supported Now recommended by W3C – many design related

HTML tags were slated to be made obsolete in favor of CSS (these tags are said to be deprecated)

There exist other types of style sheets: JavaScript Style Sheets XSL – Extensible Style Sheets

CSS is primary one used on the Web

4

CSS - what it can do

Text formatting and colors: Choose specific fonts and font sizes Set bolds, italics, underlines, text shadows Change text color and background color Change link colors or remove underlining Indent text, center text Transform sections of text to upper-, lower-, or

mixed case Other special effects

5

CSS – what it can do

Graphical appearance and layout Set a background graphic and control its location,

tiling, and scrolling Draw borders and outlines around sections of a

page Set vertical and horizontal margins on all elements

as well as margins for the page itself Flow text around images as well as other text Redefine how HTML tables and lists are presented

6

CSS – what it can do

Dynamic actions Mouseover effects on links Dynamically inserted content before or after HTML

tags Automatic numbering of page elements

Example:http://pubpages.unh.edu/~ehepp/CSS/MarkTwain.html

(without formatting)http://pubpages.unh.edu/~ehepp/CSS/MarkTwain8.html

(with formatting)Style sheet:

http://pubpages.unh.edu/~ehepp/CSS/mark8.html

7

CSS - definitions

Style sheetFile consisting of a number of CSS rules

CascadeHow style preferences are combined together when they

appear to conflict Rule

Defines what the HTML should look like and how it should behave in the window

Example: All <h1> tags should be presented with a green background and blue text

8

CSS – parts of a CSS rule

selector {property: value;}

Example: p {color: blue;}

selector – 3 types of CSS selectors:1) XHTML selector – indicates a specific mark-up element like

<h2> or <p>2) Class selector – can be applied to any XHTML tag as you wish;

eg. <p class = “bluecolor”>3) ID selector – like class selectors, but usually applied once on the

page to a particular XHTML tag for use with a JavaScript function; eg. <div id = “topofpage”>

declaration – {property: value;} property – attribute to be defined value – defines property

9

CSS – where to put the rules

In an external document: These are called external or linked Used to affect a complete Web presentation Style changes only need to be made in one place, rather than

in each individual document Produces a presentation with a consistent look and feel Create separate file with .css extension

Use basic text editor like Notepad or Wordpad (Windows environment), SimpleText or TextEdit (Mac environment), or pico (UNIX environment) OR

Use style sheet editor or some XHTML editors include support for CSS File needs to be located within public_html Good idea to place all style sheets in sub-directory of public_html called

either CSS or STYLES Change permissions on .css file to be world readable; change

permissions on style sheet sub-directory to be world executable

10

CSS – where to put rules (con’t)

Example:Basic style sheet:/* mystyles.css */

/* created for CS403-10 */

body { font-family: Arial;

color: black;

background-color: red; }

h1 { color: green; }

Linking the style sheet to XHTML page:<head><title>...</title>

<link type = “text/css” rel = “stylesheet” href = “CSS/mystyles.css”>

</head>

11

CSS – where to put the rules (con’t)

In the head of the XHTML document: These are called embedded or internal Rules are in the same file as HTML so editing is easier at first – good for

development purposes (plan to migrate rules to separate files later) Good for for rules that apply only to a specific page (this helps keep size of

global style sheet relatively small) Use the <style> tag in the head of the document Example:

<head><title>...</title><style type = “text/css”><! - -h2 { color: red; }address { font-family: Verdana, sans-serif;

font-size: smaller; } - -></style></head><body>

12

CSS – where to put the rules (con’t)

In an XHTML tag: These are called inline Inline CSS is very similar to using XHTML presentation

attributes – it only affects that single instance of the element Easier to add to your page as you go along; harder to

maintain since they are scattered throughout your source code

Style attribute can be set on nearly any XHTML tag that is displayed by the browser

Use when you want to over-ride embedded or linked style sheets

Does not contain selector – tag itself serves as selector Example:

<table style = “font-family: Arial; font-size: large;”>

13

CSS – composing rules

Combining rulesIf rules share same selector you can combine them:

p { color: blue; }

p { font-size: large; }

can be combined as:

p { color: blue;

font-size: large; }

or:

p { color: blue; font-size: large; }

14

CSS – composing rules

Combining rulesIf rules share same declaration, you can combine

them:

p { color: blue; }

address { color: blue; }

can be combined as:

p, address { color: blue; }

15

CSS – representing colors in CSS

Straightforward hex notation:body { color: #CC66FF; }

Short hex:body { color: #C6F; }

rgb function: Provide a decimal triplet of rgb numbers (0 – 255)

separated by commas:body { color: rgb(204,102,255); } OR

Provide percentages:body { color rgb(80%, 40%, 100%); }

16

CSS – representing colors in CSS (con’t)

Color names – there are 16 color names supported by browsers:

aqua navy

black olive

blue purple

fuchsia red

gray silver

green teal

lime white

maroon yellow

17

CSS – classes and ids

In addition to setting styles based on HTML elements, you can also have rules based on 2 optional HTML attributes: class and id

Class Used to define a related group of HTML elements on a page Elements within a class can be of any type To create it, just name it:

<p class = “abc”> ... </p> Once you have defined a class in your HTML you can use it as a

class selector in CSS; class selectors are indicated by a . before the name:

.abc {color: blue; } You can combine an element selector with a class selector; then

only those elements that are members of the class are selected:p.abc { font-family: Arial; }

18

CSS – classes and ids (con’t)

id Similar to the class attribute but more restricted Must be unique – only one tag on a page can have a

given id Id’s attribute value must begin with a letter: Example:

<a href = “next.html” id = “next”>Next Page</a>

In CSS rule:

#next { font-size: large }

19

CSS – using class selectors

Combine class selectors with <div> tags to designate specific sections of a page that should receive special styling:

...<body>

<div class = “headofpage”>

<h1>Great Places to Eat in Portsmouth</h1>...

</div>...

<div class = “footofpage”>

<hr />

© Ellen Hepp, 2004. ...

</div></body></html>

20

CSS – using class selectors - <div> and <span> (con’t) <div> tag

Divides your document into separate, distinct, sections Can be used strictly as organizational tool without

formatting but becomes more effective if you add class attribute to label the division

<span> tag Delimits a portion of xhtml content Allows you to change a portion of text Browsers treat span as another physical (content-based)

style tag but default is to leave it alone E.g., <span style = “font-size: larger;”>Hello!</span>

(O’Reilly)

21

CSS – using class selectors (con’t)

In CSS file:/* Top Heading of Page /*

.headofpage { color: white;

background-color: maroon;

font-family: Verdana, sans-serif; }

/* Bottom of Page */

.footofpage { color: green;

background-color: white;

font-family: “Times New Roman”, serif; }

22

CSS – pseudo-classes and elements

Pseudo-class selector is based on a set of predefined qualities that an HTML element can have:

:active:hover:link:visited

Can stand alone but is usually used with a type selector

a:link {color: red; }

23

CSS – pseudo-classes and elements (con’t)

Example: Typical body tag in HTML<body bgcolor = “#FFFFCC” background = “mybg.jpg” text = “#000066”

link = “#FF0000” vlink = ‘#999999” alink = “#FFCC99”>

To accomplish same thing using CSS (XHTML) body { background-color: #FFFFCC;

background-image: url(mybg.jpg);

color: #000066; }

a:link { color: #FF0000; }

a:visited { color: #999999; }

a:active { color: #FFCC99; }

24

CSS – simple CSS properties for text formatting

Color – sets the foreground color of the element:h1 {color: blue; }

Background-color – sets the background colorbody { background-color: purple; }

Font-size – (easy method – think tee-shirt sizes) give value relative to the user’s default text size Default text size has value of “normal” Larger sizes go up in increments of about 20%xx-small * x-small * small * normal * large * x-large * xx-large Can use relative values larger and smaller Examples:

dl { font-size: larger; }em { font-size: xx-large; }

25

CSS - simple CSS properties for text formatting

Font-family – can specify specific font (Arial) and/or generic font family (sans-serif)

If a font is specified that is not installed on user’s machine, browser will use default font if other options are not listed

Examples:body {font-family: Arial, sans-serif; }h1 { font-family: “Courier New”, monospace; }h2 { font-family: “Times New Roman”, serif; }

5 generic font families in CSS are:serif * sans-serif * cursive * fantasy * monospace

26


Other font properties: font-weight (makes text bolder or lighter)

Specify values 100 to 900 (normal is 400) in increments of 100 Specify bold (700), bolder (+100), lighter (-100)

font-variant (creates “small caps” effect) Specify normal, small-caps

font-style (creates italic or slanted effect) Specify italic, normal, oblique

line-height (sets the height of the line but not text size) Specify normal, measurement, multiplier, percentage

27


font shorthand property Shorthand property has 2 effects: sets properties to

default values and assigns specified values to designated properties

Shorthand for: font-family, font-size, font-weight, font-variant, font-style, and line-height

Format:selector { font: style variant weight size family }

note: values for weight, size, and family must be in that order!

Example:body { font: oblique small-caps small Verdana }

28


Special text effects:

selector { text-decoration: blinkline-throughoverlineunderlinenone }

Removing underlines on hyperlinks:

a:link, a:visited { text-decoration: none; }a:hover { text-decoration: underline; }

29

CSS – backgrounds and background colors

background-color property: Similar to bgcolor attribute in html Gives you more flexibility than bgcolor because it lets you

change the background for specific parts of the page Values the background-color can take:

Color names, rgb codes, triplets of numbers, or triplets of percentages

transparent (default) – whatever background already exists will be shown

inherit – setting a value equal to that of the containing block’s value

30

CSS – backgrounds and background colors (con’t)

background-image property Similar to background attribute in <body> tag Values for the background-image property:

Image address url url will be calculated relative to wherever the rule appears Example:

Selector { background-image: url(bg.gif); }

Or

Selector { background-image: url(‘bg.gif’); }

Or

Selector { background-image: url(“bg.gif”); }

31


background-repeat property Specifies whether or not the background image

tiles across the screen Values for the background-repeat property:

repeat (default) repeat-x repeat-y no-repeat inherit

32


background-position property Use to change the location of the initial image Consists of two size values or percentages (one for

horizontal and one for vertical) OR if only one value is given, it sets the horizontal position

Values: A number and a unit (10px or 2em)

In CSS 1em is defined as the total height of the current font in use

px stands for pixel A percentage (50% 75%) Word values: top, bottom, left, right, center

33


background-attachment property Images normally scroll with rest of the page but you

can modify so that image does not move Values:

scroll (default) fixed – image does not move relative to the original

position of the page inherit – value does not inherit from containing

block unless value is explicitly set to inherit

34


background shorthand property Allows you to set several properties at once List the values you want (in any order) as the value for

background (values you do not set will be set to their default values)

Example:

body { color: white;

background: url(“bg.gif”) repeat-y fixed

top left red; }

35

CSS – alignment and spacing

text-align property – defines the way in which text lines up with the left or right margins

Values: center (centers the content) justify (justifies text on both sides) left (aligns content on the left) right (aligns content on the right)

Example:h1 { font-family: Verdana, sans-serif;

text-align: center; }

36

CSS – alignment and spacing (con’t)

text-indent property - indents the first line of an element by adding blank space (usually seen with <p> tags)

Example:p {text-indent: 3em }

Values: measurement (eg., 5em or 15px) negative measurement (sets a hanging indent) Percentage (value based on size of containing box)

37


vertical-align property – most useful for creating superscripts or subscripts

Used only for inline elements OR table cells Values: baseline, bottom, middle, sub, super, text-

top, text-bottom, top, or some measurement (+ or -) or percentage (+ or -)

Example:.power { vertical-align: super;

font-size: smaller; }

Use in html by setting class attribute:

x<span class = “power”>2</span> = 64

38


white-space property – allows control of whitespace condensation and word wrapping

Values: normal (normal word wrapping and whitespace condensation) nowrap (condenses whitespace but does not wrap lines) pre (wraps lines as in the source)

Example:.poem { white-space: pre; }Use in html by setting class attribute:<div class = “poem”> ...</div>

39

CSS – how cascading works

Cascade determines what rules apply:

mystyles.css:body { background-color: white; color: black; }h1 { background-color: blue;}

XHTML document:…<head><title> … </title><link type = “text/css” rel = “stylesheet” href = “mystyles.css”><style type = “text/css”>.myclass { background-color: red; }h1 { color: yellow; }</style></head><body><h1 style = “background-color: green;”>Hello <em class = “myclass”>World</em>!</h1></body></html>

See result at: http://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.html

1 css – cascading style sheets. 2 css - intro introduced in late 1996 provides a way to separate...

Documents

css composing rules

number of css rules

css intro

css parts

favor of css

css cascading style

css rule selector

text color