2 introduction css

What is CSS
• Cascading Style Sheets
• Contains the rules for the presentation of
HTML.
+ =
HTML CSS Web Page
• CSS was introduced to keep the
presentation information separate from
HTML markup (content).

Before CSS
• Initially Designers used presentation tags like (FONT, B, BR, TABLE
etc.) and spacers GIFs to control the design of web pages.

• Any modification in the design of websites
was a very difficult and boring task , as it
evolves manually editing every HTML
page.

Providing support for multiple browsers was a
difficult task.

• Advantages of CSS
• CSS saves time
When most of us first learn HTML, we get taught to set the font face, size,
colour, style etc every time it occurs on a page. This means we find
ourselves typing (or copying & pasting) the same thing over and over again.
With CSS, you only have to specify these details once for any element. CSS
will automatically apply the specified styles whenever that element occurs.
• Pages load faster
Less code means faster download times.
• Easy maintenance
To change the style of an element, you only have to make an edit in one
place.
• Superior styles to HTML
CSS has a much wider array of attributes than HTML.
• Disadvantages of CSS
• Browser compatibility
Browsers have varying levels of compliance with Style Sheets. This means
that some Style Sheet features are supported and some aren't. To confuse
things more, some browser manufacturers decide to come up with their own
proprietary tags.

7
How to write CSS?
• Selector
– HTML element tags
(examples: p, h2, body, img, table)
– class and ID names
• Property (examples: color, font-size)
• Value (examples: red, 14pt)

8
How to write CSS:
• The basic syntax of a CSS rule:
selector {property 1: value 1; property 2:
value 2}
Example:
p {font-size: 8pt; color: red}
Notice the { } around the rule and the : before
each value!

Sources of Styles
Author (developer) Styles
• Inline Styles - As inline attribute “style” inside HTML tags
<div style=“font-weight: bold;”>I am bold</div>
• Embedded Styles - As embedded style tag with in HTML
document.
<html>
<head>
<title>Welcome to Vendio!</title>
<style>
.footer {
width:90%;
}
</style>
-------
</html>
• Linked Styles - Inside separate files with .css extension
<link rel="stylesheet" href=“external.css" type="text/css" />

Sources of Styles(contd.)
• User Style sheets
This file contains the user created styles .
[firefox profile folder]/ chrome/userContent-example.css
is the current user’s style sheet file for the firefox.
• Browser default style sheet
This file contains default styles for all users of a
browser
[firefox folder]/res/html.css is the default style sheet
file for the firefox.

CSS Selectors
• ID based ( #)
HTML CSS
<div id=“content”> #content {
Text width: 200px;
</div> }
ID selectors should be used with single elements.

Class based selector
• Class (.)
HTML CSS
<div class=“big”> .big{
Text width: 200px;
</div> }
<div>
<span class=“big”>some text </span>
</div>
Class based styles can be used by multiple HTML elements.

Tag based selectors
• Tag (Tag name)
HTML CSS
<div> DIV {
Text width: 200px;
</div> }
<div> SPAN {
<span>some text </span> font-size:130%;
</div> }
<span>some other text </span>

Grouping
• Multiple selectors can be grouped in a
single style declaration by using , .
H1, P , .main {
font-weight:bold;
}

CSS Values
• Words: text-align:center;.
• Numerical values: Numerical values are usually
followed by a unit type.
font-size:12px;
12 is the numerical value and px is the unit type pixels.
– Absolute Values – in, pc, px, cm, mm, pt
– Relative Values – em, ex, %
• Color values: color:#336699 or color#369 or
rgb(255, 255, 255).

Categories of CSS properties
• Positioning and layout handling related.
• Background related properties.
• Font and text related
• Links related.
• Lists related.
• Table related.

Cascade
The CSS cascade assigns a weight
to each style rule. When several
rules apply, the one with the
greatest weight takes precedence.
Order of preference for various
styles:
– Default browser style sheet
(weakest)
– User style sheet
– Author style sheet
– Author embedded styles
– Author inline styles (strongest)

CSS Specificity
Rule 1. CSS File >> Embedded >> Inline
Rule 2. TAG >> class >> ID

CSS Units & Colors
• Units
– %
– in
– cm
– mm
– em (12pt)
– px
– pt
• Colors
– color name (red, etc)
– rgb(x,x,x)
– #rrggbb (HEX)

Inheritance
• Styles that relate to text and appearance
are inherited by the descendant
elements.
• Styles that relate to the appearance of
boxes created by styling DIVs,
paragraphs, and other elements, such as
borders, padding, margins are not
inherited.

The Box Model
• Every element in the DOM (Document Object Model) has a
conceptual “box” for presentation.
• The box consists of margin, padding, border, content
(width, height), and offset (top, left)

22
Properties - Font
• font-family
– Name, or serif, sans-serif, cursive, monospace
• font-style
– normal, italic
• font-weight
– normal, bold, 100, 200, 300, 400, 500, 600, 700, 800,
900
• font-size
– absolute-size, relative-size, length, percentage
• font-variant
– small-caps

23
Properties - Text
• text-decoration
– underline, line-through
• text-transform
– capitalize, uppercase, lowercase, none
• text-align
– left, right, center, justify
• text-indent
– <length>, <percentage>

24
Properties - Position
• position
– absolute, relative
• top
– <length>, <percentage>, auto
• left
– <length>, <percentage>, auto
• Z-index
– <number>, auto

CSS Layout
• Margin
• Padding
• Border
• Z-index
• Positioning
• Width
• Height
• Float
• Text-align
• Vertical-align

26
Backgrounds
• background-color
– Hex
• background-image
– URL(image.jpg)
• background-repeat
– No-repeat, repeat-x, repeat-y
• background-attachment
– Fixed, scroll
• background-position
– Top, left
• p { background-position: 70px 10px; background-repeat: repeat-y;
background-image: url(background.gif) }
Example

27
Background repeat examples:

CSS Lists
• List-style
• List-style-image
• List-style-position
• List-style-type

29
CSS Link
• a:link {color: #FFFFFF; text-decoration: none}
• a:visited {color: #808080; text-decoration: none}
• a:hover {color: red; text-decoration: none}
• a:active {color: blue; text-decoration: none}

CSS Shorthand
• Consolidates many styles into a single declaration.
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 12px;
 font: bold 12px verdana, sans-serif;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 10px;
 padding: 5px 8px 5px 10px;

Descendant selectors
Descendant selectors are used to select elements that
are descendants (not necessarily children) of another
element in the document tree.
HTML CSS
<div class=“abc”> DIV.abc P {
<div> font-weight:bold;
<P> }
Hello there!
</p>
</div>
</div>

Child selectors
A child selector is used to select an element that is a
direct child of another element (parent). Child selectors
will not select all descendants, only direct children.
HTML CSS
<div > DIV.abc > P {
<div class=“abc”> font-weight:bold;
<P> }
Hello there!
</p>
</div>
</div>

Universal selectors
Universal selectors are used to select any
element.
* {
color: blue;
}

Adjacent sibling selectors
Adjacent sibling selectors will select the
sibling immediately following an element.
DIV.abc + P {
font-weight: bold;
}
will work for
<div>
<div class=“abc”>Message</div>
<P>Hello there!</p>
</div>

Attribute selectors
Attribute selectors selects elements based
upon the attributes present in the HTML
Tags and their value.
IMG[src="small.gif"] {
border: 1px solid #000;
}
will work for
<img src=“small.gif” />

CSS Pseudo-classes
selector:pseudo-elements/class { property: value
}
:link
:visited Link (A tag) related pseudo classes
:hover
:active
:first-child
::after
::before
::first-letter
::first-line
::selection

Pseudo Elements
Selector Example Example description
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::selection p::selection Selects the portion of an element that is selected by a
user

Refrences
• www.w3schools.com
• www.w3.org
• World wide web

2 introduction css

More Related Content

What's hot (20)

Similar to 2 introduction css (20)

More from Jalpesh Vasa (16)

Recently uploaded (20)

2 introduction css