web design and css

8/14/2019 Web Design and CSS

1/24

Cascading Style Sheet

Prepared by:

Amelita M. Santos, MAEd-CAI

Objectives:

To learn how to declare CSS.

To differentiate HTML code to CSS

code.

To create a sample CSS codes and

display its output.


2/24

CSS offers much more flexibility in terms of thepresentation effects that they provide. Propertiessuch as color, background, margin, border andmany more can be applied to all elements.

Style sheets also form an integral part ofdynamic HTML as they can be accessed andchanged on-the-fly by scripting languages

What is CSS?

At the time of writing, style sheets are at leastpartially supported by Microsoft Internet Explorer3 upwards, Netscape Navigator 4 upwards andOpera 3.5upwards.


3/24

The style sheet can be written in any text editor.The file should contain any HTML tags like , such as:

:

:

:

CSS Code

HTML Code

hr {color: sienna}

p {margin-left: 20px}

body {background-image:

url(angel2.jpg")}


4/24

In order to decrease repetitious statements withinstyle sheets, grouping of selectors anddeclarations is allowed. For example, all of theheadings in a document could be given identicaldeclarations through a grouping separated bycommas, thus:

h1,h2,h3,h4,h5,h6

{color:blue;font-family: arial;text-align: center

}

Grouping


5/24

H1 {font-weight: bold;font-size: 10pt;line-height: 12pt;font-family: arial

}This is header 1This is header 2

This is a paragraph

My first Web page

This is Header 1

This is Header 2

This is a paragraph

CSS CodeHTML Code


6/24

The 'font-style' property can be selected between

normal, italic and oblique faces within a fontfamily.

Font-style

h1 {font-style: italic}h2 {font-style: normal}p {font-style: oblique}

Black and White ProcessingDigital Camera Media

Diskette, CD, Zip to print

See Output on the NEXTslide


7/24

The OutputThe Output


8/24

Font-variant

Another type of variation within a font family isthe small-caps. In a small-caps font the lowercase letters look similar to the uppercase ones,but in a smaller size and with slightly differentproportions.

The 'font-variant' property selects that font andbe used normal instead of small.


9/24

Example of Font-variant

p.normal {font-variant: normal}p.small {font-variant: small-caps}

Black and WhiteProcessing

Digital CameraMedia


10/24

Font-family

The value is a prioritized list of font family namesand/or generic family names. To indicate that theyare alternatives, values are separated by acomma.

h3 {font-family: Arial}p {font-family: courier}

Black and White Processing

Digital Camera Media


11/24

List-item

Many web pages display lists of items -- these maybe items preceded with a "bullet" (Unordered) or asequentially numbered list (Ordered).

Unordered Lists, or .. tags, are onesthat appear as a list of items with "bullets" ormarkers in the front. The bullet marks will dependon the particular version of your web browser


12/24

Here is an example of an unordered list inHTML:

HTML Code

My Unordered List:

Item 1

Item 2

Item 3


13/24

CSS Code

ul{list-style-type}

My Unordered List

Item 1Item 2

Item 3


14/24

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

This is header 1This is header 2

This is a paragraph

Set the Background Color


15/24

AMSantos CSS

Notes

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

Set an image as the background


16/24

How to place the background imageHow to place the background image

bodybody

{ background-image:url('Baby_angel2.jpg');{ background-image:url('Baby_angel2.jpg');

background-repeat:no-repeat;background-repeat:no-repeat;

background-attachment:fixed;background-attachment:fixed;

background-position:center; }background-position:center; }

Note: For this to work in Mozilla,

Note: For this to work in Mozilla,

the background-attachment property mustthe background-attachment property mustbe set to "fixed".
be set to "fixed".
x x x x x x************************

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

x x x x x x
x x x x x x
Sample of single background image Sample of single background image


17/24

Specify SpacesSpecify Spaces

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 line-

height.

The default line height in most

browsers is about 110% to 120%.

This is a paragraph with a smaller line-

height.

This is a paragraph with a smaller line-height.


18/24


19/24

h1 {text-align: center}h1 {text-align: center}

h2 {text-align: left}h2 {text-align: left}

h3 {text-align: right}h3 {text-align: right}

h1 {text-decoration: overline}h1 {text-decoration: overline}

h2 {text-decoration: line-through}h2 {text-decoration: line-through}

h3 {text-decoration: underline}h3 {text-decoration: underline}

h4 {text-decoration: blink}h4 {text-decoration: blink}a {text-decoration: none}a {text-decoration: none}

This is header 1This is header 1This is header 2This is header 2



Text Alignment and

Decoration


20/24

Indent text & Control the letters in a textIndent text & Control the letters in a text

p {text-indent: 1.5cm}p {text-indent: 1.5cm}

p.uppercase {text-transform: uppercase}p.uppercase {text-transform: uppercase}

p.lowercase {text-transform: lowercase}p.lowercase {text-transform: lowercase}

p.capitalize {text-transform: capitalize}p.capitalize {text-transform: capitalize}

This is some text in a paragraphThis is some text in a paragraph



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

This is some text in a

This is some text in aparagraph in uppercase
paragraph in uppercase


paragraph in lowercase
paragraph in lowercase


paragraph as capitalize
paragraph as capitalize


21/24

h3 {font-family: tahoma}h3 {font-family: tahoma}

p {font-family: courier}p {font-family: courier}

p.sansserif {font-family: sans-serif}p.sansserif {font-family: sans-serif}

Use of Different Font Styles: Use of Different Font Styles:

defaultdefault

Times new roman
Times new roman

This is header 3- tahomaThis is header 3- tahoma

This is a paragraph- courier

This is a paragraph- courier

This is a

This is a

paragraph- sans-serif
paragraph- sans-serif
Different FONT Styles


22/24

BordersBorders

p { border: medium double rgb(200,250,100)}p { border: medium double rgb(200,250,100)}

p.soliddouble {border-style: solid double}p.soliddouble {border-style: solid double}

p.doublesolid {border-style: double solid}p.doublesolid {border-style: double solid}

p.groovedouble {border-style: groove double}p.groovedouble {border-style: groove double}

p.three {border-style: solid double groove}p.three {border-style: solid double groove}

p.dotted {border-style: dotted}p.dotted {border-style: dotted}

p.dashed {border-style: dashed}p.dashed {border-style: dashed}

p.solid {border-style: solid}p.solid {border-style: solid}

p.double {border-style: double}p.double {border-style: double}

p.groove {border-style: groove}p.groove {border-style: groove}p.ridge {border-style: ridge}p.ridge {border-style: ridge}

p.inset {border-style: inset}p.inset {border-style: inset}

p.outset {border-style: outset}p.outset {border-style: outset}


23/24

Border StylesBorder Styles

Border Styles Border Styles

Some text

Some text

Some text

Some text

Some text

Some text

Some text

Some text

A groove border

A groove border

A ridge border

A ridge border

An inset border

An inset border

An outset border

An outset border

Some text

Some text

A dotted border

A dotted border

A dashed border

A dashed border

A solid border

A solid border

A double border

A double border


24/24

p.one

{ border-style: solid;

border-color: #0000ff }

p.two


border-color: #ff0000 #0000ff }

p.three


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.

web design and css

Documents