using css to control appearance
Post on 03-Jan-2016
36 Views
Preview:
DESCRIPTION
TRANSCRIPT
11
Using CSS to Control Appearance
2
Objectives
You will be able to Use CSS (Cascading Style Sheets) to control
the appearance of your web page.
2
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
4
In-Line Style Attribute
5
Page in Chrome
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.
7
Style for the <div>
8
Page in Chrome
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.
10
Embedded Style Rules
11
Embedded Style Rules
Selector
Declarations
ValueProperty
12
Remove Inline Style Attributes
13
Page with Embedded CSS
Effect is the same.
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.
15
A CSS File
16
Link the CSS File
17
Page in Chrome
Effect is the same.
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>
19
Page in Chrome
20
CSS Classes
Allow us to divide elements of a given kind into groups and specify different styling for each group.
21
CSS Classes
22
CSS Classes
23
Page in Chrome
24
Page in IE8
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
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
}
27
Page in Chrome
28
Page in Firefox 4.0
29
Page in Safari 5.1
30
Page in IE8
Looks the same in IE9
31
Learn More about CSS
top related