It covers hidden CSS and does and don'ts in CSS for creating accessible website.

1. Savitribai Phule Pune University

2.  Provides ability to separate content from
presentation, and to allow for more precise
control over layout.
 Allow you modify properties of existing HTML
elements.
 Instructs the browser how to display individual
items or elements in your page.
 Styles are easy to edit and change; you may
change the style that was defined for that
element and all occurrences of the element in
the web page (or entire web site) will be
changed.
Savitribai Phule Pune University

3. CSS is called "cascading" because there is a
hierarchy or precedence for how styles are applied:
Savitribai Phule Pune University

4. CSS-disabled view CSS-enabled view
Savitribai Phule Pune University

5.  visibility: hidden; and/or display: none;
Do not use this CSS if you want
the content to be read by a screen reader.
 width:0px;height:0px
An element with no height or
width is removed from the flow of the page,
most screen readers will ignore this content.
 text-indent: -1000px;
It moves the content to the left
1000 pixels - thus off the visible screen.
Screen readers will still read text with this
style.
Savitribai Phule Pune University

6.  Style for visually hiding content that will be read by a
screen reader.
.hidden
{position: absolute; //remove the element from the
page flow and to begin
positioning it.
left:-10000px; //moves the content 10000 pixels
to the left.
top: auto;
width:1px; // to visually hide everything
that does not
height:1px; // fit into these dimensions.
overflow: hidden;}
 The .hidden CSS class should then be referenced as-
<div class="hidden">This text is
hidden.</div>
Savitribai Phule Pune University

7.  Fonts are the style of "type face" used to display
text, numbers, characters and other "glyphs“.
 Real Text vs. Text Within Graphics-
The enlarged image of the word
"University" above is difficult to read because it has
become pixelated.
 Font Variations-
1. Bold and Italic
2. Capitalization
Savitribai Phule Pune University

8.  Font Readability –
Some natively provided
fonts are-
 Font Family –
Serif font(Extra
strokes)
Sans-serif font Cursive
font
Fantasy font Monospace font
Savitribai Phule Pune University

9.  Specifying font families -
The CSS specifies a number of font faces or
families.
body
{
font-family: Helvetica, Arial, sans-
serif;
}
h1
{
font-family: Georgia, Times, "Times
New Roman", serif;
}
Savitribai Phule Pune University

10.  Color Contrast –
 Font Size –
1. Relative Units such as percentage and ems
2. Absolute Units such as pixels and points
 Blinking and Moving Text –
Blinking text and moving text can distract the
reader's attention. Blinking or animating text should be
avoided.
 Text alignment and text margins , padding –
p {margin: auto 15% auto 15%; text-
align:left;}
.another_p {margin-left:15%; margin-
right:15%;}
Savitribai Phule Pune University

11.  CSS defines HOW HTML elements are to be
displayed.
 Styles are normally saved in external .css
files. External style sheets enable you to
change the appearance and layout of all the
pages in a Web site, just by editing one single
file.
Savitribai Phule Pune University

12. Thank You
Savitribai Phule Pune University