3-css
DESCRIPTION
Casading style sheetsTRANSCRIPT
![Page 1: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/1.jpg)
Cascading Style Sheets
Web Technology Introduction
![Page 2: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/2.jpg)
Outlines
• Core concepts of CSS
• Controlling fonts
• Text format
• Box model• Box model
• Tables
2
![Page 3: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/3.jpg)
Introduction
First example
3
First example
![Page 4: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/4.jpg)
Introduction
• CSS: Cascading Style Sheets
• CSS is a style language for defining layout of
XHTML documents
– Separation of structure from presentation
– CSS covers fonts, colors, margins, lines, height,
width, background images, advanced positions
and many other things
4
![Page 5: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/5.jpg)
Introduction
• CSS works by associating rules with elements
in documents
• Each rule has two parts
– Selector: indicates which elements the declaration
applies toapplies to
– Declaration: indicates how elements should be
styled
5
![Page 6: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/6.jpg)
Adding CSS Rules to XHTML
• Inline style
• Embedded style
• External style
6
![Page 7: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/7.jpg)
Inline Styles
Declare an individual element’s format
– Attribute style
– CSS property
• Followed by a colon and a value
7
![Page 8: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/8.jpg)
Embedded Style Sheets
• Embed an entire CSS document in an XHTML
document’s head section
– Property background-color
• Specifies the background color
– Property font-family– Property font-family
• Specifies the name of the font to use
– Property font-size
• Specifies a 14-point font
8
![Page 9: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/9.jpg)
External Style Sheets
• Style sheet can be stored in a separate file
9
![Page 10: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/10.jpg)
Advantages of External Style Sheets
• Reuse
• Small source code
• Change the appearance of several pages by
altering just the style sheet rather than each altering just the style sheet rather than each
individual page
• Because the source document does not
contain the style rules, different style sheets
can be attached to the same document
10
![Page 11: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/11.jpg)
Conflicting Styles
• author’s style > user’s style > browser’s style
• Children inherit parent’s style
• If a style is specified for the child => used
instead of parent’s style instead of parent’s style
11
![Page 12: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/12.jpg)
Cascading
• The order
– inline
– embedded
– external
12
![Page 13: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/13.jpg)
Type of Selectors
• Class selector
• ID selector
• Type selector
13
![Page 14: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/14.jpg)
Class Selector
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>
/* Define highlight class */
.highlight {
14
.highlight {
color:#F00;
}
/* Define default class */
.default {
color:#333;
}
![Page 15: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/15.jpg)
ID Selector
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
/* Define highlighted text */
#highlight {
15
#highlight {
color:#F00;
}
/* Define default text */
#default {
color:#333;
}
![Page 16: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/16.jpg)
Type Selector
<p>This paragraph has red text.</p>
<p>This paragraph has red text.</p>
/* Define red text */
p{
16
p{
color:#F00;
}
![Page 17: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/17.jpg)
Multiple external style sheets
HTML
CSS
CSS
CSS
17
<link rel="stylesheet“ type="text/css" href="css/one.css" />
<link rel="stylesheet“ type="text/css" href="css/two.css" />
<link rel="stylesheet“ type="text/css" href="css/three.css”/>
three.css has the highest priority
CSS
![Page 18: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/18.jpg)
Imported Style Sheets
CSS
CSS
CSS
CSS
18
@import url("default.css");
@import url("layout.css");
@import url("navigation.css");
@import url("forms.css");
Which has the highest priority?
CSS
![Page 19: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/19.jpg)
Grouping
/* Heading styles */
h1 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h2 {
font-family:Helvetica,Arial,sans-serif;
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-
serif;
line-height:140%;
color:#333;
}
19
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
![Page 20: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/20.jpg)
Grouping
/* Heading styles */
h1, h2, h3 {
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
20
}
/* Additionally, render all h1 headings in italics */
h1 {
font-style:italic;
}
![Page 21: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/21.jpg)
Inheritance
/* Top-level heading */
h1 {
color:#333;
}
21
}
<h1>This is the greatest heading <em>in the world</em></h1>
<em> another heading </em>
![Page 22: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/22.jpg)
Contextual Selectors/* Top-level heading */
h1 {
color:#333;
}
/* Make emphasized text shine brightly */
em {
color:#F00;
}
<h1>This is the greatest heading <em>in the world</em></h1>
22
/* Top-level heading */
h1 {
color:#333;
}
h1 em {
color:#F00;
}
<h1>This is the greatest heading <em>in the world</em></h1>
<em> another heading </em>
![Page 23: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/23.jpg)
CSS Measurements
23
![Page 24: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/24.jpg)
CSS Measurements
24
![Page 25: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/25.jpg)
Colors
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
25
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
![Page 26: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/26.jpg)
Division
<div> tag divides a page into groups
<div>
<p>This is our content area.</p>
</div>
26
<div id="container">
<p>This is our content area.</p>
</div>
![Page 27: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/27.jpg)
Division
<div id="container">
<p>This is our content area.</p>
</div>
27
/* Container holds all visible page elements */
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
![Page 28: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/28.jpg)
Controlling Fonts
28
![Page 29: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/29.jpg)
Controlling Fonts
The font-family Property
<p class=”one”>Here is some text.</p>
<p class=”two”>Here is some text.</p>
<p class=”three”>Here is some text.</p>
29
.one {font-family:arial, verdana, sans-serif;}
.two {font-family:times, “times new roman”, serif;}
.three {font-family:courier, “courier new”, serif;}
![Page 30: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/30.jpg)
Generic Fonts
30
![Page 31: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/31.jpg)
Controlling Fonts
• Size: p {font-size: 12pt}
• Weight: p {font-weight: bold}
• Style: p {font-style: italic}
• Stretch: p {font-stretch: narrow}• Stretch: p {font-stretch: narrow}
31
![Page 32: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/32.jpg)
Formatting Text
• color: color of text
• text-align: Specifies the alignment of the text within
its containing element; values = {left, right, center,
justify}
• vertical-align: Vertical alignment of text within • vertical-align: Vertical alignment of text within
containing element and in relation to containing
element; values={baseline, sub, super, top, etc.}
• text-decoration: Specifies whether the text should
be underlined, overlined, strikethrough, or blinking
text; values={overline, underline, line-through, blink}
32
![Page 33: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/33.jpg)
Box Model
Every element is treated as a box in CSS
33
![Page 34: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/34.jpg)
Box Model
Property Description
border Even if you cannot see it, every box has a border. This
separates the edge of the box from other boxes.
margin The margin is the distance between the edge of a box and
34
margin The margin is the distance between the edge of a box and
the box next to it.
padding This padding is the space between the content of the box
and its border.
![Page 35: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/35.jpg)
Border Properties
• border-color
• border-style: none, solid, dotted, etc.
• border-width
• border-top/bottom/left/rightcolor/style/width• border-top/bottom/left/rightcolor/style/width
35
![Page 36: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/36.jpg)
Borders
• border-style: none, dotted, dashed, solid,
double, groove, ridge, inset, and outset
#container {
width: 400px;
margin: 10px auto 10px auto;
36
margin: 10px auto 10px auto;
padding: 20px;
border-style: dashed dotted solid ridge;
}
![Page 37: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/37.jpg)
Padding Properties
Padding is the distance between the edges
(borders) of an (X)HTML element and the
content within it, and can be applied to any
element.
37
#container {
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
}
![Page 38: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/38.jpg)
Margin Properties
The margin property is used to declare the
margin between an (X)HTML element and
those elements outside of it#container {
margin-top: 20px;
margin-left: auto;
38
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
#container {
margin: 20px auto 1em auto;
}
![Page 39: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/39.jpg)
Dimensions
Property Purpose
height Sets the height of a box
width Sets the width of a box
line-height Sets the height of a line of text
39
max-height Sets a maximum height for a box
min-height Sets the minimum height for a box
max-width Sets the maximum width for a box
min-width Sets the minimum width for a box
![Page 40: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/40.jpg)
The overflow Property
Value Purpose
hidden The overflowing content is hidden.
scroll The box is given scrollbars to allow users to
scroll to see the content.
40
scroll to see the content.
![Page 41: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/41.jpg)
Pseudo-class
41
![Page 42: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/42.jpg)
Pseudo-class
42
![Page 43: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/43.jpg)
Background
43
![Page 44: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/44.jpg)
Tables
• padding to set the amount of space between the border of a table cell and its content — this property is very important to make tables easier to read.
• border to set the properties of the border of a table.
• border to set the properties of the border of a table.
• text and font properties to change the appearance of anything written in the cell.
• text-align to align writing to the left, right, or center of a cell.
44
![Page 45: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/45.jpg)
Tables
• vertical-align to align writing to the top, middle, or bottom of a cell.
• width to set the width of a table or cell.
• height to set the height of a cell (often used on a row as well).on a row as well).
• background-color to change the background color of a table or cell.
• background-image to add an image to the background of a table or cell.
45
![Page 46: 3-CSS](https://reader034.vdocument.in/reader034/viewer/2022051821/563dba47550346aa9aa43b14/html5/thumbnails/46.jpg)
46