View
221
Download
0
Category
Preview:
Citation preview
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 2/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 3/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 4/51
CSS Comments:
: CSS comments starts with ´ / * µ and ends with ´ */ µ
Ex.
/* This is a link */
a
{
text-decoration: none;
}
CSS Comment
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 5/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 6/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 7/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 8/51
CSS Class Selectors:
CODE:
<html>
<head>
<style type="text/css">
.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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 9/51
CSS Class Selectors:
: You can also specify that only specific HTML elements should be affected
by a class.
Ex.
p.color
{
color: red;
}
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 10/51
CSS Class Selectors:
CODE:
<html>
<head>
<style type="text/css">
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 11/51
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; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 12/51
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: 0px; }
</style>
</head>
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 13/51
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>
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 14/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 15/51
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; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 16/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 17/51
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µ
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 18/51
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)
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 19/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 20/51
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); }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 21/51
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; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 22/51
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; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 23/51
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: ; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 24/51
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 25/51
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 ; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 26/51
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 ; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 27/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 28/51
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; }
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 29/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 30/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 31/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 32/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 33/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 34/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 35/51
CSS Margin:
Margin ² Shorthand Property:
Ex.
margin: 25px 50px 75px;
- top margin is 25px
- right and left margin is 50px
- bottom margin is 75px
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 36/51
CSS Margin:
Margin ² Shorthand Property:
Ex.
margin: 25px 50px;
- top and bottom margin is 25px
- right and left margin is 50px
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 37/51
CSS Margin:
Margin ² Shorthand Property:
Ex.
margin: 25px;
- top, right, bottom, and left margin is 25px
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 38/51
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 39/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 40/51
CSS Padding:
Padding ² Shorthand Property:
Ex.
- padding: 25px 50px 75px;
- top padding is 25px
- right and left padding is 50px
- bottom padding is 75px
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 41/51
CSS Padding:
Padding ² Shorthand Property:
Ex.
- padding: 25px 50px;
- top and bottom padding is 25px
- right and left padding is 50px
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 42/51
CSS Padding:
Padding ² Shorthand Property:
Ex.
- padding: 25px;
- top, right, bottom, and left padding is 25px
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 43/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 44/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 45/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 46/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 47/51
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 48/51
N ti S l t
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 49/51
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
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 50/51
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.
8/6/2019 Crash Course to Web Development - CSS
http://slidepdf.com/reader/full/crash-course-to-web-development-css 51/51
CSS Advance:
Ex.
a:hover{
color: red;
}
All:
<a></a> elements will be in color red
if the mouse is over that element.
Recommended