Cascading style sheets

1.

LECTURE 3 - CASCADING STYLE SHEETS (CSS)
Mukhanov Samat Bakytzhanovich
WEB TECHNOLOGIES

2.

Create well - formatted HTML Tables
Understand when and when not to use tables
Explain the role of the form element
Utilize a variety of form controls
Define complex HTML forms
Add HTML5 Form Validations
Ensure accessibility of our forms
Unit Goals
Th i n g s W e ' l l Co ver

3.

THE
CSS - adjectives
PURPLE
D IN O
HTML - nouns
DANC E D
JS - verbs

4.

W H A T IS IT?
W H A T D O E S IT S T A N D F O R ?
CSS stands for Cascading Style Sheets. We ' ll
cover the " cascading " part in a bit; don ' t worry
about it for now !
CSS
T H E R E 'S A L O T !
CSS is very easy to get the hang of, but it can
be intimidating because of how many
properties we can manipulate .

5.

What is CSS?
• Cascading Style Sheets (CSS): is a simple
mechanism for adding style (e.g., fonts, colors,
layouts) to Web documents.
• Styles provide powerful control over the
presentation of web pages.

6.

CASCADING STYLE SHEET
A style sheet consists of a set of rules.
Each rule consists of one or more selectors and a declaration block.
A declaration block consists of a list of declarations in curly braces ({}).
Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).

7.

selector {
pr operty : v alu e;
}

8.

h1 {
color: purple;
}

9.

input[type="text"]:nth-of-type(2n){
border:2px solid red;
}

10.

Style Sheet Syntax Explained
selector
property
value
rule

11.

Local
confined to a single element (tag)
Internal
affect elements in an entire page
External
can affect multiple pages
Precedence
Local > Internal or External
THREE DIFFERENT SCOPES OF CSS

12.

Local Style Sheet
Example
Practice
<h1 style="color:white;
background:orange; fontweight:bold;">Internal Style Sheet
Applied to Header 1</h1>
add “text-align” property to
make it centered
add “border” property to let it
have black, 1px thick, solid
border at left, right, top, and
bottom
Tip:
use “border: <top> <right>
<bottom> <left>;” format for
4 sides; use “border-<side>:
xx yy zz;” for a particular
side, where <side> can be left,
right, top or bottom. Can
apply to other similar
properties.

13.

I NLI NE S T Y L E S
You can write your styles directly inline on each
element , but this is NOT A GOOD IDEA most
of the time .
T HE < STYLE > E L E M E N T
Including
Styles
You can write your styles inside of a <style >
element . This is easy, but it makes it
impossible to share styles between
docum ents. Not recommended either.
E X T E R N A L STYLESHEET
Write your styles in a .css file, and then
include the using a < link > in the head of your
html document . Recommended!

14.

15.

16.

17.

18.

19.

CSS
Colors

20.

21.

Hotpink
Mediumorchid
Firebrick
Gold
Darkkhaki
MediumAquamarine
Lightskyblue
Tomato

22.

different colors

23.

R e d , Gre e n , B l u e
Channels
Each channel
ranges f r o m 0 - 255

24.

rgb ( 255 , 0 , 0 )
rgb ( 0 , 0 , 255 )
rg b ( 173, 20 , 219 )
rgb(0,0,0)

25.

St il l red , g reen , an d
b l u e ch a n n e l s
E a c h ranges from
0 - 255 BUT
represented w i t h
hexadecimal

26.

27.

Hexadecimal
0 ,1,2,3,4 ,
5,6 ,7,8 ,9 ,
A ,B ,C ,D ,E ,F

28.

29.

30.

text-align
font-weight
t e x t - d e c o ra t i o n
line-height
letter-spacing

31.

32.

Relative
Absolute
-
-
EM
REM
VH
VW
%
AND MORE!
PX
PT
CM
IN
MM

33.

34.

PX - BY FAR THE MOST
COMMONLY USED ABSOLUTE UNIT
1px does not necessarily equal the
width of exactly one pixel!
Not recommended for responsive websites.

35.

EM'S ARE RELATIVE UNITS
With font-size, 1em equals the font-size
of the parent. 2em's is twice the fontsize of the parent, etc.
With other properties, 1em is equal
to the computed font-size of the
element itself.

36.

ROOT EMS
Relative to the root html element's
font-size. Often easier to work
with.
If the root font-size is 20px, 1 rem
is always 20px, 2rem is always 40px,
etc.