Dynamic HTML Cascading Style Sheets (CSS), Slides of Web Programming and Technologies

Download Dynamic HTML Cascading Style Sheets (CSS) and more Slides Web Programming and Technologies in PDF only on Docsity!

Dynamic HTML

Cascading Style Sheets

TM

(CSS)

CSS allows you to specify the style of your pageelements (spacing, margins, etc.) separately from thestructure of your document (headers, body text, links,etc.). This separation of structure from content allowsgreater manageability and makes changing the style ofyour document easier.1) Define how documents should be presented onscreens or in print2) Put a structure on formatting3) Defined once and used many times4) Nested styles are permitted for flexibility5) HTML tags can be redefined with the desiredpresentation6) Custom styles can be defined as needed

CSS

**

inline styles

inline styles

inline styles

inline styles inline styles **

Font Lengths

there are lots of style properties whose value is specified as somekind of length, including font sizes, indentation, spacing, etc.Lengths are specified using a number followed by a 2 letter code thatindicates the units. Some of the common unit codes are:

Color

Each element of a document has both a foregroundand background color. These can be changed withthe following properties:

Text Properties

Font properties determine the size, color and style ofcharacters. Text properties determine the spacing andalignment. Here are some of the text properties

:

Name

Type of Unit

What It Is

Example

em

EM dash

Width of the letterM for that font(and height)

3em

ex

x-height

Height of theUpperCase letteris the same as ofthe lowercase x ofthat font

5ex

px

Pixel

Based on themonitor'sresolution

125px

Relative Length Values

xx-small

x-small

small medium large x-large xx-large

Absolute Length Values

Name

Type of Unit

What It Is

Example

cm

Centimeters

5.1cm

pc

Picas

Generally usedto describe fontsize. 1pc =12pt

3pc

mm

Millimeters

25mm

pt

Point

Generally usedto describe fontsize. 36pt = 1/2inch

12pt

in

Inches

1 inch = 2.54cm

2.25in

This is my paragraph. It should start out with an aquabackground and purple text. I'm thinking about changingcolors soon. Once I change I'll start a span with some otherstuff, perhaps a red background. OK here goes.This part of the paragraph should have a red backgroundand the text should be in white.This text is after the end of the span, so it should not havea red background.

WIDER
is better.

We all need to**

SPAN style="letter-spacing:10pt;font-

family: Arial; background-color:white;color: lime;">LEARN

SPAN>

and to understand how to use

** CSS

Cursor Types

Embedded Styles (Global)

Embedded CSS

(the Intended way)

1. Style Rules defined only once2. Create one place to store all Styles3. Linked to many Web pages4. Embedded Styles require less work!

Set Background colors or imagesSet one or more marginsDraw Borders in different sizes and colors.

**5. Embedded Styles are different sizes and colors.6. Embedded Styles use Curly Braces.To embed your **

Embedded Styling