CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu.

CSS 1-1

Cascading Style Sheets(CSS)

Xingquan (Hill) Zhuxqzhu@cse.fau.edu

CSS 1-2

CSS Introduction Levels of Style Sheets

Inline style sheets Document-level style sheets (embedded style sheets) External style sheets

Style Specification Formats Depends on the level of the style sheet Inline vs Document level

Selector Forms Simple selector, Class selector, Generic selector, Id

selector Pseudo Classes Property value forms

Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders

CSS 1-3

Introduction Evolution

The CSS1 specification was developed in 1996 CSS2 was released in middle-1998 CSS3 is on its way

Things you should know about CSS CSSs provide the means to control and change

presentation of HTML documents• But Why? Element presentation vs document structure

CSS is not technically HTML, but can be embedded in HTML documents

Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents

Style is specified for a tag by the values of its properties

CSS 1-4

Levels of Style Sheets

Inline Specified for a specific occurrence of a tag and apply only to

that tag Appears in the tag itself (Example)

Document-level style sheets Apply to the whole document in which they appear Appears in the head of the document (Example)

External style sheets (Example) Can be applied to any number of documents In separate files, potentially on any server on the Internet A <link> tag is used to specify that the browser is to fetch and

use an external style sheet file <link rel = "stylesheet" type = "text/css" href = "http://www.wherever.org/termpaper.css"> </link>

CSS 1-5

CSS Validation

http://jigsaw.w3.org/css-validator/validator-upload.html

CSS 1-6

CSS Introduction Levels of Style Sheets

Inline Document-level style sheets (embedded style sheets) External style sheets

Style Specification Formats Depends on the level of the style sheet Inline vs Document level

Selector Forms Simple selector, Class selector, Generic selector, Id

selector Pseudo Classes Property value forms

Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders

CSS 1-7

Style Specification Formats

Format depends on the level of the style sheet

Inline Style sheet appears as the value of the style

attribute General form:

style = "property_1: value_11, value_12, value_13; property_2: value_2;

…property_n: value_n;“

Final ; optional but preferred

Example

CSS 1-8

Style Specification Formats: Document level

Style sheet appears as a list of rules that are the content of a <style> tag

The <style> tag must include the type attribute, set to "text/css"

The list of rules Selector1 {property_1: value_1; property_2:

value 2} Selector2 {property: value}

Comments in the rule list must have a different form - use C comments (/*…*/)

Example

CSS 1-9

Style Specification Formats: Conflicting Styles

Styles defined by the user take precedence over styles defined by the user agent

Styles defined by authors take precedence over styles defined by the user.

Styles defined for parent elements are also inherited by children (nested) elements

Inheritance Example In case of conflict

Properties defined for child and descendant elements have a greater specificity than properties defined for parent and ancestor elements.

CSS 1-10

CSS Introduction Levels of Style Sheets

Inline Document-level style sheets (embedded style sheets) External style sheets

Style Specification Formats Depends on the level of the style sheet Inline vs Document level

Selector Forms Simple selector, Class selector, Generic selector, Id

selector Pseudo Classes Property value forms

Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders

CSS 1-11

Selector Forms

Simple Selector Form The selector is a tag name or a list of tag

names, separated by commas• Simple examples:

– H1, h3, p

• Contextual selectors– Ol ol li

– P em

CSS 1-12

Selector Forms: Class Selector

Used to allow different occurrences of the same tag to use different style specifications

A style class has a name, which is attached to a tag name p.narrow {property: value; …} p.wide {property: value; …}

The class you want on a particular occurrence of a tag is specified with the class attribute of the tag <p class = "narrow"> This is narrow </p> <p class = "wide"> This is wide class </p>

CSS 1-13

Selector Forms: Generic Selector

A generic class can be defined if you want a style to apply to more than one kind of tag

A generic class must be named, and the name must begin with a period .really-big { … }

Use it as if it were a normal style class <h1 class = "really-big"> … </h1> … <p class = "really-big"> … </p>

Example

CSS 1-14

Selector Forms: id Selector

Allow the application of a style to one specific element General form:

• #specific-id {property-value list} Example:

• #section14 {font-size: 20}• When referring to this the id selector

– <h1 id=“section14”> Welcome to my Home </h1>

CSS 1-15

Pseudo Classes

Pseudo classes are styles that apply when something happens, rather than because the target element simply exists

Names begin with colons hover classes apply when the mouse cursor is

over the element focus classes apply when an element has

focus

Example

CSS 1-16

CSS Introduction Levels of Style Sheets

Inline Document-level style sheets (embedded style sheets) External style sheets

Style Specification Formats Depends on the level of the style sheet Inline vs Document level

• Conflicting Styles Selector Forms

Simple selector, Class selector, Generic selector, Id selector

Pseudo Classes Property value forms

Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders

CSS 1-17

Property Value Forms

There are 60 different properties in 7 categories Fonts Lists Alignment of text Margins Colors Backgrounds Borders

CSS 1-18

Units of Measurement Units (no space is allowed between the value

and the unit specification) px - pixels in – inches (1 inch = 2.54 cm) cm - centimeters mm - millimeters pt – points (1/72 inch) pc - picas (12 points) em - height of the letter ‘M’ ex-height - height of the letter ‘x’

Example P { line-height:150% } /* 150% of ‘font-size’ */ P {line-height: 1.5em} #banner { height: 60%; width:70%; margin-left:15%;

border: 1px solid #000} /* a box */

CSS 1-19

Font Property Font-family

Value is a list of font names - browser uses the first in the list it has

font-family: Arial, Helvetica, Courier Generic fonts: serif, sans-serif, cursive, fantasy, and

monospace (defined in CSS) Browser has a specific font for each If a font name has more than one word, it should be

single-quoted

Font-size Possible values: a length number or a name, such as

xx-small, smaller, xx-large, etc

Example

CSS 1-20

Font Property

Font-style italic, oblique (useless), normal

Font-weight - degrees of boldness bolder, lighter, bold, normal Could specify as a multiple of 100 (100 – 900)

• 400 is the normal size

Font (shorthand) For specifying a list of font properties font: bolder 14pt Arial Helvetica Order must be: style, weight, size, name(s)

CSS 1-21

Text related Properties

Text-decoration line-through, overline, underline, none

Letter-spacing; Word-spacing Value is any length property value

Text-align Left; right; center; justify

Vertical-align Baseline; sub; super; top; text-top; middle; bottom;

text-bottom; <percentage> Text-transform

Capitalize; uppercase; lowercase; none Text-indent

Value (percentage) Line-height

Value (number, percentage)

CSS 1-22

Position properties

Absolute positioning Position: absolute; top, left, z-index

Example# one{

position:absolute; top: 1em; left: 1em;}

Relative positioning Position: relative; Example Span

• Grouping element: does not apply any inherent formatting to its contents

CSS 1-23

Alignment of Text Element dimensions

Specify the actual dimensions of each page element Example

Nested elements Example The text-indent property allows indentation

Takes either a length or a % value The text-align property has the possible

values, Left (the default), center, right, or justify

Sometimes we want text to flow around another element the float property Left, right, and none (default)

CSS 1-24

Alignment of Text (contd.)

If we have an element we want on the right, with text flowing on its left, we use the default text-align value (left) for the text and the right value for float on the element we want on the right

<img src = "c210.jpg" style = "float: right" />-- Some text with the default alignment – left

Clear float <p style=“float: clear” …

Example

CSS 1-25

Border related properties

Box model Margin-top (right, left, bottom)

Value (percentage) Padding-top (right, left, bottom)

Value (percentage) Border-top-width (right, left, bottom)

Thin, medium, thick (value) Border-style

Dotted, dashed, double, none Border-color

Example

CSS 1-26

Background

Background-color: Red; #0000FF

Background-image: url(myimage.jpg)

Background-repeat: Repeat; no-repeat; repeat-x; repeat-y:

Background-position: Top; center; bottom; left; right; 20px 20px

Background-attachment: Fixed; scroll;Background for single elements

Example

CSS 1-27

List Property

list-style-type Disc, circle, square, decimal, lower-roman,

upper-roman, lower-alpha, upper-alpha, none.

Can also use an image for the bullets in an ordered list <li style = "list-style-image: url(bird.jpg)">

Example

CSS 1-28

User Style Sheets

Users format pages based on preference

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>User Styles</title> <style type = "text/css">

.note { font-size: 9pt }</style>

</head> <body> <p>Thanks for visiting my Web site. I hope you enjoy it. </p><p class = "note">Please Note: This site will be

moving soon. Please check periodically for updates.</p> </body>

</html> Example

CSS 1-29

Other interesting stuff

Cursor Example Specifies the type of cursor to be displayed when pointing on an

element. • Cursor: url(sample.cur), cursor: crosshair

First letter (pseudo element) Example Adds special style to the first letter of a text

• P:first-letter{color:#000; font-size:xx-large} Mighty Hover Example

http://icant.co.uk/csstablegallery/index.php?css=75#r75

Complete CSS2 Properties:

http://www.w3schools.com/css/css_reference.asp

CSS 1-30

CSS Introduction Levels of Style Sheets

Inline Document-level style sheets (embedded style sheets) External style sheets

Style Specification Formats Depends on the level of the style sheet Inline vs Document level

• Conflicting Styles Selector Forms

Simple selector, Class selector, Generic selector, Id selector

Pseudo Classes Property value forms

Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders