Sunteți pe pagina 1din 51

C S S

Intro to WEB 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 Basic

CSS Rule: : two main parts: a SELECTOR and ONE or MORE Declarations CSS Syntax: p { color: gray;

Selector Property Declaration(s) Value

font size: 12px; }

CSS Comments: : CSS comments starts with Ex. /* This is a link */ a { text-decoration: none; }

/*

and ends with

*/

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.

RESULT: 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> 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.

RESULT: CSS Class Selectors: CODE:

Heading 1 is color red


This is a color red paragraph. This paragraph is not affected by the style <style type="text/css"> .color { color: red; } </style>

<html> <head>

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

CSS Class Selectors:

: You can also specify that only specific HTML elements should be affected by a class.

Ex. p.color { color: red; }

RESULT: CSS Class Selectors: CODE:

Heading 1 is not affected


This is a color red paragraph. This paragraph is not affected by the style <style type="text/css"> p.color { color: red; } </style>

<html> <head>

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

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 p a

{ color:

sienna; }

{ margin-left: 20px; } { padding: 0px; }

Internal Style Sheet: : is used when a single document has a unique style.

Ex. : gallery.htm contains the code below.

<head> <style type="text/css"> hr { color: sienna; }

p { margin-left: 20px; } a { padding: </style> </head> 0px; }

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.

Image Name.(file extension)


body { background-image: url( photo1.jpg ); }

Folder Name
div { background-image: url( images/photo2.png ); }

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 - left bottom - left center - right center - right top - right bottom - center top - center 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-attachment 2. 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 - right Ex. h1 { text-align: left; } h2 { text-align: right; } h3 { text-align: center; } h4 { text-align: justify; } - center - justify

CSS Text: Text Decoration: : The text-decoration property is used to set or remove decorations from text. : The text-decoration property is mostly used to remove underlines from links for design purposes: : text-decoration Property Values: - none - overline Ex. a { text-decoration: none; } p { text-decoration: underline; } - underline - line-through - blink

CSS tI : s

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

if t

:t

t-i

t r

rt

. { t t-i t: ; }

CSS t : s

t: il : f r i f tf .

:f

t-f

il

rt

{ f t-f il : lv ti r } ," i r s-s rif; ", " r t S", ,

, ri l, s

t : If t t ti r s, li

f f

tf t-f

il is il : " i

r t s ".

r , it

st

CSS

t: t Styl :

: s :f Val

f r t-styl s: r r

f rty

t st l .

- it li

li

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

.it li . li

t-styl : it li ; } t-styl : li ; }

CSS

t: t Siz :

: s : : :f f

f r

t siz .
t, t ..

lt siz is 6 . l i , , r t-siz r rty

Ex. { f { f { f t-siz : t-siz : t-siz : .87 %; } ; } ; }

CSS

t: t Shorthand roperty:

: font roperty
Ex.

p { font: it li r } l px " , ri l, s i r ", " r t S", ,

s-s rif;

NOTE:

s tf

ti

rt

,t

rs r : 5. font-family

. font-style 2. font- ariant

3. font-wei ht . font-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 Ex. p { border-style: solid; } a { border-style: dashed; } - dashed

Border: : border- idth Property: : sets the width of the border : set in pixel, or (thin, medium or thick) Ex. p a { border- idth: 4px; } { 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 Sets only one side of the box model

border-top: 1px solid #000;

Values: - top - bottom - right - left

Orders

hen using shorthand:

1. border- width 2. border-style 3. border-color

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;

Html page Border

margin

Background of the page (html)

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: Margin Shorthand Property: Ex.

margin: 25px 50px 75px;

- top margin is 25px - right and left margin is 50px - bottom margin is 75px

CSS Margin: Margin Shorthand Property: Ex.

margin: 25px 50px;

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

CSS Margin: Margin Shorthand Property: Ex.

margin: 25px;

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

CSS Padding: :padding Property: : clears an area around the content (inside the border) of an element. : is affected by the background color of the element. Ex. padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px; top padding (25px) Demonstrating padding bottom padding (25px)

Box model with content

left padding (50px)

right padding (50px)

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: Padding Shorthand Property: Ex.

- padding: 25px 50px 75px;


- top padding is 25px - right and left padding is 50px - bottom padding is 75px

CSS Padding: Padding Shorthand Property: Ex.

- padding: 25px 50px;

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

CSS Padding: Padding Shorthand Property: 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; } Lets 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; } Lets 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 element element, element element element element > element :hover

EXAMPLE p div, p div p div > p a:hover

EXAMPLE SELECTS All <p> elements All <div> elements and all <p> elements All <p> elements inside <div> elements All <p> elements ere t e parent is a <div> element Mouse is over the link

CSS Advance: Ex. p { text-indent: 30px; All <p></p> elements color: black; will be affected and with padding: 0; the same style. margin: 0; font: 12px Helvetica, Tahoma, MS Trebuchet; }

div { background-color: padding: width: height: } black; 10px; 200px; 200px; All <div></div> elements will be affected and with the same style.

CSS Advance: Ex.

Grouping Selectors

p, a, ul, li, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }

All: - <p></p> - <ul></ul> - <h1></h1> - <h3></h3> - <h5></h5> - <a></a> - <li></li> - <h2></h2> - <h4></h4> - <h ></h >

elements will be affected and with the same style.

Nesting Selectors
CSS Advance: Ex. div p { All: <p></p> elements inside <div></div> padding: 0; margin: 0; will be affected and with the same style.

#menuBar a { padding: 0; margin: 0; text-decoration: none; font: bold 12px Tahoma, Arial, Verdana; } All: <a></a> elements inside id=#menuBar will be affected and with the same style.

CSS Advance: Ex. div > h2 { padding: margin: font: color: } 0; 0; bold 13px Tahoma, Helvetica, Arial, Verdana; #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.