Web app development_html_css_03

hasen@microcis.net July 01, 2013Hassen poreya
Trainer, Cresco Solution
Afghanistan Workforce
Development Program
HTML / CSS

Divisions
 As defined in the HTML 4.01 and XHTML 1.0
standards, the <div> tag divides your document
into separate, distinct sections.
 In fact you can organize and position your objects
on the document with divisions (<div>).
 A div is nothing more but a container, Similar to
tables, but much more lighter and useful.
 Older websites were using tables to position and
organize the objects, that was complex as well as
much more slower than the divisions.
 Today’s websites are using division.

Divisions
 Inner divs comes inside another (outer) div to split
up the outer div.
 You define a size for each div and place it
somewhere in your document, and then put your
contents inside the div.
 The basic syntax is like:
<div>
…
<div>
</div>
…
</div>

CSS
 Stands for Cascading Style Sheet.
 Added to HTML 4.0 to solve a problem.
 It separates structure from layout.
 Define how to display HTML elements.
 Reduces size of HTML file.
 Multiple style definitions will cascade into one.

CSS Syntax
 The CSS syntax is made up of three parts:
 Selector: The selector is normally the HTML
element/tag
 Property
 Value
selector {property: value}
h1 {color: blue;}
.p {font-size: 12px;}

Selector
 There are three kind of selectors
 Group selector
 Class selector
 Id selector

Group Selector
 You can set a style for a group of HTML elements.
 Separate selectors from each other by a comma.
h1,h2,h3,h4,h5,h6 {color: green;}
or
p, h4, title {text-align:right;}

Class Selector
 define different styles for the same type of HTML
element
 CSS Syntax
p.center {text-align: center}
 class attribute in HTML document:
<p class="center">
This paragraph will be center
</p>

Class Selector
 Apply more than one class per given element.
 CSS Syntax
.center {text-align: center}
 Class attribute in HTML document:
<p class="center">
This paragraph will be center
</p>
<h1 class="center">
This heading will be center
</h1>

Id Selector
 The id selector is defined as a #
 CSS Syntax
#center {text-align: center}
 Idattribute in HTML document:
<p id="center">Paragraph in center</p>
<h1 id="center">
This heading will be center
</h1>

Inserting CSS to HTML
 There are three ways of inserting a style sheet into
a HTML document.
 Inline Styles
 Internal Style Sheet
 External Style Sheet

Inline CSS
 Style is to be applied to a single occurrence of an
element.
 In fact, HTML style attribute comes inside a tag and
hold your CSS definitions.
<p style="color:sienna; margin-left:20px">
This is a paragraph
</p>

Internal CSS
 You can define internal styles in the head section
by using the <style> tag.
<head>
<style type="text/css">
p {margin-left: 20px}
body{backgroun image:url(“me.jpg")
</style>
</head>

External CSS
 You can write all CSS code in one file and save it as “style.css”
and then you can link this to your HTML document.
 By doing this, you can bring changes in CSS file and then
everything automatically will be change in your HTML
document.
 CSS File – style.css
p {margin-left: 20px}
 HTML File
<head>
<link rel="stylesheet” type="text/css” href=“style.css"/>
</head>

Basic style properties
Background-color: value;
Background-image: value;
Font-family: value;
Font-size: value;
Float: value;
Text-align: value;
Color: value;
Width: value;
Height: value;

CSS Backgrounds
 CSS properties used for background effects:
 background-color (Color)
 background-image (Image URL)
 background-repeat (Repeat to X and Y)
 background-attachment (Fixed or Scroll)
 background-position (top, right, left, bottom)

CSS Backgrounds
 body {background-color:#b0c4de;}
 p {background-color:#e0ffff;}
 body {background-image:url(‘microcis.png');}
 Body{ background-image:url('gradient.png');
background-repeat:repeat-x;}
 Body{ background-image:url(‘logo.png');
background-repeat:no-repeat;
background-psition:right top;}
Shorthand style:
body {background:#fff url('img_tree.png') no-repeat right top;}
Order:
background-color, background-image, background-repeat, background-attachment
background-position

CSS Text Style
 Some CSS properties used to style the texts.
 Color (Text color)
 Direction (left to right, right to left)
 Text-align (left, center, right)
 Text-decoration (Underline, overline, …)
 Text-transform (uppercase, lowercase)
 Text-indent (pixels)
 Letter-spacing (pixels)
 Word-spacing (pixels)

CSS Text Style
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
p.date {text-align:right;}
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
p.uppercase {text-transform:uppercase;}
p.capitalize {text-transform:capitalize;}
p {text-indent:50px;}

CSS Link Style
 Almost any CSS property can be attached to links.
 color, font-family, background, dir, margin, text-
decoration, …
a:link – a normal, unvisited link
a:visited – a visited link
a:hover – react on mouse over
a:active – a link the moment it is clicked

CSS Link Style
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
-------------------------------------
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

CSS List Style
 The CSS list properties allow you to:
 Set different list item markers for ordered lists.
 Set different list item markers for unordered lists.
 Set an image as the list item marker.
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
--
Ul{ list-style-image: url('sqpurple.gif');}

hasen@microcis.net July 01, 2013Hassen poreya
Trainer, Cresco Solution
Any Questions!

Web app development_html_css_03

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Web app development_html_css_03 (20)

Recently uploaded (20)

Web app development_html_css_03