1. Md. Ali Hosssain.
Web Designer.
Jr. Instructor, Graphic Arts Innstitute.
Email:Students.gai@gmail.com
Phone:01731402303
02/08/14
2. CSS?
Cascading Style Sheets
CSS is a style sheet language used to determine the formatting of an
HTML document.
Before we had CSS (and before it was widely adopted) all of this
formatting information was embedded directly in the document- either
in the form of attributes like width or bgcolor (background color) or in
the form of purely presentational tags like font.
Combined with the abuse of the table tag to create complicated layouts,
the landscape for layout and design on the web was an unmanageable
mess.
CSS fixed all that (kind of.)
Using separate style sheets for an entire site, leveraging semantic
markup and identifiers like ids (for unique page elements) and classes
(for multiple, like elements) a developer can apply styles across a
whole site while updating a single (cacheable) file.
02/08/14
3. Enter CSS (The timeline)
CSS1
December 1996
CSS 2
Became a W3C Recommendation in May 1998
CSS 3
CSS level 3 has been under development since December 15, 2005
02/08/14
4. CSS Versions
ï CSS 1
ï Font properties such as typeface and emphasis
ï Color of text, backgrounds, and other elements
ï Text attributes such as spacing between words, letters, and lines of text
ï Alignment of text, images, tables and other elements
ï Margin, border, padding, and positioning for most elements
ï Unique identification and generic classification of groups of attributes
ï CSS2
includes a number of new capabilities like
ï absolute, relative, and fixed positioning of elements and z-index,
ï the concept of media types
ï support for aural style sheets and bidirectional text
ï new font properties such as shadows.
02/08/14
6. CSS Tips and Tricks for Designing
Accessible Websites
02/08/14
7. Objectives
ïUnderstand the benefits of CSS
ïUnderstand principles of liquid design and how it relates to
accessibility
ïDemonstrate simple techniques for using CSS to make websites
more accessible
ïList some useful resources
02/08/14
8. Benefits of CSS
CSS Helps Your UsersâŠ
ï¶ Exercise greater control over how websites are
presented.
ï¶ Access websites on multiple media platforms:
o
o
o
o
o
Computer monitors
Paper
Projectors
Screen readers for the blind
Mobile phones
02/08/14
9. CSS Helps YouâŠ
ïSave time by controlling the styles for your entire website
with one file.
ïSimplify your web documents.
ïReduce file sizes.
02/08/14
10. Liquid Design
Principles of Liquid Design
ï¶ Layout elements are given relative sizes (usually
percentages).
ï¶ The page scales to fit any view port, no matter
the resolution, screen size, or text size.
ï¶ The user does not need to use the horizontal
scroll bar.
02/08/14
11. Liquid Design and Accessibility
ïLiquid design helps your page âdegrade gracefully.â
ïThe page displays properly even if the user:
o Changes text size or screen resolution.
o Views the page on an extra large monitor.
o Disables style sheets.
02/08/14
13. Style Sheets
ïEach element on a page has a style defined for it.
ïThe style is defined by a set of attribute : value
pairs.
ïStyle attributes can control:
ïTypeface and font properties
ïBackground properties
ïBox-related properties
ïList properties
02/08/14
14. Ways to define styles
ï
Default style: provides values for all element properties,
unless you change it. (Note: user can customize browser to
change defaults!)
ï Inline style: style is defined as an attribute of the element in-
place. Use this for âone-offâ or special styles.
ï Embedded style sheet: styles defined in the head portion of
web page. Use this if you donât have very many web pages,
or for styles that are useful only for the given page.
ï External style sheet: styles defined in a separate file. Use
this to centralize style definitions and provide uniformity
across all pages of a web site.
02/08/14
15. Adding styles to pages
1.
Inline CSS
ï
handy, but donât abuse it because it puts presentation back with the content
02/08/14
16. Embedded Style Sheet
<html>
<head>
<title>Page with embedded style</title>
<style type="text/css">
selector { attribute : value ;
attribute : value ... }
selector { attribute : value ;
attribute : value ... }
...
âąStyle definitions go into a <style> element in document
</style>
head.
</head>
âąSelector determines what elements the style rule applies
to.
</html>
âąStyle definitions separated by ; are enclosed in { }
02/08/14
17. Embedded Style Sheet (contâd)
<html>
<head>
<title>Page with embedded style</title>
<style type="text/css">
selector { attribute : value ;
attribute : value ... }
selector { attribute : value ;
attribute : value ... }
...
</style>
</head>
âąThe type attribute can only be "text/css". (It is
leaving room for future alternative style languages.)
...
âąNote: CSS is not HTML!
</html>
02/08/14
18. Example
<html>
<head>
<title>Example page with embedded
style</title>
<style type="text/css">
body { font-family : sans-serif;
color : blue;
background-color : yellow }
h1
{ font-style : italic }
p
{ font-size : 14pt }
ol
{ font-size : 12pt;
color : red;
font-family : serif }
</style>
Here the selectors are simply tag names. The
</head>
style rules will apply to elements defined by
...
those tags. Result (Example 1)
</html>
02/08/14
19. Adding styles to pages
3.
External CSS
ï
ï
ï
easier to read and modify
downloaded once for all website pages
separates content from presentation â the way to go
sample_style.css
02/08/14
sample.html
22. Inheritance
ï A descendant is an element that is enclosed (nested) in
another, its ancestor. (If it is an immediate descendant, it is
a child of the enclosing element, its parent. Elements
having the same parent are siblings.)
ï All descendants of an element inherit its style properties,
unless these are overridden by their own style rules.
ï If two styles could apply to the same element, the one
defined by the more specific rule will be used. For instance,
an explicit rule is always more specific than an inherited rule.
02/08/14
23. Inheritance in CSS
ïHTML documents are parsed into a document tree
ï Example:
âą used when
building CCS
rules
html
body
head
title
meta
link
h1
u
l
p
li
02/08/14
li
li
âą some
properties (e.g.
font-family) are
inherited from
parents if not
specified
CSS is a language used to determine the formatting of an HTML document.
Before we had CSS all of this information was encoded directly into the document.
This was a mess.
CSS fixed all that.
Using separate style sheets for an entire site, leveraging semantic markup and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles across a whole site while updating a single (cacheable) file.