Lec03 - CSS LAT 3 IPROG

03.
CASCADING
STYLE SHEET
Cascading Style Sheet (CSS)
○ HTML will focus on content

□ Text
□ Image
□ Videos
□ Hyperlink
○ CSS will focus on page’s appearance
○ Current supported version of CSS is CSS3
CSS Structure
selector1 {property: value;}

selector2 {
property1: value1 value2;
property2: value1;
}
selector3, selector4 {property1: value1; property2: value2;}
selector4 selector4a {property1: value1;}
selector5.selector5a {property1: value1; property2: value2;}
CSS Selectors Reference (w3schools.com)

3
How CSS works
○ CSS rules applied to elements in web page

○ The browser will decide which elements to apply the
CSS rules
○ The elements will be decided by the selector
○ Browser has its own default value for CSS rules
4
Selectors
5
Universal Selector
○ Universal selector applies rules for all element in a

web page
* {text-align: center;}
○ This rule will tells all text in the webpage to be
center aligned
Type Selector
○ Type selector will match the element type to apply

the rules
hr {width: 50%;}
○ This rule will be applied to all <hr> element with the
width of 50% of its container
7
Example
hr {width: 50%;}
<body>
<h1>This is a heading</h1>
<hr>
</body>
8
Example
hr {width: 50%;}
h1 {
font-style: italic;
color: blue;
}
9
Class Selector
○ Class can be defined for web element

○ You can apply each class CSS rules
.red {background-color: tomato;}

○ This rule will give any element with class red a
background of tomato color
10
11
Class Selector with Element Type
○ We can apply class selector for specific element type

h1.blue {color: blue;}
q.red {background-color: tomato;}
q.white {background-color: white;}
q.blue {background-color: skyblue;}
q {font-family: Impact;}
12
○ What will the following rules do?
*.big-warning {
font-size: x-large;
color: red;
}
13
ID Selector
○ ID selector works similarly like class selector

○ But ID is unique. Only one ID is permitted in one web
page
#id-value {property1: value; property2: value;}
14
span and div Elements
○ Suppose you cannot find HTML5 element that fits

your needs
○ Or you want the rules does not affect other HTML5
element
○ You can give class to span and div
15
Style Priority
16
Style Priority
Highest to Lowest
1. In element’s style attribute
2. In style element in head section
3. In external file
4. In user setting within web browser
5. In the web browser defaults
CSS Specificity
○ In element’s style 1000

<h1 style="color: pink;">
○ ID Selector 100
#navbar, #submit
○ Class, Psuedo-class, Attribute 10
.test, :hover, [href]
○ Element 1
h1, ::before, ::first-line
18 CSS Selectors Reference (w3schools.com)
div p .green {
color: green;} CSS Specificity
span.green {
color: red;}
<div>
.green { <p>
This <span class="green">is
color: darkblue;}
</span> yet another text
</p>
span { </div>
color: brown;}
div p span.green {
color: yellow;} 19
Box Model
○ For layouting webpage, we uses boxes with boxes

inside
Box Model
21
Sizes
○ W3C suggest web developer to not use the absolute

units
○ Absolute units is units that we have in real world
○ The problem is when the screen resolution is too low,
the size can be inaccurate
22
CSS Units (w3schools.com)
Sizes
Unit Description
px Pixel size of the device
% Relative to the parent element
em Relative to the font-size of the element (2em means 2
times the size of the current font)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
23
Font Properties
○ Multiple font family can be defined

○ The first font family will be used
○ If it does not exist, try the 2nd and so on
○ If all do not exist, use default font from the web browser
blockquote {font-family: "New Century Schoolbook",

Times, serif;}
24
Custom Font Family
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf’);
}
h3 {font-family: Delicious, sans-serif;}
25
Google Font
○ We can use custom font

from google directly
○ Mostly it is free for
commercial use
26
Shorthand Property
font: [font-style-value] [font-variant-value] [font-

weight-value] [font-size-value/line-height-value]
[font-family-value]
border: [width] [style] [color]
margin: [top] [right] [bottom] [left]
padding: [top] [right] [bottom] [left]

27
Display Property
○ none : invisible
○ inline : elements will be added in single line
<span>, <q>, <strong>
○ block : elements will be added as new line
<p>, <div>, <ul>
○ inline-block : a block but displayed as inline
Display Property
○ Inline
Width or height cannot be controlled. Padding and
margin might behave differently.
Note: img is the only inline element with width and

height
29
Display Property
○ Block
The element will have width and height. Padding and
margin are respected.
Note: block will takes up entire line
○ Inline-block
Just like block, but it does not takes up entire line
30
Reset CSS
31
Reset CSS
○ Because elements in website has default CSS value

○ Sometimes we want to reset the CSS default
○ Refer to https://meyerweb.com/eric/tools/css/reset/
Other Properties
33
34
Color Properties
○ Color values are flexible in CSS

□ Color name : red, blue, orange, tomato
□ RGB value : amount of red, green, and blue
□ RGBA value : amount of red, green, blue, and
opacity
□ HSL value : hue, saturation, lightness
□ HSLA value : hue, saturation, lightness, and
opacity
35
Color Properties
○ RGB and RGBA values

rgb(red-percent,green-percent,blue-percent)
color: rgb(red-integer,green-integer,blue-integer)
#rrggbb
○ Opacity can be written with values between 0-1
rgba(red-integer,green-integer,blue-integer,opacity)
36
Color Properties
○ HSL and HSLA values

hsl(hue-integer,saturation-percent,lightness-percent)
hsla(hue-integer,saturation-percent,lightness-percent,opacity)
○ Opacity can be written with values between 0-1
37
Font Properties
○ font-style :
□ normal : normal character
□ oblique : slant the characters
□ italic : cursive font
.italics {font-style: italic;}
38
Font Properties
○ font-variant :
□ normal : normal character
□ small-caps : smaller-capital for lowercase
.title {font-variant: small-caps;}
39
Font Properties
○ font-weight :
□ normal, bold : normal or bold, depends on the
browser
□ bolder, lighter : bolder or lighter depends
on the surrounding text
□ 100, 200, …, 900 : normal is 400, bold is 700
.bold {font-weight: bold;}

40
Font Properties
○ font-family :
□ monospace : Courier New
□ serif : Times New Roman
□ sans-serif : Arial
□ cursive : Monotype Corsiva
□ fantasy : Impact
41
THANKS!
Any questions?
42

Lec03 - CSS LAT 3 IPROG

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec03 - CSS LAT 3 IPROG

Uploaded by

Copyright:

Available Formats

03.

○ HTML will focus on content

selector1 {property: value;}

CSS Selectors Reference (w3schools.com)

○ CSS rules applied to elements in web page

○ Universal selector applies rules for all element in a

○ Type selector will match the element type to apply

○ Class can be defined for web element

.red {background-color: tomato;}

○ We can apply class selector for specific element type

○ ID selector works similarly like class selector

#id-value {property1: value; property2: value;}

○ Suppose you cannot find HTML5 element that fits

○ In element’s style 1000

○ For layouting webpage, we uses boxes with boxes

○ W3C suggest web developer to not use the absolute

○ Multiple font family can be defined

blockquote {font-family: "New Century Schoolbook",

h3 {font-family: Delicious, sans-serif;}

○ We can use custom font

font: [font-style-value] [font-variant-value] [font-

border: [width] [style] [color]

margin: [top] [right] [bottom] [left]

padding: [top] [right] [bottom] [left]

Note: img is the only inline element with width and

○ Because elements in website has default CSS value

○ Color values are flexible in CSS

○ RGB and RGBA values

○ HSL and HSLA values

.italics {font-style: italic;}

.title {font-variant: small-caps;}

.bold {font-weight: bold;}

You might also like