crash course to web development - css

8/6/2019 Crash Course to Web Development - CSS

http://slidepdf.com/reader/full/crash-course-to-web-development-css 1/51

C

S

S

Intro toWEB DEVELOPMENT

Prepared by: Ceralde, Jeremiah B.



Learning Objectives:

: understand what CSS is all about.

: learn to design a website efficiently.

: learn how to design properly.

: create a website design from ´SCRATCHµ using CSS.

CSS Main Objective:

: to save a lot of work.



CSS File Extension:

: .css

Ex:

mystylesheet.css

CSS Rule:

: two main parts: a ´SELECTORµ and ´ONE or MORE Declarationsµ

CSS Syntax:

p

{

color: gray;

font ²size: 12px;

}

Selector

Property

Value

Declaration(s)

CSS Basic



CSS Comments:

: CSS comments starts with ´ / * µ and ends with ´ */ µ

Ex.

/* This is a link */

a

{

text-decoration: none;

}

CSS Comment



CSS ID Selectors:

: used to specify a style for a single, UNIQUE element.

: always starts with ´ # µ.

Ex.

#title1

{

text-align: center;

color: red;

}

Note: ID selectors must start with a LETTER and not a NUMBER.



CSS ID Selectors:

CODE:

<html><head>

<style type="text/css">

# title1{

text-align: center;color: red;

}</style>

</head>

<body>

<p id="title1">Hello World!</p><p>This paragraph is not affected by the style.</p>

</body>

</html>

RESULT:

Hello World!

This paragraph is not affected by the style.



CSS Class Selectors:

:used to specify a style for a GROUP of elements.

: allows you to set a particular style for any HTML elements with the same

class.

: always starts with ´ . µ

Ex.

.color

{

color: red;}

Note: Class selectors must start with a LETTER and not a NUMBER.




CODE:

<html>

<head>


.color{color: red;

}</style>

</head>

<body><h1 class=´color">Heading 1 is color red</h1>

<p class=" color´>This is a color red paragraph.</p><p>This paragraph is not affected by the style.</p>

</body>

</html>

RESULT:

Heading 1 is color redThis is a color red paragraph.

This paragraph is not affected by the style




: You can also specify that only specific HTML elements should be affected

by a class.

Ex.

p.color

{

color: red;

}




CODE:

<html>

<head>


p.color{color: red;

}</style>

</head>

<body><h1 class=´color">Heading 1 is not affected</h1>

<p class=´color´>This is a color red paragraph.</p><p>This paragraph is not affected by the style.</p>

</body>

</html>

RESULT:

Heading 1 is not affectedThis is a color red paragraph.

This paragraph is not affected by the style



Three Ways to Insert CSS:

: External style sheet

: Internal style sheet

: Inline style

External Style Sheet:

: can be applied to many pages.

Ex.

: mystyle.css contains the code below.

hr { color: sienna; }

p { margin-left: 20px; }

a { padding: 0px; }



Internal Style Sheet:

: is used when a single document has a unique style.

Ex.

: gallery.htm contains the code below.

<head>


hr { color: sienna; }

p { margin-left: 20px; }

a { padding: 0px; }

</style>

</head>



Inline Style:

: placed inside the HTML Element and uses the attribute ´STYLEµ

Ex.

: gallery.htm contains the code below.

<p style="color:sienna; margin-left:20px;">

This is a paragraph.

</p>



CSS STYLING

CSS Background:

: used to define the background effects of an element.

: CSS properties used for background effects:� background-color

� background-image

� background-repeat

�

background-attachment� background-position



CSS Background:

The ´background-colorµ Property:

: The background color can be specified by:

: name - a color name, like "red"

: RGB - an RGB value, like "rgb(0,0,0)´

: Hex - a hex value, like "#fff´ or ´#ffffffµ, like ´#08cµ or ´#0088ccµ

Ex.

h1 { background-color: red; }

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

div { background-color: #fff; }



CSS Background:

The ´background-imageµ Property:

: By default, the image is repeated so it covers the entire element.

Ex.

body

{

background-image: url( ¶photo1.jpg¶ );

}

div

{

background-image: url( images/photo2.png );

}

Image Name.(file extension)

Folder Name



CSS Background:

The ´background-repeatµ Property:

: repeat-x

: Repeats the image ´HORIZONTALLYµ

: repeat-y

: Repeats the image ´VERTICALLYµ

: no-repeat

: The image is ´not repeatedµ



CSS Background:

The ´background-positionµ Property:

: sets how the image is positioned.

Values:

- left top - right center - center top

- left bottom - right top - center bottom

- left center - right bottom - center center

NOTE: If you only specify one value, the next value will always be CENTER

Ex.

background-position: left; (The VALUE will become left center)



CSS Background:

The ´Background - Shorthandµ Property:

: Shortens code

: Define the background property in one declaration.

Ex.

body

{

background: #ffffff url(¶arrows.png') no-repeat center top;

}

NOTE: When using the shorthand property the order of the property values

are:

1. background-color 4. background-attachment2. background-image 5. background-position

3. background-repeat



CSS Text:

Text Color:

: used for changing color of the text

: color Property

Ex.

a { color: blue; }

p { color: #00ff00; }

h2 { color: rgb(255,0,0); }



CSS Text:

Text Alignment:

: used for aligning text

: text-align Property

Values:

- left - center

- right - justify

Ex.

h1 { text-align: left; }

h2 { text-align: right; }

h3 { text-align: center; }

h4 { text-align: justify; }



CSS Text:

Text Decoration:

: The text-decoration property is used to set or remove decorations fromtext.

: The text-decoration property is mostly used to remove underlines fromlinks for design purposes:

: text-decoration Property

Values:

- none - underline - blink

- overline - line-through

Ex.

a { text-decoration: none; }

p { text-decoration: underline; }



CSS t:

t I t ti :

: s t s if t i t ti f t first li f t t.

: t t-i t r rt

.{ t t-i t: ; }



CSS t:

t Styl :

: s f r i f t st l .

: f t-styl r rty

Val s:

- r l - it li - li

.

. r l { f t-styl : r l; }

.it li { f t-styl : it li ; }

. li { f t-styl : li ; }



CSS t:

t Siz :

: s f r i f t siz .: f lt siz is 6 .

: l i , , r t, t ..

: f t-siz r rty

Ex.

{ f t-siz : %; }

{ f t-siz : ; }

{ f t-siz : .87 ; }



CSS t:

t Shorthand roperty:

: f ont roperty

Ex.

p

{

f ont: it li l px " i r ", " r t S", ,

r , ri l, s s-s rif;

}

NOTE: s t f t i s rt , t r rs r :

. f ont-style 3. f ont-wei ht 5. f ont-f amily

2. f ont- ariant . f ont-size/line-hei ht



CSS Box Model:: All HTML elements can be considered as boxes.

: In CSS, the term "box model" is used when talking about design and

layout.

: The CSS box model is essentially a box that wraps around HTML elements,

and it consists of: margins, borders, padding, and the actual content.

CSS Border:

: border-style Property:

: The border-style property specifies what kind of border to display.

Value:- solid - dashed

Ex.p { border-style: solid; }

a { border-style: dashed; }



Border:

: border- idth Property:

: sets the width of the border

: set in pixel, or (thin, medium or thick)

Ex.

p { border- idth: 4px; }

a { border- idth: medium; }

div { border- idth: thin; }

h1 { border- idth: thick; }

Note: The "border-width" property does not work if it is used alone. Use

the "border-style" property to set the borders first.



CSS Border:

: border-color Property:

: sets the color of the border

Ex.

p { border-color: red; }

a { border-color: rgb(0, 0, 0); }

h2 { border-color: #000; }

Note: The "border-color" property does not work if it is used alone. Use

the "border-style" property to set the borders first.



CSS Border:

Border ² Shorthand Property:

Ex.

border-top-style: solid;

border-top-color: #000;

border-top- idth: 1px

Values:

- top

- bottom

- right

- left

border-top: 1px solid #000;

Orders hen using shorthand:

1. border- width

2. border-style

3. border-color

Sets only one side of the box model



CSS Border:

Border ² Shorthand Property:

Ex.

border-style: solid;

border-color: #000;

border- idth: 1px

border: 1px solid #000;

Sets the four sides of the box model



CSS Margin:

:margin Property:

: completely transparent

Ex.

margin-top: 100px;

margin-bottom: 100px;

margin-right: 50px;

margin-left: 50px;

Background of the

page (html)

margin

Html page

Border



CSS Margin:

Margin ² Shorthand Property:

Ex.

margin: 25px 50px 75px 100px;

- top margin is 25px

- right margin is 50px

- bottom margin is 75px

- left margin is 100px



CSS Margin:


Ex.

margin: 25px 50px 75px;

- top margin is 25px

- right and left margin is 50px

- bottom margin is 75px



CSS Margin:


Ex.

margin: 25px 50px;

- top and bottom margin is 25px

- right and left margin is 50px



CSS Margin:


Ex.

margin: 25px;

- top, right, bottom, and left margin is 25px



CSS Padding:

Padding ² Shorthand Property:

Ex.

- padding: 25px 50px 75px 100px;

- top padding is 25px

- right padding is 50px

- bottom padding is 75px

- left padding is 100px



CSS Padding:


Ex.

- padding: 25px 50px 75px;

- top padding is 25px

- right and left padding is 50px

- bottom padding is 75px



CSS Padding:


Ex.

- padding: 25px 50px;

- top and bottom padding is 25px

- right and left padding is 50px



CSS Padding:


Ex.

- padding: 25px;

- top, right, bottom, and left padding is 25px



CSS Dimension:

Dimension Properties:

1. height

- Sets the height of an element

2. idth

- Sets the width of an element

3. max-height

- Sets the maximum height of an element

4. max- idth

- Sets the maximum width of an element

5. min-height

- Sets the minimum height of an element

. min- idth

- Sets the minimum width of an element



The HEIGHT and WIDTH Properties of an ELEMENT:

The total idth of an element should al ays be calculated this ay:

Total element idth = width + left padding + right padding + left border +

right border + left margin + right margin

Ex.

div {

idth: 250px;padding: 10px;

border: 5px solid gray;

margin: 10px;

}

Let·s do the MATH thingy:

Total element idth = 250px + 10px + 10px + 5px + 5px + 10px + 10px

= 300px

The Total Width of the

<div> element is 300px



The total height of an element should al ays be calculated this ay:

Total element height = height + top padding + bottom padding + top

border + bottom border + top margin +

bottom margin

Ex.

div {

height: 250px;

padding: 10px;

border: 5px solid gray;

margin: 10px;

}

Let·s do the MATH thingy:

Total element height = 250px + 10px + 10px + 5px + 5px + 10px + 10px

= 300px

The Total Height of the

<div> element is 300px



CSS Advance:

SELECTORS EXAMPLE EXAMPLE SELECTS

element p All <p> elements

element, element div, p All <div> elements and all <p>elements

element element div pAll <p> elements inside <div>

elements

element > element div > p

All <p> elements ere t e parent isa <div> element

:hover a:hover Mouse is over the link



N ti S l t



CSS Advance:

Ex.

div p{

padding: 0;

margin: 0;

}

#menuBar a{

padding: 0;margin: 0;

text-decoration: none;

font:

bold 12px Tahoma, Arial, Verdana;}

All:

<p></p> elements inside <div></div>

will be affected and with the same style.

All:

<a></a> elements inside id=´#menuBarµ

will be affected and with the same style.

Nesting Selectors



CSS Advance:

Ex.

div > h2{

padding: 0;

margin: 0;

font: bold 13px Tahoma, Helvetica, Arial, Verdana;

color: #0 c;

}

All:

<h2></h2> elements where the parent is a <div></div>

elements will be affected and with the same style.



CSS Advance:

Ex.

a:hover{

color: red;

}

All:

<a></a> elements will be in color red

if the mouse is over that element.

crash course to web development - css

Documents