using css to control appearance
DESCRIPTION
Using CSS to Control Appearance. 1. Objectives. You will be able to Use CSS (Cascading Style Sheets) to control the appearance of your web page. 2. Using CSS. Modern websites use CSS to specify layout and appearance of HTML pages Rather than HTML markup. There are three ways to add CSS - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/1.jpg)
11
Using CSS to Control Appearance
![Page 2: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/2.jpg)
2
Objectives
You will be able to Use CSS (Cascading Style Sheets) to control
the appearance of your web page.
2
![Page 3: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/3.jpg)
3
Using CSS
Modern websites use CSS to specify layout and appearance of HTML pages Rather than HTML markup.
There are three ways to add CSS Directly inside an HTML start tag Embedded in the <head> section In a separate file
Sharable by many HTML files
![Page 4: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/4.jpg)
4
In-Line Style Attribute
![Page 5: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/5.jpg)
5
Page in Chrome
![Page 6: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/6.jpg)
6
Style Rules in <body> Tag
Apply to everything inside the body.
Additional rules can be added in enclosed HTML tags.
Higher level rules can be overridden with additional CSS rules in enclosed elements. When there are differences the applicable
rule is the one closest to the element. This is the meaning of cascading.
![Page 7: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/7.jpg)
7
Style for the <div>
![Page 8: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/8.jpg)
8
Page in Chrome
![Page 9: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/9.jpg)
9
Embedded Style Rules
CSS rules inside the HTML tags tend to clutter the page. Obscure the structure.
Generally better to embed the style rules in the page head.
![Page 10: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/10.jpg)
10
Embedded Style Rules
![Page 11: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/11.jpg)
11
Embedded Style Rules
Selector
Declarations
ValueProperty
![Page 12: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/12.jpg)
12
Remove Inline Style Attributes
![Page 13: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/13.jpg)
13
Page with Embedded CSS
Effect is the same.
![Page 14: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/14.jpg)
14
Style Sheet File
We can clean up the HTML file even more by moving the CSS out to a separate file.
CSS file can be used by many pages.
![Page 15: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/15.jpg)
15
A CSS File
![Page 16: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/16.jpg)
16
Link the CSS File
![Page 17: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/17.jpg)
17
Page in Chrome
Effect is the same.
![Page 18: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/18.jpg)
18
More Content
<div>
Hello, World!
</div>
<div>
Call me Ishmael. Some years ago--never mind how long precisely--
having little or no money in my purse, and nothing particular
to interest me on shore, I thought I would sail about a little
and see the watery part of the world. It is a way I have
of driving off the spleen and regulating the circulation.
Whenever I find myself growing grim about the mouth;
whenever it is a damp, drizzly November in my soul; whenever I
find myself involuntarily pausing before coffin warehouses,
and bringing up the rear of every funeral I meet;
and especially whenever my hypos get such an upper hand of me,
that it requires a strong moral principle to prevent me from
deliberately stepping into the street, and methodically knocking
people's hats off--then, I account it high time to get to sea
as soon as I can. This is my substitute for pistol and ball.
With a philosophical flourish Cato throws himself upon his sword;
I quietly take to the ship. There is nothing surprising in this.
If they but knew it, almost all men in their degree, some time
or other, cherish very nearly the same feelings towards
the ocean with me.
</div>
![Page 19: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/19.jpg)
19
Page in Chrome
![Page 20: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/20.jpg)
20
CSS Classes
Allow us to divide elements of a given kind into groups and specify different styling for each group.
![Page 21: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/21.jpg)
21
CSS Classes
![Page 22: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/22.jpg)
22
CSS Classes
![Page 23: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/23.jpg)
23
Page in Chrome
![Page 24: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/24.jpg)
24
Page in IE8
![Page 25: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/25.jpg)
25
Dividing Text into Columns
Easy in HTML5. column-count:3
Currently requires vendor prefix for most browsers -webkit- Chrome and Safari -moz- Firefox -ms- Internet Explorer -o- Opera
![Page 26: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/26.jpg)
26
Specifying Columns
.Content
{
color:Black;
text-align:justify;
font-size:small;
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
column-count:3
}
![Page 27: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/27.jpg)
27
Page in Chrome
![Page 28: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/28.jpg)
28
Page in Firefox 4.0
![Page 29: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/29.jpg)
29
Page in Safari 5.1
![Page 30: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/30.jpg)
30
Page in IE8
Looks the same in IE9
![Page 31: Using CSS to Control Appearance](https://reader036.vdocuments.us/reader036/viewer/2022081603/56813587550346895d9ce689/html5/thumbnails/31.jpg)
31
Learn More about CSS