CL1000 – ICT - Lab

MAHAM SALEEM
DEPARTMENT OF COMPUTER SCIENCE
maham.saleem@nu.edu.pk
 HTML CSS JS

Structure/layou Styl Logi

t e c
CSS
Cascading Style Sheet

t is a language that is used to describe the style of a

I

document..

makeup
not a programming language, but a stying
language

But for styling there should be some content, and

that's why we studied html before
css

go to websites & remove css

Basic
Syntax
Selecto
r

h1
{ color: red;

}
Property Value

semicolon shows that one property has

ended & it is important to put this even
though it won't incurr error
Including
Style
Inlin
e My Page
<h1 style="color: red"> </h1>

<style> tag
<style>
h1 {
color :
red;
Writing style directly inline on each
} element
Style is added using the <style> element in the same
</style> document
Including
Style
External
Stylesheet
Writing CSS in a separate document & linking it with HTML file
<link rel=“stylesheet” href=“style.css” >

best way

An inline style will override external and internal

styles
Color Property
Used to set the color of
foreground

color:
red;
color:
pink;
color: blue;

color:
green;
Background Color
Property
Used to set the color of
background

background-color: red;
background-color: pink
background-color: blue;

background-color:
green;
Color Systems
RGB
color: rgb(255, 0,
0);
color: rgb(0, 255,
0);

we don't have to think on colors on our own, we

can just use color picker tools online or
search online
Color Systems
Hex
(Hexadecimal)
color: #ff0000;
color: #00ff00;

google color
picker
Selectors
Universal Class
.myClass { }
Selector Selector
*{
}

Element
Selector
h1 { }

Id Selector

#myId {
}
Activity
Q1: Create a simple div with an id
"box". Add some text content inside
the div.background color to
Set its
blue.

Q2: Create 3 headings with h1, h2 &

h3. Give them all a class "heading" & set color of "heading" to
red.

Q3: Create a button & set its background

color to : green using css stylesheet
blue using <style>
tag pink using inline
style
Text
Properties
text-align
text-align : left / right / center

font-family : arial

text-decoration
text-decoration : underline/ line-through/ overline
text alignement doesn't mean align according to the
page; i.e. right does not mean on the page's right side
but the parent's right side

in css3, latest css -> start and end are introduced for
language support like arabic
Units in
CSS
Absolute
pixels
(px)
96px = 1 inch

font-size:
2px;

cm, mm, inch & others are also

there but pixels is the
most used
Text
Properties
line-height

line-height :
2px
line-height : 3

line-height :
normal
Text
Properties
text-transform
text-tranform : uppercase /lowercase/capitalize/
Activity 2
Q1: Create a heading centred on the page with all of its text capitalized by
default.

Q2: Set the font family of all the content in the

document to "Times New Roman".

Q:3 Create one div inside another div.

Set id & text "outer" for the first one & "inner" for the second
one.
Set the outer div text size to 25px & inner div text size to
10px.
Box Model in CSS Width

Margin

Height
content
Height
Width Padding

Border
Border

Padding

Margin
Heigh

Height
content
t default, it sets the content area height of the
By
element

divheight: 50px;
{

}
 Width

Width
content
By default, it sets the content area width of the
element

div
{ width: 50px;

}
Border
content
Used to set an element's
border
Border

border-width :
2px;
border-style : solid / ed /
dott
border-color : dashed
black;
Shorthand Method

border : 2px solid black

Border
Used to round the corners of an element's outer border
edge

border-radius : 10px; border-radius : 50% ;

Paddin
content
g
padding-lef
Padding
t
padding-righ
t
padding-top

padding-botto
m
Paddin
g
Shorthand

padding: 50px;
padding: 1px 2px 3px 4px
top | right | bottom | left -> clockwise
Margin Margin
content content

margin-righ
t
margin-lef
t
margin-top

margin-botto
m
Margin
Shorthand

margin: 50px;
margin: 1px 2px 3px
4px;

top | right | bottom | left ->

clockwise
Activity 3
Q1:
Create a div with height & width of
Set its background color to green & the border radius to
100px.
50%.

Q2: Create the following

navbar.
 60px
200px (height
(gap) )
25px
(text #f08804
#0f1111
) anchor (yellow
(black)
tags )
(links)
Display Property
display: inline / block / inline-block / none

inline - Takes only the space required by the element.

(no margin/ padding)
block - Takes full space available in width.

inline-block - Similar to inline but we can set margin &

padding.

none - To remove element from document flow.

Background
Image
Used to set an image as
background

background-image: url ("iimage.jpeg");