Scribd
Upload
4 views

Lecture 3 CSS

This lecture covers the fundamentals of CSS, including styles, selectors, pseudo selectors, values, and style priority. Key topics include how to attach styles to HTML documents, the format of CSS rules, and different types of selectors such as nested and attribute selectors. Additionally, the lecture discusses CSS values for colors, sizes, fonts, and text properties, along with the concept of CSS specificity and priorities.

Uploaded by

6351071063
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Lecture 3 CSS

This lecture covers the fundamentals of CSS, including styles, selectors, pseudo selectors, values, and style priority. Key topics include how to attach styles to HTML documents, the format of CSS rules, and different types of selectors such as nested and attribute selectors. Additionally, the lecture discusses CSS values for colors, sizes, fonts, and text properties, along with the concept of CSS specificity and priorities.

Uploaded by

6351071063
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

LECTURE 3

CSS
HELLO!
I’M Tran Dung [email protected]

Lecturer in Faculty
of Information
Technology

INTERESTS
0388 389 579
Course Objectives
In this lecture, you will
learn about

● CSS Styles

● CSS Selectors

● Pseudo Selectors

● CSS Values

● Style Priority
TABLE OF CONTENTS

01 02 03
CSS OVERVIEW NESTED SELECTORS CSS VALUES

04 05 06
CSS FONT/ PSEUDO CSS PRIORITIES
TEXT PROPERTIES SELECTORS
1.
CSS OVERVIEW
WHAT IS CSS?

No CSS

CSS
WHAT IS CSS?
CSS defines styling of
the HTML elements
Fonts

Colors

Margins

Sizes

Positioning

Floating

…
Attaching the styles to the document ?

External style Embedded style Inline styles


sheets sheets (Internal)
Combining HTML and CSS Files (External
Style) styles.css
using-css.html
<!DOCTYPE html> .special {
<html> font-style: italic;
<head> font-weight: bold;
<link rel="stylesheet" color: blue;
}
type="text/css" href="styles.css">
</head>
.modern {
<body class="modern"><p>
background: #EEE;
This is a <span class="special">
}
special beer</span> for <span class=
"special">special drinkers</span>.</p> p {
</body> font-size: 24pt;
</html> }
Combining HTML and CSS Files (Embedded
Style) - Internal
<!DOCTYPE html> <body>
<html> <p class="red">This is red</p>
<head> </body>
<style>
.red {
color:red;
}
</style>
</head>
</html>
Combining HTML and CSS Files (Inline Style)
Attribute "style"

<h1 style="color:blue">This is a blue … </h1>

Property Value

<h2 style="color:red; font-size:2.1em">


This is a red …
</h2>
Multiple CSS
declarations
CSS RULES FORMAT
Opening curly brace

Selector h1 {
font-size: 42px; Declaration

Closing curly brace


color: yellow;
}
Property Value

selector { prop1:val1; prop2:val2; … }


CSS RULES FORMAT
2.
Nested Selectors
Primary Selectors: Select by Tag
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>

Select all
<span> elements

span {
background: DodgerBlue;
color: #ffffff;
}
Primary Selectors: Select by ID
<span id="top">Here's a span with some text.</span>
<span>Here's another.</span>

Select <span>
with id="top"

span#top {
background: DodgerBlue;
}
Primary Selectors: Select by Class
<span class="sky">Here's a span with some text.</span>
<span>
Another <span class="code">&lt;span&gt;</span>.
</span>
<span> with
class="sky"
span.sky {
background: DodgerBlue;
}
.code { Elements with
font-family: class="code"
Consolas;
}
Nested Selectors: Descendant
div.items a { <a> inside <div class="items">
color: green;
font-weight: bold; <div class="items">
} <a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<ul>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
</ul>
</div>
Nested Selectors: Adjacent Sibling
<p> coming after <p> p + p {
font-style: italic;
font-weight: bold;
}
<div>
<p>I'm a paragraph</p>
<p>I am selected!</p>
</div>
<div>
<p>I'm a paragraph</p>
<h2>Monkey hair</h2>
<p>I am NOT selected</p>
</div>
Nested Selectors: Direct Child
<span> directly contained in a <div>
div > span {
background: DodgerBlue;
}
span { background: #fff; }
Direct child of <div>
<div>
<span>Span #1, in the div.
<span>Span #2, in the span that's…</span>
</span>
</div>
<span>Span #3, not in the div at all.</span>
Nested Selectors: Multiple Classes
.apple { color: red }
.orange { color: orange }
.small { font-size: 16px }
.apple.orange { Elements with
font-style: italic; both classes
}
Element with
multiple classes

<h2 class="apple orange small">Apple + Orange</h2>


<h2 class="apple">Apple</h2>
<h2 class="orange">Orange</h2>
Attribute Selectors
Attribute
title="menu"

a[title="menu"] {
text-decoration: none;
color: #962103;
font-size: 22px;
}

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#" title="menu">Menu</a></li>
</ul>
Multiple Selectors (Element, Element)

<h1>Welcome…</h1>
<h2>My name is…</h2> h1, h2, p {
<p>I live in Duckburg.</p> background: yellow;
<p>My best friend is…</p> }
2
Combining Multiple Selectors

h1#header.intro {
text-decoration:
underline;
color: #C00;
}

<h1 id="header" class="intro">HTML and CSS</h1>


3.
CSS Values
CSS Color Values (Hex and RGB)
<ul>
<li id="rgb">RGB Item</li>
<li id="hex-rgb">Hex-RGB item</li>
</ul>

#rgb {
color: rgb(192, 41, 2)
}
<red>, <green>, <blue>
#hex-rgb {
color: #C02902;
#RRGGBB or #RGB where
} R, G, B are hex digits (0…F)
CSS Color Values (RGBA and HSLA)
<div id="wrapper">
<div class="opacity">Some
text</div>
</div>
<red>, <green>,
<blue>, <alpha>
#wrapper, .opacity {
background: rgba(87, 76, 83, 0.9)
}
.opacity {
background: hsla(344, 73%, 52%, 0.5); The opacity values are
} from 0.0 to 1.0
Size Values (px)
Pixels: fixed size units (logical pixels, not physical)
<div>
Lorem ipsum dolor
sit adipisicing elit.
</div>

div {
font-size: 24px
}
Size Values (em)
Em's: scalable unit (based on the parent element)
<div>
<div class="nested-div">
Lorem ipsum dolor
sit adipisicing elit…
</div>
</div> Parent <div>
font: 24px 1.8em = 1.8 *
24px = 43.2px
div { font-size: 24px }
.nested-div { font-size: 1.8em http://pxtoem.com
}
Size Values (rem)
Rem's: scalable unit (based on the html element)
<div>
<div class="nested-div">
Lorem ipsum dolor
sit adipisicing elit…
</div>
</div>

html { font-size: 25px } 2rem = 2 *


25px = 50px
div { font-size: 2rem } 1.5rem = 1.5 *
.nested-div { font-size: 1.5rem } 25px = 37.5px
Size in % of the Parent
<div id="outer-div">
I am outer-div -> 600px
<div id="inner-div">
I am div with 50% …
</div> width:
</div> width: 50% *
600px 600px = 300px
#outer-div { width: 50%;
width: 600px; text-align: center;
text-align: center; margin: 0 auto;
} line-height: 50px;
#inner-div { }
Calculated CSS Values: calc(…) Function
<div id="outer-div"> width:
Outer-div: 200px 200px
<div id="inner-div">
Inner-div: 100% - 20px
</div>
</div> width:
100% * 200px
- 20px = 180px
#outer-div { width: calc(100% - 20px);
width: 200px; height: 50px;
height: 80px; text-align: center;
text-align: center; } margin: 0 auto;
#inner-div { line-height: 50px;}
4.
CSS Font / Text Properties
Font Property
CSS font property

font: italic normal bold 12px/16px Verdana

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: Verdana;
Font Embedding
<h1>HTML & CSS Course</h1>
<h2>Normal Text</h2>

@font-face {
font-family: SketchRockwell;
src: url('fonts/SketchRockwell.ttf')
}

h1 {
font-family: SketchRockwell;
font-size: 3.5em
}
Importing "Lato" from Google Font Directory
@import
url('https://fonts.googleapis.com/css?family=Lato');
body {
font-family:
Lato, Arial, sans-serif;
}
sans-serif
serif font font
CSS Font Rules: Color
<h1>color</h1>
<p>Text with default color</p>
<p class="color-ddd">Text…</p>
<p class="color-coral">Text…</p>
<p class="color-rgba">Text…</p>

.color-ddd { .color-coral { .color-rgba {


color:#DDD; color:coral; color:
} } rgba(30, 106, 255, 0.75)
}
CSS Font Rules: Font-Weight
<p class="weight-light">Text…</p>
<p class="weight-bold">Text…</p>

.weight-light {
font-weight: light;
}

.weight-bold {
font-weight: bold;
}
CSS Font Rules: Font-Style
<p class="font-style-italic">Text…</p>
<p class="font-style-oblique">Text…</p>

.font-style-italic {
font-style: italic;
}

.font-style-oblique {
font-style: oblique;
}
CSS Font Rules: Text-Align
<p class="text-align-center">Text…</p>
<p class="text-align-justify">Text…</p>

.text-align-center {
text-align: center;
}

.text-align-justify {
text-align: justify;
}
CSS Font Rules: Text-Transform
<p class="uppercase">Text…</p>
<p class="capitalize">Text…</p>

.uppercase {
text-transform: uppercase;
}

.capitalize {
text-transform:
capitalize;
}
Text Shadow

<blur <shadow
radius> color>

p {
text-shadow: 2px 2px 7px #000; }

<horizontal <vertical
distance> distance>
Word Wrapping
<p>This paragraph…</p>

p {
word-wrap: normal;
}

p {
word-wrap: break-word;
}
5.
Pseudo Selectors
Pseudo Selector (:hover)

<a href="#">Go to Google</a>

a:hover {
color: #D48F29;
text-decoration:
underline overline;
}
Pseudo Selector (:visited)

<a href="#">Go to Google</a>

a:visited {
color:#D48F29;
}
Pseudo Selector (:active)

<h2>click anywhere</h2>

html:active {
background: yellow;
}
Pseudo Selector (:first-line)

<p>Lorem ipsum dolor p:first-line {


sit amet, consectetur color:blue;
adipiscing elit. background-color: lightblue;
</p> }
Pseudo Selector (:first-line)

<p>Lorem ipsum dolor p:first-line {


sit amet, consectetur color:blue;
adipiscing elit. background-color: lightblue;
</p> }
Pseudo Selector (::before and ::after)
<h1>CSS Pseudo Selectors</h1>

h1::before { /* "« " */


content: "\00AB\0020"
}

h1::after { /* " »" */


content: "\0020\00BB"
}
Structural Pseudo-Classes: nth-child(n)
<tr><td>This is first row.</td></tr>
<tr><td>This is second row.</td></tr>
<tr><td>This is third row.</td></tr>
<tr><td>This is fourth row.</td></tr>

tr:nth-child(2n) {
background: #95313b;
color: #fff;
}
Structural Pseudo-Classes: nth-child(n+1)

<tr><td>This is first row.</td></tr>


<tr><td>This is second row.</td></tr>
<tr><td>This is third row.</td></tr>
<tr><td>This is fourth row.</td></tr>

tr:nth-child(2n+1) {
background: #95313b;
color: #fff;
}

5
Structural Pseudo-Classes: nth-of-type(n)
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>
<p>This is fourth paragraph</p>
<div>
<p>This is first paragraph</p>
<p>This is second paragraph</p>
</div>
p:nth-of-type(2) {
background: #95313b;
color: #fff;
}
Structural Pseudo-Classes: first-of-type
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>
<p>This is fourth paragraph</p>
<div>
<p>This is first paragraph</p>
<p>This is second paragraph</p>
</div>

p:first-of-type {
background: #95313b;
color: #fff;
}
6.
CSS Priorities
Default Browser Styles
Reset the browser styles (partially or fully)
* margin: 0; padding:0; }
Order of Style Definitions
Priorities of the CSS style definitions:
External <link rel="stylesheel" href="…"> lowest
Styles in the <head><style>…</style></head>
Inline style attributes: <p style="…">
Using !important

highest
h1.big { color:red !important }
Selector Priority (Specificity)
Selector priorities depend on:

0 0 0 0
inline styles number of number of number of
id selectors class element
selectors selectors
Selector Priority (Specificity) – Example
p { color: #FFF } 0, 0, 0, 1

.intro { color: #345678 } 0, 0, 1, 0

#header { color: #000 } 0, 1, 0, 0

<p style="color: blue">Text</p> 1, 0, 0, 0

p.intro#header { color: #FFF } 0, 1, 1, 1

p.intro.big#header { color: #FFF } 0, 1, 2, 1

p { color: #000 !important } !important


CSS Priorities – Example
<html>
I am HTML <div>I am DIV</div>
<div id="main">
I am also DIV <span>with
SPAN</span>
</div>
</html>

html { background: blue }


#main { background: yellow }
div { background:red }
div > span { background: green }
THANKS

You might also like