is a blue paragraphe/p>
Each paragraph has a unique id and unique CSS can be applied
to each of them using this id.
To select an element using the id, use the hash (#) sign followed
by the id name. <100CTY9E ital»
> etm
chead>
‘ cetyle
‘ color + Mods
8
9 «thea
29 tbody
2
B
rhis 1s a blue paragraphe/p>
au ep id-"gremnpsThis de a green paragraph
16 efbodys
xe ephtal>
The CSS is applied to the paragraph whose id is "redp".
The color of the paragraph with id "redp" is changed to red. Other
are not effects.
This is how the id selector is used to apply unique CSS to a
particular element. Let's give their respective colors to other
paragraphs. 1 <1o0cT¥Pe html>
> Stab
>
i BM: mre
; )
° cor
° AS ms
: )
: SHE + mren
iS +
“ites
Remember, an id can never start with a number.
class selector
The id is usually unique for an element. But what if we need the
same CSS for a group of elements? Not all, but some of them. Observe the following HTML file.
2
i:
epothic is a red paragrapne/p>
spothis is a red paragrapne/p>
upsthis is 9 paragraph
esta
Out of all the six paragraphs, first, three should be red in color. We
can give the same ids to them and it will work. But it is not
recommended at all. For such cases, we have another attribute,
which is known as the “class” attribute
The class selector is used to give the same CSS to multiple
elements. To use this type of selector, use a dot (.) followed by the
class name.
The same class is assigned for the first three tags. 2 <100cTYPE heml>
2
2 head
4 sotyle
6 mires
8
1 reat>
2 cbody>
“ ered phe is a red paragraphe/p>
s jesc"redp"sfis is a red paragraphe/p>
16 e"redp" fis is a red paragraph/p>
18
19
o
a
2
B
25
3 ‘choad
A «styler
5 P
6 color + Mirek
7 )
8
a
2
B
“ This is a red paragraph
15
16
18 shtml We can also change the background color of the text using the
“background-color” property.
2
3
»
7
18
2»
<|D0CTYPE htal>
2
3
4 body
5
6 First paragraph
8 “/tody>
einem
xox is not a font so the browser will not support it. The next font,
Impact, separated by a comma will be assigned as the value of the
font-family. Font size
The default size of a tag is 16px (1em). To change the size, use
the "font-size" property. The value can be in pixels, Em, or
percentage.
2 chem
3) heads
4 estyle>
s
6 first (
7 font-size : 20x;
8 ,
10 ssecondp (
n font-size : 303
2 )
Bold font
To make the font bold, use the "font-weight" property.
4. clbocrvPe htm»
2 chtal>
3
4
au
2 «body
as
6 Sody>
a7
The tag has a red background color. But generally, background-color” property is used to set the
background of the entire page. To do this, we have to add the
“background-color” property to the body of the page.
“loocivPe enl>
“heml>
‘
style
aly
background-color
Remember, any CSS added to the body will affect the entire HTML
page. Other than the color name, we can also assign HEX value or RGB
value as the value of "background-color" property.
Background image
Apart from color, we can also set an image as the background using
the "background-color" property. Use the url() method as its value
and pass the link of the image as an argument.
background-inage :url(". images acuntat.396"s
)
2 body The image appears in the background but it is not in the proper way.
To adjust the image properly, we have additional CSS properties.
Background repeat
In the above example, the background image is repeating. This
happens because the image Is set according to its actual size.
To prevent the image from repeating, use the "background-repeat”
property and set "no-repeat" as its value.
heals
mages mountain. jp8")s
3) shea
a oye
° body ¢
background. image uel(*
8 backeround-repeat + no-repeat
: )
A
«head
1 ebody?
heal
heady
tyler
body
bickground-inage
background repeat
ue1(7-/imagos/ecuntain. jp");
}
fread
boy
7
a This looks perfect now.
There are other properties such as "background-attachment’ that is
used to specify if the image is fixed or scrollable and "background-
position” to set the position of the image.
Summary
© The "background-color" property is used to set the color of the
background.
© The "background-image” property is used to set an image as
the background.
To adjust the repetition of the background image, use the
“background-repeat" property. Set its value as "no-repeat” if no
repetition is required.
To stretch the image to the whole window, use the
“background-size" property and set its value as "cover’.
