[PPT] - Cascading Style Sheets Overview of Cascading Style Sheets (CSS) PowerPoint Presentation

SLIDE 1

Cascading Style Sheets

SLIDE 2

Overview of Cascading Style Sheets (CSS)

See what is possible with CSS:

Visit http://www.csszengarden.com

2

SLIDE 3

Types of Cascading Style Sheets

Inline Styles Embedded Styles External Styles Imported Styles

3

SLIDE 4

Cascading Style Sheets

 Inline Styles

body section
HTML style attribute
apply only to the specific element

 Embedded Styles

head section
HTML style element
apply to the entire web page document

 External Styles

Separate text file with .css file extension
Associate with a HTML link element in the head section of a web page

4

SLIDE 5

CSS Syntax

Style sheets are composed of "Rules" that describe the styling to be applied. Each Rule contains a Selector and a Declaration

5

The Selector is the HTML element to which the formatting will be applied

SLIDE 6

Common Formatting CSS Properties

 Common CSS Properties:

background-color
color
font-family
font-size
font-style
font-weight
line-height
margin
text-align
text-decoration
width

6

SLIDE 7

Using Color on Web Pages

Computer monitors display color as intensities of red, green, and blue light RGB Color The values of red, green, and blue vary from 0 to 255. Hexadecimal numbers (base 16) represent these color values.

7

SLIDE 8

Hexadecimal Color Values

 # is used to indicate a hexadecimal value  Hex value pairs range from 00 to FF  Three hex value pairs describe an RGB color

#000000 black #FFFFFF white #FF0000 red #00FF00 green #0000FF blue #CCCCCC grey

8

SLIDE 9

Web Color Palette

 A collection of 216 colors  Display the most similar

n the Mac and PC

platforms  Hex values: 00, 33, 66, 99, CC, FF

9

SLIDE 10

Color Names

 Many colors have names recognized by most browsers

10

SLIDE 11

A Third Way to express color

 rgb(R, G, B)  Decimal values 0-255 are used to represent the saturation of red, green, and blue

11

SLIDE 12

External Style Sheets

CSS style rules are contained in a text file separate from the HTML documents. The External Style Sheet text file:

extension ".css"
contains only style rules
does not contain any HTML tags

12

SLIDE 13

body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; } h2 {color: #003366; font-size: 16px; font-weight: bold; }

External Style Sheets

Multiple web pages can associate with the

same external style sheet file.

13

site.css

index.html clients.html about.html

Etc…

SLIDE 14

link Element

A stand-alone tag placed in the header section Purpose: associates the external style sheet file with the web page. Example:

14

SLIDE 15

Multiple Style Sheets

SLIDE 16

CSS Embedded Styles

Configured in the header section of a web page. Use the HTML <style> element Apply to the entire web page document Style declarations are contained between the opening and closing <style> tags Example: Configure a web page with white text on a black background

16

SLIDE 17

Configuring Text with CSS

CSS properties for configuring text:

font-weight: bold
Configures the boldness of text
font-style: italic
Configures text to an italic style
font-size
Configures the size of the text
font-family
Configures the font typeface of the text

17

SLIDE 18

The font-size Property

Accessibility Recommendation: Use em or percentage font sizes – these can be

easily enlarged in all browsers by users

18

SLIDE 19

The font-family Property

Not everyone has the same fonts installed in their computer Configure a list of fonts and include a generic family name

p {font-family: Arial, Verdana, sans-serif;}

19

SLIDE 20

span Element

Purpose:

configure a specially formatted area displayed in-line with other

elements, such as within a paragraph.

It is similar to the div element because it is a generic way to configure a section on a page

span is an inline element: there is no additional empty space

above or below a span

div is a block element: there is empty space above and below

20

SLIDE 21

span Element Example

CSS:

.companyname { font-weight: bold; font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; }

HTML:

<p>Your needs are important to us at <span class="companyname">Acme Web Design</span>. We will work with you to build your Web site.</p>

21

SLIDE 22

Centering Page Content with CSS

#container { margin-left: auto; margin-right: auto; width:80%; }

22

SLIDE 23

Comments

Comments are used in all programming languages to provide information to anyone reading the code HTML comments don’t show in the Browser but can provide details about the code. HTML comments look like:

<!--

->

CSS comments look like:

/* */

All HTML and CSS pages should have a comment explaining the purpose

f the page, the author, and any other helpful comments.

23

SLIDE 24

The “Cascade”

24

SLIDE 25

The Box Model

Content

Text & web page elements

in the container

Padding

Area between the content

and the border

Border

Between the padding

and the margin

Margin

Determines the empty

space between the element and adjacent elements

25

SLIDE 26

Configure Margin with CSS

The margin property
Related properties:
margin-top, margin-right, margin-left, margin-bottom
Configures empty space between the element and adjacent

elements

Examples

h1 { margin: 0; } h1 { margin: 20px 10px; } h1 { margin: 10px 30px 20px; } h1 { margin: 20px 30px 0 30px; }

SLIDE 27

Configure Padding with CSS

The padding property
Related properties:
padding-top, padding-right, padding-left,

padding-bottom

Configures empty space between the content of the HTML

element (such as text) and the border

Syntax example

h1 { padding: 0; } h1 { padding : 20px 10px; } h1 { padding : 10px 30px 20px; } h1 { padding : 20px 30px 0 30px; }

SLIDE 28

Box model in Action

28

SLIDE 29

Normal Flow

Browser displays elements in the order they are coded in the Web page document

<div class="div1" > This is the first box. </div> <div class="div2" > This is the second box. </div> . div1 { width: 2 00px; height: 2 00px; background-color: #D1ECFF; border: 3px dashed #000000; padding: 5px; } . div2 { width: 100px; height: 100px; background-color: #ffffff; border: 3px ridge #000000; margin: 10px; padding: 5px; }

SLIDE 30

Normal Flow

If elements are nested:

<div class=" div1" > This is the outer box. <div class=" div2" > This is the inner box. </div> </div>

With the same styles applied:

. div1 { width: 2 00px; height: 200px; background-color: #D1ECFF; border: 3px dashed #000000; padding: 5px; }

. div2 { width: 100px; height: background-color: #ffffff; border: 3px ridge #000000; margin: 10px; padding: 5px; }

SLIDE 31

h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; }

float Property

Elements that seem to “float"

n the right or left side of

either the browser window or another element are often configured using the float property. Use float: left; or float: right;

31

SLIDE 32

clear Property

Useful to “clear” or terminate a float Values are:

clear: left;
clear: right;
clear: both

The h2 text is displayed in normal flow.

clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.

SLIDE 33

verflow Property

Intended to configure the display

f elements on a Web page.

However, it is useful to “clear” or terminate a float before the end

f a container element

Values are auto, hidden, and scroll

The background does not extend as far as you’d expect.

verflow: auto;

was applied to the div that contains the image and

paragraph. Now the

background extends and the h2 text displays AFTER the floated image.

SLIDE 34

W3C CSS Validation

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

34