CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.
-
Upload
magnus-davidson -
Category
Documents
-
view
218 -
download
1
Transcript of CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.
![Page 1: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/1.jpg)
CS428 Web EngineeringLecture 06
Introduction (Cascading Style Sheet)
![Page 2: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/2.jpg)
2
http://tinyurl.com/ogqlf6ahttp://sites.google.com/site/
bscsnotes4u/webeng
![Page 3: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/3.jpg)
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.
![Page 4: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/4.jpg)
• 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.
![Page 5: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/5.jpg)
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.
![Page 6: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/6.jpg)
• 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;
}
![Page 7: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/7.jpg)
Applying CSS• There are three ways through which you
apply CSS on your HTML doc.
Inline Internal External
![Page 8: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/8.jpg)
Inline CSS
• You can also embed your CSS code in HTML document.
• Example:
<p style=“font-family: monospace;”>
![Page 9: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/9.jpg)
INTERNAL CSS• <style></style> always placed between <head></head> tags.
• Example:<style>
p {line-height: 120%;
}</style>
![Page 10: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/10.jpg)
EXTERNAL CSS FILE• External CSS file will always place between
<HEAD></HEAD> tags.
• <link rel=“stylesheet” type=“text/css”
href=“main.css” />
![Page 11: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/11.jpg)
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.
![Page 12: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/12.jpg)
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>
![Page 13: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/13.jpg)
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>
![Page 14: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/14.jpg)
SELECTORS• There are three types of selectors:
Tag selectors ID selectors Class selectors
![Page 15: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/15.jpg)
Example Tag Selector
<style>p {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}</style>
Tag selector
![Page 16: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/16.jpg)
Example Class Selector
<style>.foo {
font-family: sans-serif;
font-size: 15pt;
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>
class selector
![Page 17: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/17.jpg)
Example Class Selector<style>
p.foo {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}</style>
<body>
<h1 class=“foo”></h1>
<p class=“foo”></p>
</body>
class selector
![Page 18: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/18.jpg)
Example ID Selector
<style> #p1 {
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>
ID selector
![Page 19: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/19.jpg)
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.
![Page 20: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/20.jpg)
Descendant Selector
<style> p a {
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>
![Page 21: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/21.jpg)
Grouping Selector
• you can apply style to many selectors.• <style>
h1, p, section {
color: #35c;
font-weight: bold;
letter-spacing: .4em;
} </style>
![Page 22: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/22.jpg)
Grouping Class & ID Selectors
• you can apply style to many selectors.
<style> #content, #footer, .supplement {
position: absolute;
left: 510px;
width: 200px;
} </style>
![Page 23: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/23.jpg)
PSEUDO SELECTOR
<style>
a:link {
color: #008080;
} a:hover {
color: #FF0000;
}</style>
![Page 24: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/24.jpg)
COMMENTS IN CSS
<style>
/*
p {
font-family: sans-serif;
font-size: 15pt;
}
*/
</style>
![Page 25: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/25.jpg)
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;
![Page 26: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/26.jpg)
CSS UNITS of MEASURE (1/3)• # column1 {
width: 100%;
}
• p {
font-size: 12pt;
}
• p {
font-size: 1pc;
}
![Page 27: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/27.jpg)
CSS UNITS of MEASURE (2/3)• p {
margin-left: 2ex;
}
• p {
padding-right: .25in;
}
• p {
padding-right: 10mm;
}
![Page 28: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/28.jpg)
CSS UNITS of MEASURE (3/3)• p {
margin-left: 2em;
}
• div#main {
width: 600px;
}
![Page 29: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/29.jpg)
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
![Page 30: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/30.jpg)
Unit Description Example
%
Defines a measurement as a percentage relative to another value, typically an enclosing element.
p { font-size: 16pt; line-height: 125%; }
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
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 { letter spacing: 7em; }
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.
p { font-size: 24pt; line-height: 3ex; }
in Defines a measurement in inches. p { word-spacing: .15in;}
mm Defines a measure in millimeters. p { word-spacing: 15mm;}
pcDefines a measurement in picas. A pica is equivalent to 12 points. Thus, there are 6 picas per inch.
p { font-size: 20pc;}
![Page 31: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/31.jpg)
Unit Description Example
ptDefines 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;}
![Page 32: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/32.jpg)
CSS – Colors
• You can specify your color values in various
formats.
Format Syntax Example
Hex Code #RRGGBB p {color: #FF0000; }
Short Hex Code #RGB p {color: #6A7;}
RGB % rgb(rrr%, ggg%, bbb%)p { color: rgb(50%, 50%, 50%); }
RGB Absolute rgb(rrr, ggg, bbb)p { color: rgb(0, 0, 255); }
keyword aqua, black etc. p { color: teal;}
![Page 33: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/33.jpg)
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)
![Page 34: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/34.jpg)
![Page 35: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/35.jpg)
Document Flow - Block Elements
![Page 36: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/36.jpg)
Document Flow – Inline Elements
![Page 37: CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.](https://reader031.fdocuments.net/reader031/viewer/2022032201/56649d305503460f94a086f1/html5/thumbnails/37.jpg)
Document Flow – Larger Example