File - SECTION A 6 SEMESTER
advertisement
CS428 Web Engineering
Lecture 06
Introduction
(Cascading Style Sheet)
1
http://tinyurl.com/ogqlf6a
http://sites.google.com/site/bsc
snotes4u/webeng
2
CASCADING STYLE SHEET
• This is the language to add presentation
styling to HTML documents.
• CSS is a powerful and flexible way to
add format to web page for presentation.
• Through CSS it is relatively easy to take
simple page of text and images,
formatted to present as fully professional
webpage.
3
• CSS has a simple syntax, consist of
selectors, properties and values it together
make a style rules.
• It gives developer find ways to control over
how each element of page is formatted.
• CSS styles can apply on HTML documents
through several different ways.
– Create an external CSS file.
– Embed CSS code in HTML document.
4
CSS Syntax
• A style rule is made of three parts:
• Selector: A selector is an HTML tag at which
style will be applied. This could be any tag like
<h1> or <table> etc.
• Property: A property is a type of attribute of
HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could
be color or border etc.
• Value: Values are assigned to properties. For
example color property can have value either
red or #F1F1F1 etc.
5
• You can put CSS Style Rule Syntax as
follows:
selector { property: value; }
• Example: You can define a table border as
follows:
table {
border: 1px solid #C00FDF;
}
6
Applying CSS
• There are three ways through which you
apply CSS on your HTML doc.
Inline
Internal
External
7
Inline CSS
• You can also embed your CSS code in
HTML document.
• Example:
<p style=“font-family: monospace;”>
8
INTERNAL CSS
• <style></style> always placed between
<head></head> tags.
• Example:
<style>
p{
line-height: 120%;
}
</style>
9
EXTERNAL CSS FILE
• External CSS file will always place between
<HEAD></HEAD> tags.
• <link rel=“stylesheet” type=“text/css”
href=“main.css” />
10
CSS Rules Overriding
• Any inline style sheet takes highest priority. So it
will override any rule defined in <style>...</style>
tags or rules defined in any external style sheet
file.
• Any rule defined in <style>...</style> tags will
override rules defined in any external style sheet
file.
• Any rule defined in external style sheet file takes
lowest priority and rules defined in this file will be
applied only when above two rules are not
applicable.
11
EXAMPLE
• <head>
<style>
div {
color: #9932CC;
}
</style>
</head>
<div>
<h1>Style Sheets</h1>
<p style="font-family: monospace; color: #0000FF;">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sit amet lorem ligula. </p></div>
12
EXAMPLE
• <style>
a{
font-family: sans-serif;
}
</style>
<p style="font-family: monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. <a href=“p1.html”>Pellentesque</a> sit amet
lorem ligula. Nam pulvinar nunc ac magna
aliquam quis sodales dui elementum.
<a href=“p2.html”>Fusce a lacus leo.</a>
</p>
13
SELECTORS
• There are three types of selectors:
Tag selectors
ID selectors
Class selectors
14
Example Tag Selector
<style>
p{
Tag
selector
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
15
Example Class Selector
<style>
.foo {
font-family: sans-serif;
font-size: 15pt;
class selector line-height: 150%;
}
</style>
<p class=“foo”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sit amet lorem ligula. Nam
pulvinar nunc ac magna aliquam quis sodales dui
elementum. Fusce a lacus leo. Maecenas ut dui eu
quam condimentum sagittis. </p>
16
Example Class Selector
<style>
p.foo {
font-family: sans-serif;
font-size: 15pt;
class
line-height: 150%;
selector
}
</style>
<body>
<h1 class=“foo”></h1>
<p class=“foo”></p>
</body>
17
Example ID Selector
<style>
#p1 {
ID selector
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<p id=“p1”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sit amet lorem ligula. Nam
pulvinar nunc ac magna aliquam quis sodales dui
elementum. Fusce a lacus leo. Maecenas ut dui eu
quam condimentum sagittis.
</p>
18
RULE for ID selector
• There is only be one element in a
document with a particular ID selector.
• ID selector can only be used once in
one element/tag.
19
Descendant Selector
<style>
pa{
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing
elit.. Nam pulvinar nunc ac magna aliquam quis sodales
dui nunc sit elementum. <a href=“page1.html”>Donec eu
nisi turpis,</a> sit amet rutrum leo.
</p>
Click <a href=“page2.html”>here</a>
20
Grouping Selector
• you can apply style to many selectors.
• <style>
h1, p, section {
color: #35c;
font-weight: bold;
letter-spacing: .4em;
}
</style>
21
Grouping Class & ID Selectors
• you can apply style to many selectors.
<style>
#content, #footer, .supplement {
position: absolute;
left: 510px;
width: 200px;
}
</style>
22
PSEUDO SELECTOR
<style>
a:link {
color: #008080;
}
a:hover {
color: #FF0000;
}
</style>
23
COMMENTS IN CSS
<style>
/*
p{
font-family: sans-serif;
font-size: 15pt;
}
*/
</style>
24
CSS – Measurement Units
• CSS supports a number of measurements
including absolute units such as inches,
centimeters, points, and so on, as well as
relative measures such as percentages and
em units. You need these values while
specifying various measurements in your
Style rules.
• Example: border: 1px solid red;
25
CSS UNITS of MEASURE (1/3)
• # column1 {
width: 100%;
}
• p{
font-size: 12pt;
}
• p{
font-size: 1pc;
}
26
CSS UNITS of MEASURE (2/3)
• p{
margin-left: 2ex;
}
• p{
padding-right: .25in;
}
• p{
padding-right: 10mm;
}
27
CSS UNITS of MEASURE (3/3)
• p{
margin-left: 2em;
}
• div#main {
width: 600px;
}
28
CSS UNITS - Sizes
• Relative length measurements:
–
–
–
–
px (pixels – size varies depending on screen resolution)
em (usually the height of a font’s uppercase M)
ex (usually the height of a font’s lowercase x)
Percentages (of the font’s default size)
• Absolute-length measurements (units that do not vary
in size):
–
–
–
–
–
in (inches)
cm (centimeters)
mm (millimeters)
pt (points; 1 pt = 1/72 in)
pc (picas; 1 pc = 12 pt)
• Generally 1em = 12pt = 16px = 100%
29
Unit
%
Description
Defines a measurement as a percentage
relative to another value, typically an
enclosing element.
Example
p{
font-size: 16pt;
line-height: 125%;
}
cm
Defines a measurement in centimeters.
div {margin-bottom: 2cm;}
p{
em
A relative measurement for height of a
font in em spaces. Because an em unit is
equivalent to the size of a given font, if
you assign a font to 12pt, each “em” unit
would be 12pt; thus 2em = 24pt.
p{
ex
This value defines a measurement
relative to a font’s x-height. The x-height
is determined by the height of the font’s
lowercase letter x.
in
Defines a measurement in inches.
p { word-spacing: .15in;}
mm
Defines a measure in millimeters.
p { word-spacing: 15mm;}
Defines a measurement in picas. A pica
is equivalent to 12 points. Thus, there are
6 picas per inch.
p { font-size: 20pc;}
pc
letter spacing: 7em;
}
font-size: 24pt;
line-height: 3ex;
}
30
Unit
Description
Example
pt
Defines a measurement in points. A point
is defined as 1/72nd of an inch.
body {font-size: 18pt;}
px
Defines a measurement in screen pixels.
p {padding: 25px;}
31
CSS – Colors
• You can specify your color values in various
formats.
Format
Hex Code
Syntax
#RRGGBB
Short Hex Code #RGB
Example
p {color: #FF0000; }
p {color: #6A7;}
p{
RGB %
rgb(rrr%, ggg%, bbb%)
color: rgb(50%, 50%, 50%);
}
p{
RGB Absolute
rgb(rrr, ggg, bbb)
color: rgb(0, 0, 255);
}
keyword
aqua, black etc.
p { color: teal;}
32
CSS Box Model
• A set of rules collectively known as CSS Box Model
describes the rectangular region occupied with
HTML elements.
• The main idea is that every element’s layout is
composed of:
the actual element’s content area.
a border around the element.
a padding between the content and the border (inside the border)
a margin between the border and other content (outside the border)
33
34
Document Flow - Block Elements
35
Document Flow – Inline Elements
36
Document Flow – Larger Example
37
