Scribd
Upload
5 views68 pages

Unit-3

The document provides an overview of HTML and CSS, detailing how to style web pages using CSS properties such as color, font size, and layout. It explains different methods of incorporating CSS into HTML, including inline, internal, and external stylesheets, as well as various selectors like ID, class, and universal selectors. Additionally, it covers CSS properties related to text, backgrounds, box model, and positioning.

Uploaded by

dassounak728
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views68 pages

Unit-3

The document provides an overview of HTML and CSS, detailing how to style web pages using CSS properties such as color, font size, and layout. It explains different methods of incorporating CSS into HTML, including inline, internal, and external stylesheets, as well as various selectors like ID, class, and universal selectors. Additionally, it covers CSS properties related to text, backgrounds, box model, and positioning.

Uploaded by

dassounak728
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 68

HTML CSS

element
225 popstral

Layout
of a
281 Jos hot

"Coscarding style sheets is used to


form at the webbage style attribut
1
you
→ with the
ess

Jes

you can contron the color, font, size

e of foods the color, fort,


text, spacing bet"
elements, how elements are positioned and
Loid out, what background color images and
backgrund calos are to be used, different
display for different device
and screen sizes & much more.

Syntax
၁၈
declaration (contains more
declarati

ni) { color: blue; font-size:


2px; }
↓
↓
Value
selector profityme value
profitgrome alive
propo
stig
wh
which
element ✓ you want
to style
CSS can be
none

name

Jual Separated
by;"
3 within the
curdly braces declaration blad

added to HTML documents in 3


ways
MR Golds.
Inline css-

2) Lorternal ess
3
guld
External css.par: Golos
‫خرابے اور او‬
Inline css (Percular Paragraph, heading
element yasm)
‫فى‬
‫السوم‬
ex <style> <w prissed
s
color:
"blure;

F
<style
>
<body
>
<p style="color:
red;">
This is a inline ess (IP)

<bod
y>
foort-size: 2px;

•P { color: blue;
}
his color: red; text-align:
center}
Listyle)
Internal ess
ess

An internal ess HTML


page. раде
229 JMTH

used to define a style


of a single
d dow

- An internal ess defined in the es


<head> section of
ge. within a (style)
allement..
page.
2travels god prisode
H
HTML
→ The following example sets the text
color of all <hi) elemen
(on that page) to blue, and the text
color
9

to red.
roc

Honey" (DOCTYPE html


ех

art oldfin
2300664
<html>
0900

All the (P) elemen

xotave

101
(N)
<head>gs: ss12 toot: suld: 60/05
(title), Internal ces
(title)
wald willown to theads
<style>
at boppo
1100/22
drporals do ww
wo

slut of
frowns

body { background-
color: green. I
hi & ex color!
{
bex color: blue} dext align
to
P {{ color:
re
<style>
2

t
<body
>
odig
good

‫ورد‬

red 7 225 Leash


(
220

pad ddaspored solver) 229 sailal


(wky) This is a
beading Im>
<ple)
<im>
Paragraph
(1)
<P> This is a p

‫الله‬

(91) 213 Ami


(intme SENT
output
<body
>

<phoo
t)
-

External ess
style
leAn external sheet is used to d
for many
To
use
HTML
LED the style
pages.
an external style sheet, add a link to it the
<head>
section o
<none> proofs
olla
[head
(Link rel="

<head>
<body
>
<W>
- ‫لعدد‬
‫ملتج‬
HTML

page
.
ག•9
.1
"stylesheet"
href="style.css")

(hi) This is a heading this


bloove ofiaft
<h2> This is a
L
body>
[/html
૫

"style.css"
(boem)

paragraph (IP) 204 &


21S1
1)

Spboot
s

sotos/s2 2015

head body { background-color: blue;


uudist
9laikum
JMTH post

&
color: blue;
). Judialto (hol

{ color: red; } font-size:


100%; })
border: 2pm solid black;
transaxilo-fist
*** Link - wed to Link external resources.
ret = stylesheet: specifies that the Linked file
is a
Stylesheet (css
File)
href="style.css" : provides the path
css file
著

121
Rhod
soteres."- 200ls rd)

<w)
gribeed
gribood unquac
1612
selas by
Css Selector
223 30xd
ID Selector - (#) targets a single element
funique efen
on its id attribute
JMTH

<head>
<style>
bps
‫های او دام‬
‫خود‬
AD JMTN
center

[boom]
#P1 { text-align:
center;
color:

Hello World]
green
green;
}
<style>
(heady

30
2,9/1
2
‫او‬

id "gedes/pfe" - 254 trit)


<body>
<p id="p1" > Hello
World (1)
to
<P> This is a
(body)
<ubady

elements based
on their
(intmey
pribado 21 21)
2T

paragraph (IP) at 21 y and

Class Selector ("%")


targets HTML
suld solos pre

class attribute, allowing multiple


element's, to share the
Same

<head>
styling.
10.
(style)
hold
Jogu: boles
9

•
center
&
asbood
{
text-align: center;
Color: red;
021 3/12 perfont-size: 200pn;
(3/11 200)
Jane
Jadapte ag

(1style) 200 (the sett expiring:


"230-sluts" 2014
<body>
<h1 class="center"> Red color,
center aligned & foot
size 200px
heading <14>
राज
<p class="ckonter"> Red color
14

paragraph (14)
Universal Selector
(*)
ro 220

<head>
<style
>
olospa toss al

*DS { text-align:center; TH
font-size: 300 pri vor
pood color: red;.
}
<style
>
0/P
<body
>

<bod
y
i ceniversal selector (4)
Wiko Heading 1 kg); sett. 232w out
He wish
<4>
<p id="us"> Mee too (IP)
<P>
<P> and mee (IP)

<intme
dha gupi

Jasmots
supines

Grouping
selector
style
definitions.
&

supinu no
SAT

wns of paw at center-aligne

HTML elements with the same


Leniversal
selector
oot He wish you
as
Happy
Holi
You too
Tramals
You too
=

AHWs Jaamela
as color red-

Quid
39Y75001)
Selects all the

w{ text-align:
center;
h2 PS
color: red; pofies: mo
tapt

1/2 { text-align:
Right,
foreslo 1-

center

f
text-align: cenh
color: red
}
· color:
"gezeen red;
<body
>
(21
‫)سرام‬
<hi>
P & Text-align: center,
<h2>
color:
red; }
(41 dos
KP)
‫الله‬

Cubod
a
rob9b2 10269 vi
css selector
Element selector - The element selector
selects HTMC elements based on the element name
P

&{ background-
color: blue; &
text-align:
center

Id selector
‫أبو عمر جاودامه‬
‫داس‬
‫الد اماوم‬
<ubed)

The id selector uses the id attribute of an


HTML
0

Wott pad
element to select a specific
elemen
The 10 of an element is
GU 50

in selector is used to on

- The select an.


unique
9 osm pa
with a

bage, so
the
uniqué element parkg)
element with
a

specific id (#)
<!DOCTYPE
html>
htmer
dt diw 2tasoss JNTH
head)
<style
>
#Paragraph
1
Anglo-
AKSA
4

‫غ او مال‬

slut
e

00103 : ‫لحم‬

text align: center; Jour


colo back ground-color:
blue;
60105

blue

[/style>
(μbod
output
в

This 13
paragraph}
<thead>

13
body

</html>
"Paragraphy">
idz
{P This B

<P> This is paragraph 2


(IP)
estros: AND-Ex
paragraph 1
</P>

<body
>
Lehtmes
pap
*India 19

class selector
Selects HTML elements with a specific clam
attribute
(•) - character.
Jadiation
ocenters
25 Nov 2dists of 21tudiette

text-align: center; to $30/22


color-red;

<p
class="center">
(he clan =
"center">
Wood

} (tiga) a

Calphas) woods
AJ

(1) A 14 391 ANA


(ss leniversal Selector
(*

select all elements on the


page.

got text-align: center;


210
Color & blue;

<bo
dy}}
"> 19

at asco toes fold eat - Woold-


top: 102 page is doilet - dot
ipsa aste
<hi_id = "^poral" >
______ (hi) jo pesos
hani spod pos
<P> - LLP >
দে
<^27.
Cyroupin
g
4142)

Wood

h1 { text-align:
center;
color: red;

}
00/ hin2 Pf
사

(1) brus
=
odio han
text-align:center-
Alribute
Selector
6010/02
200/5
Wat pessible to style HTML elements that
have speenfic
attributes or attributes values.

ex
boods
Grotrage attribute
select all Lay element with a target element:
a

[target]
{{
back

</
style>
<body
>
=

ground =
coloo:
yellow;
20051)

<a bref = "https: "


www.wikipedia.com">
比

WIKIPEDIA as

<a href = "https:""


www. Goog
くん
<a
href
cr
2

Loza 223

google.c
om">
‫خداوط‬
Google play sto
https://www.

Posters in
disney com 2
hod DISEY.
(2)_(top)
N

target = - black - The Link will open in


a new window
4

target=-top - The Link will ofen


in same
I fo the full body of the
current window,
brakingout any foames of the
page is inside one..
Sub Selector (combinator) - explain
relation bet the selecte Decendant Selector
(space) - dive (spac) - div p &
child ()
3)
Next
Sibling (+)
& Subsequent -
Sibling (~)
- divpa
body
astr
ss (P)/0)
<div>

Ta
g
Selector (Element Selector) lif

P{
text-align: center;
color: red;
bicoprolled output
10
0
(P)
.
<p> -
{Pid
<p id="para 1" > me too
< LP)
(P) - <P)
Sane

alute talled at 2012/

css
Properties
Text and font
Properties

4
り

Color Text color color: red;iti204


→

Foot- size & font size font-size: 16px;


4 font -
Familey"
- foot type → Font-family: Arial,
sans-serif; ↳ font-weight > Text boldness font-
weight: bold; 4 text-align Text alignment & text-
align:center;" Ly text-decoration → Lender Line, oveoline
etc -> text-decoration:
underline;
→
9

4 line-height space between Lines Line-height


: 1.5;
Background
Properties
backg
→
ckgroun of -
color →→
porm
-

taid
- color bg color backgroun of -
color : yellow;
• image -> bg image
→ backy
calize I size &
background-
image:
unl

I size & size of by image > bo-


sDe : cover; (img.jpg). -Repeat -
Répect image or not "-repeat: no-
repant,
Box Model (spacing
& Boodes)
-

width - width of the element. → width:


100px;" - neight:50pm;.. night & might
of
#1

Margin space of outside of element +


margin: 10px;
+
Padding us aborend
- 11

border:2pn solid black;

Display &
Positioning
display controls how
elements are
→

displayed
→ displays
position Element positioning
position: absolute; top/Left/right /
bottom positioning relative to parent-
>

Lind
Properties
=
top: sopx; left:
20pn;

List-style type - Define the


bullet style
• positioned-
box {
position: absolute;
50

‫خوامی‬
top: sopn; 2 hot
2002 left: 100pn,
Love
z-index: 10pm;
hled! In

}
Sapled for

List
properties
For

tef List-style-type- Defines the bullet


type -
tif List-style-type:
Square; - scoil
‫لنور ا‬

List-style-typ image - Replace the


bullet with an
coles
Ju
List-

image- tif List-style-


image!
unl

style-position- Defines the bullet


position:
List-style- position inside;
{
List

style-type:
circle;
List-style- image:
"ual.png");
List-style-position:
"inside;
Jspond
ex

Border properties

• border-
box {
border: 3px solid blue, jus border
redius: 10pm; (!!) padding:
10px;

Background
properties

ex:

body
{
Jusq

ནས་
ལྷ
ད
background-color: red;
background-image:
"ganeshbaba@png";"
background- size: "cover",
background-repeat: no-repeat;
(Wanted") background-
position: center;

List ess

}
gothes

cnti204 adt

- set different List item markers for ondend


Lists.
-

set

set

different List item markers for unordered


Lists.
ain

i
mage -Add
background
an the List item market.

colors to Lists and List items..


piste: difizo 4

List-style-type:
cradle,

List-style-type: square,
ex

ul. a {
J
ulo b &

Š
OL.C
{
List-style-type: upper-
roman;
2.

J
olg & List-style-type: Lower-alpha;
G

old Jus

<style
>
theads
Subho
darling

(Bod
y)
{ul clom = "a"}
(4)-(1l) (Lis (Li)
—(1) <>
(ul clos=
"b">
od

(ii)

༢༩༦
)
《ru ༥》

(ol clon= "c">


くじ>

4106
(ol clom =
"d")
(Le) <li>-

Rho
d

Image"
w

621019

"List. style- image:


"usl-image.png" o/p
<body ). (ul) =
(/m)
workpood
image or image
(Defaul
t)
Position
specify the position of the List - Hem
morker.
• inside, outside

ul.a{
positio
n

ul.b

<bod
y>
List style sheet: Inside;
L

260100

List-style- position:
outside;

(The)
<ul class="a") outs
(pre
Li- <li>
<ul>
(क)

ful Flan =
ub
220 62

(me)
(‫)نا‬

"background-eeter:
#ff9999; padding:
20pn;
backgroun of color:
#3399-ff; padding
: 20px;
229

uld

}
‫ه فانان‬
2
3

eldar dipint
prot, sidnt

la

backgrou
nd
color:
‫لمما‬
#..

padding: 5pm;
margin = Left: 35pn;

ul li { 4

001 d

"{
background: #...;
#·

จา
espood
001: depic

}
Amage
color0:

pordings
margin-
left"
2
3

3.

Thoa xg1: saprot pt. di aldat


List-style -
image!

Jo
br
No

padd
y
Table Border CSS

=>

To
specify
<style>
table borders in css, use the
border put
>> <table) (tel) (th) elements.
table (d), th, td {
border: 1px solid; d

ex

Full-Wighth Table

table, th, tol {


border: 1px solid;
F

table {
"width: 100%;
J
Frost. N Last N

2x

Bouq
Collapse Table Border

table: { border: 1pn


soud &
‫دادم‬
ed

table, th, tol { border-collapse:


collapse; }
width: 100%;
later once
dx Height & width.

table, th, 1d & border: 1pm


solidy
table { border-collapse:
collapse;
}
width: 100%;

th { height: Hope;
}
ess Table alignment
(2) Horizontal (Left, righly
center)
2 Vertical (top, bottom of
midolle)
Horizontal
table of booger: Ipn
solid}
.blog
table, th, td { border-collapse: collapse;
width: 100%; f
th, td { text-align:
left/right/center; }
tel

vertical table & border: 1px


soud, f

efe
۲۰ ‫مداد‬
table thita & border-collapse:
collapse; widths/rog th td { text-align:
top/bottom/middle?
Left
keft

Iss Table style


Table padding: space between booder
& content
O padding
property
table { border: 1 pn
solid fo
table.

table, th, tel & border-collapse: collapse; width:


th, to { text-align: left; padding:
10px; }
@ Hoverable
table { border: 1px
sou'd; }
table, th, td { border-collapse:collapse;
width: 100% } th, td { text-align: left;
to: hover {
padding: 10pm; }
background-color: red; I
cursor (red)
Cursor (rea)

1 Stipped (even &


odd)
૧૧)
table & booder: Ipn
sowd}
table, th, td { border-collapse: collapse;
width: 100%;
text
the td { left-align: left; padding:
10pm; G
to: nth-child (even) : {
background-color: coral;
7

卢
the

10077
Table color
that

table Border: Ipu solid,


&
table, td { border-collapse; width:
100%; }
th, td { text-align: left;
pudding: ropn; } to: hover {
background-color: red; }
f

th { background color: red;


color:green;
-es pood
Jalousins

}
sibpica \ molted" data-heal phot

201
Fo21009
pespood combed
ssage
podolog
aldat
9ldot

{box: speed & aldat

sldarveft
9.b was 41 craprod? aldet
Exost: dibin (follog: segellos supood
padaldal

(13) 2547

Chp a
da vs

← Navigation Bar needs


lost
Css
Navigation
Bar
is
basically
Л
91

of
Links: So using
the
the (ul), and<li>

elements makes

perfec
t
Sense.

<html>
Linom

heady on 240 24 quoqzia 2bold wal


po <title) Navization bar creation (title)
[/head> pogosto nang
body>
Ever
<li> <a href
<u> <a href=
25250

" # Home") Home (a) (1)


= "# news") News (ray Lic>locisoft
<li> <a href="# contacts"> Contant </a>/li>
LIμl)
<body
>
[1html'>
0/P
•Home

。 News
blue colo

• Contant

** # - use # for test links. In a real website this woul.


be URLS.

Remove bullet (0)


X-
4
el 2.

margin:0;
&
adding:0;
List-style-type:
none;

Navigation Bar

Vertical
H001200tal

Navigatio
n
Navigation
Bar
Bar.

Vertical Navigation
Bar
<style>
List-style-type:
none;
margin: 0;
padding: 0.
Lia

re
display: block;
width: 60 pn;
background + color:#1 uad;
<ul>

Հրաչ
(4) <a href="#home"> Home (X)
<li><a href
CC

# News") News </a> 4)


"(L) <a href="# Contants") contants (la)
(Me)

**

[display:
blocks
allows

Display
s

as to specify
the Links as block
ele
makes the whole Link area
clickable. & also specify the width
(paddling, mann height etc)
210913 2015
Smolt H.

Horizontal
Navigation By
Bar
: jorde) (0)
(1) trusted
test

Suld
‫راس‬

Show Cint othedonlar al: as $est sot # # **

(•) dildo vend

ald: polqain
19

JOSH V
J214

You might also like