Css

Prepared By: Er. Nawaraj
Bhandari
DESIGNING AND DEVELOPING A
WEBSITE
Topic 3:
Introduction to
Cascaded Style Sheet(CSS)

Cascading Style Sheets
 Cascading Style Sheets (CSS) specify the
presentation of web pages.
 HTML describes the structure of a document.
 Which part of the document is a heading, a paragraph, a list
etc.?
 We will learn CSS 2.1.
 There is a new CSS 3
 Many parts of CSS 3 are still under development.
 Some parts of CSS 3 are useful now.

How does CSS Work? - 1
<h1>Welcome to <em>Cascading Style Sheets</em></h1>
<p>The purpose of this page is to demonstrate how
<em>CSS</em> works.</p>
 When viewed in a browser, this HTML
page will have a style.
 Browsers apply default settings to page elements.
 Using CSS, we can specify how we
want this document to look.

How does CSS Work? - 2
 Style sheets are made up of one or more style rules.
 The selector specifies which part of the HTML
document will be affected by the CSS rule.
 The properties specify how we want to affect this part
of the document.
selector {
property1 :
value;
property2 :
value;
}
Generic structure
h1{
color : red;
font-size :
18px;
}
A Simple CSS Rule

Applying CSS
 There are three different ways of applying
CSS to a document:
1. Inline style sheet
2. Embedded style sheet or Internal style sheet
3. External style sheet

Inline CSS
 The style attribute can be used to affect an
individual HTML element.
 The value is a list of CSS properties.
...
<h1 style="color:blue; font-size:5px;">Welcome to <em>Cascading Style
Sheets</em></h1>
<p>The purpose of this page is to demonstrate how <em>CSS</em>
works.</p>
...

Embedded CSS
 Style rules can be nested inside a <style> element
 The <style> element must be placed in the <head> of
the document.
…
<style type="text/css">
h1 { color : green; font-size : 18px; }
</style>
</head>
<body>
<p>The purpose of this page is to demonstrate how
<em>CSS</em> works.</p>
…

External Style Sheet
 The <link/> element is a standalone element.
 Always goes in the <head> element
 The href attribute specifies the filename of the CSS
file.
 The rel and type attributes are required and always
have the same values.
h1{
color : red;
font-size :
18px;
}
<link href="style.css" rel="stylesheet" type="text/css"/>
Save in a file named style.css
<link/> element that links to style.css

Applying CSS
 External CSS is the best way to style a
website.
 A single CSS file applied to all pages in a site
 Can get large and bulky
 Embedded CSS can be used to define style
rules that only apply to a single page.
 Inline CSS is rarely used.
 Cannot reuse inline CSS rules
 Tedious to update the design of the site

The Cascade
 It is possible for two (or more) different
sources of style information to specify
conflicting rules for an element.
 Example :
 An inline style rule specifies an <h1> element
should be colored blue.
 An external style rule specifies <h1> elements
should be colored red.
 Browsers obey the most recently read CSS
information.
 Inline CSS takes precedence over external CSS.

Selectors – Multiple Selectors
 There are many different ways to select different
part of HTML documents.
 Multiple elements can be selected using a comma.
 An asterix (*) can be used to select all elements.
h1, p {
color:red;
}
*{
text-
align:right;
}

Selectors - Inheritance
 By default, nested elements inherit style
values.
 The <em> element is nested inside a <h1> so
will be coloured red.
 The <p> element is nested inside the <body>
so will be coloured blue.
…
<body>
<p>The purpose of this page is to demonstrate how <em>CSS</em>
works.</p>
</body>
…
body{
color:blue
;
}
h1{
color:red;
}

Selectors - Descendant Selectors
 Descendant selectors are used to select
elements that are nested within another
specific element.
 The descendant selection is made by using a white space.
 In this example only the <em> element nested inside the
paragraph will be affected.
…
<body>
<p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p>
</body>
…
p em{
color:red;
}

Selectors – Psuedo-Elements
 Psuedo-elements are parts of elements.
 E.g. the first line or first letter of an element

Selectors – The id Selector
 The id attribute uniquely identifies an element
 We can use an id selector (#) to target
individual elements based on their id value.

Selectors – The class Selector
 The class attribute can be applied to nearly any
element.
 It allows us to label related parts of an HTML
document.
 We can name our classes anything we like. But it
should be meaningful.
 The class selector (.) is used to select group
elements based on class name.
 The element name is followed by a full-stop (.)
and the class name.

Selectors – The class Selector

The <div> and <span> Elements
 HTML features two elements that do not have
any semantic meaning.
 <div> is a block level element.
 <span> is an inline element.
 We can specify meaning for these elements using class and id
attributes.
 The <div> element is especially useful.
 We can nest any element we like inside a <div>. Unlike <p>
cannot nest <p>.

CSS Font Size : px, pt, em,
percent
1. Pixels (px)
 Pixels are fixed-size units that are used in screen media.
 One pixel is equal to one dot on the computer screen (the
smallest division of your screen’s resolution).
 One problem with the pixel unit is that it does not scale
upward for visually-impaired readers or downward to fit
mobile devices.

percent
2. Points (pt)
 Points are traditionally used in print media.
 One point is equal to 1/72 of an inch.
 Points are much like pixels, in that they are fixed-size
units and cannot scale in size.
12pt = 16px

percent
3. Ems (em)
 The “em” is a scalable unit that is used in web document.
 An em is equal to the current font-size, for instance, if the
font-size of the document is 12pt, 1em is equal to 12pt.
 Ems are scalable in nature, so 2em would equal 24pt,
.5em would equal 6pt, etc.
 Ems are becoming increasingly popular in web
documents due to scalability and their mobile-device-
friendly nature.
1em = 12pt = 16px

percent
4. Percent (%)
 The percent unit is much like the “em” unit.
 First and foremost, the current font-size is equal to 100%
(i.e. 12pt = 100%).
 While using the percent unit, your text remains fully
scalable for mobile devices and for accessibility.
 1em = 12pt = 16px =
100%.

percent
 Generally, 1em = 12pt = 16px = 100%.
 http://tinyurl.com/pkyfz4y

CSS Properties
1. Text and font properties
2. Box properties
3. List properties
4. Background images
5. Floating and positioning

Text Properties
The text-indent property specifies how much horizontal
space text should be moved before the
beginning of the first line of the text content of an
element.
Spacing is calculated from the starting edge of the block-
level container element.

Font Properties
 The font-family property can be used to specify
a list of fonts (in order of preference).
 Browsers can only display fonts that are
installed on the user’s machine.
 Font-names that feature white space must be
placed in quotes.

Box Properties
 CSS views every HTML element as having a box around
it.
 This box has a number of properties.
1. Height
2. Width
3. Border
4. Margin
5. Padding
– Margin is the gap around the outside of the element.
– Padding is the area between the element’s content and

More about border
 Border can be specified for particular sides of elements.

More about border
 Border can be specified for particular sides of elements with
particular properties..

Box Properties
–Margin, border and padding can be specified for particular sides of
elements.
– E.g. div { padding-top : 10px; }

Block and Inline Elements
 CSS treats block and inline elements
differently.
 By default, the box for block level elements extends to the
width of the browser window.
 The box for inline elements only stretches as wide as the
element itself,
 We cannot set the width or height of inline elements.

Block and Inline Elements
 We can make inline elements behave like block
level elements using the display property.
 This is especially useful when we want to make
navigation bars from list elements.
 The display property can also have a value of
none which hides the element from view.

Specifying Colour
 A colour name
 p { color : red; }
 An RGB value
 The amount of red, green and blue is given as a number
between 0 and 255.
 p { color : rgb(255, 0, 0); }=Red
 rgb(255,255,255)=White
 A hexadecimal RGB value
 Always preceded by the hash (#) character
 White:#FFFFFF
 Red:#FF0000
 Blue:#008000

Efficient CSS
 External CSS files can quickly become very
large. Managing the CSS can be difficult.
 Techniques for making CSS efficient and easy
to manage
 Use multiple selectors where possible
 Use inheritance where possible
 Use CSS comments to separate and explain CSS rules.
Comment can be provided using /* and ends with */

Accessibility and CSS
 Separation of structure from presentation
 HTML only specifies structure so can be understood by
everyone
 Users can switch off CSS.
 Even they can define their own user defined style sheet

The Media Attribute
 We can specify a media attribute in the <link/>
element.
 Specifies different style sheets for different output
 The print.css style sheet will be used if the user
prints the page.
 Some other values of media attribute are all,
aural, handheld, projection, tv, etc.

Validating CSS
 Like HTML documents, CSS can be validated
using a W3C validator.
 http://jigsaw.w3.org/css-validator/
 Helps identify syntax errors
 Less important than validating HTML documents

Developer Tools
 Many browsers provide facilities for us to
examine the CSS of a web page.
 Google Chrome - Developer Tools
 Mozilla FireFox – by using the Firebug add-on
 http://getfirebug.com/
 These are useful in two ways
 Learn CSS techniques used in other peoples’ websites.
 Help fix problems in our own CSS.

References
 http://kyleschaeffer.com/development/css-
font-size-em-vs-px-vs-pt-vs/
 http://www.w3schools.com/css/css_mediatype
s.asp

Css

More Related Content

What's hot

Similar to Css

More from Er. Nawaraj Bhandari

Recently uploaded

Css