Cascading Style Sheet Objectives:  To learn how to declare CSS.  To differentiate HTML code to CSS code.  To create a sample CSS codes and display its output.

Prepared by: Amelita M. Santos, MAEd-CAI

What is CSS? CSS offers much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border and many more can be applied to all elements. Style sheets also form an integral part of dynamic HTML as they can be accessed and changed on-the-fly by scripting languages At the time of writing, style sheets are at least partially supported by Microsoft Internet Explorer 3 upwards, Netscape Navigator 4 upwards and Opera 3.5 upwards.

The style sheet can be written in any text editor. The file should contain any HTML tags like , <STYLE> such as: HTML Code <style type="text/css"> : : :

CSS Code <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url(“angel2.jpg")}

Grouping In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping separated by commas, thus: <style type="text/css"> h1,h2,h3,h4,h5,h6 { color:blue; font-family: arial; text-align: center }

HTML Code

This is Header 1

This is Header 2

This is a paragraph

CSS Code <style type="text/css"> H1 { font-weight: bold; font-size: 10pt; line-height: 12pt; font-family: arial }

This is header 1

This is header 2

This is a paragraph

Font-style The 'font-style' property can be selected between normal, italic and oblique faces within a font family. <style type="text/css"> h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique}

Black and White Processing

Digital Camera Media

Diskette, CD, Zip to print

See Output on the NEXT slide

The Output

Font-variant

Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font and be used normal instead of small.

Example of Font-variant <style type="text/css"> p.normal {font-variant: normal} p.small {font-variant: small-caps}

Black and White Processing

Digital Camera Media

Font-family The value is a prioritized list of font family names and/or generic family names. To indicate that they are alternatives, values are separated by a comma. <style type="text/css"> h3 {font-family: Arial} p {font-family: courier}

Black and White Processing

Digital Camera Media

List-item Many web pages display lists of items -- these may be items preceded with a "bullet" (Unordered) or a sequentially numbered list (Ordered). Unordered Lists, or

..

tags, are ones that appear as a list of items with "bullets" or markers in the front. The bullet marks will depend on the particular version of your web browser

Here is an example of an unordered list in HTML: HTML Code My Unordered List:

• Item 1
• Item 2
• Item 3

CSS Code <style type="text/css"> ul{list-style-type}

My Unordered List


• Item 1
• Item 2
• Item 3

Set the Background Color <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}

This is header 1

This is header 2

This is a paragraph

Set an image as the background <style type="text/css"> body { background-image: url('back.jpg') } h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}

This is header 1
with Background Image

This is header 2

This is a paragraph

How to place the background image <style type="text/css"> body { background-image:url('Baby_angel2.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }

Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".

x x x x x x************************ x x x x x x

Sample of single background image

Specify Spaces <style type="text/css"> h1 {letter-spacing: -4px} h4 {letter-spacing: 0.5cm} p.small {line-height: 90%} p.big {line-height: 200%}

Specify the space between characters

This is header 1

This is header 4

Specify the space between lines

This is a paragraph with a standard lineheight.
The default line height in most browsers is about 110% to 120%.

This is a paragraph with a smaller lineheight. This is a paragraph with a smaller lineheight.

<style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none}

This is header 1

This is header 2

This is header 3

This is header 4

Text Alignment and Decoration

Indent text & Control the letters in a text <style type="text/css"> p {text-indent: 1.5cm} p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize}

This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph WITH INDENTION

This is some text in a paragraph in uppercase

This is some text in a paragraph in lowercase

This is some text in a paragraph as capitalize

Different FONT Styles <style type="text/css"> h3 {font-family: tahoma} p {font-family: courier} p.sansserif {font-family: sans-serif}

Use of Different Font Styles: default
Times new roman

This is header 3- tahoma

This is a paragraph- courier

This is a paragraph- sans-serif

Borders <style type="text/css"> p { border: medium double rgb(200,250,100)} p.soliddouble {border-style: solid double} p.doublesolid {border-style: double solid} p.groovedouble {border-style: groove double} p.three {border-style: solid double groove} p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset}

Border Styles

Border Styles

Some text

Some text

Some text

Some text

A groove border

A ridge border

An inset border

An outset border

Some text

A dotted border

A dashed border

A solid border

A double border

<style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) }

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.