Scholars Rosary Senior Secondary School
6 K.M. Stone, Village Bohar, Sonipat Road, Rohtak-124001
Class X Sec _____
Computer
Syllabus – Ch-5 (Cascading Style Sheets)
CSS: Cascading Style Sheets are used to describe the look and formatting of a
document written in a markup language like HTML. It provides an additional
features to HTML tags.
HTML provides the structure of web pages whereas CSS is mainly used to control the
styling and layout of the web pages. A single CSS file can be linked to many web
pages.
Advantages Of CSS:-
1. Saves Time: We can write CSS code once and then the same code can be applied to
the group of HTML documents.
2. Easy Maintenance: By making one change in CSS file, all the web pages will be
updated automatically.
3. Pages load faster: CSS reduce the file size, which result in a faster page loading.
4. Superior style to HTML: CSS has much wider presentation
capabilities than HTML. So we can give better looks to our HTML
pages which are not possible with attributes.
5. Multiple Device Compatibility: The webpages formatted by CSS
can be viewed on any device
Three types of Style Sheets:-
1. Internal or Embedded Style sheet : In this, CSS code placed in HEAD section of HTML
document.
2. External: In this, A separate file with .CSS extension will be created.
3. Inline: In this, style is specified to the tag itself.
In Internal CSS, STYLE tag is used in HEAD section to add CSS.
In External CSS, the following tag is used inside HEAD section to link the css file
<Link rel=”stylesheet” Type=”CSS/Text” href=”Filename.css”>
CSS Properties: It is always in Property – Value pair
1 Font-Properties: It is used to Control the looks of the Font
• Color Property:-
{Color: red}
Name of the color can be given
{color: RGB(100,200,100)}
RGB value can be given
{color: #HHH000}
Hexadecimal code can be given
2. Font-size: It is used to increase/decrease the size of font.
{Font-size: 30px}
{Font-size: 100px}
Values can be:-
1. Small
2. XX-Small
3. X-Small
4. Medium
5. Large
6. X-Large
7. XX-Large
8. Or Size in pixels (20px etc.)
3. Font-Family:
It is used to change the face of the font.
{font-family: Comic Sans MS}
Name of font is the value.
• Font-style: Used to make font italic or oblique
{Font-style: Italic/Oblique}
Font-Weight: This property is used to increase or decrease the boldness or lightness
of the font.
{font-weight: bolder)
Values can be: - Bold
Bolder
Lighter
Numbers (100, 200, 300, 400 …900
2. Text Properties: It sets the appearance of individual characters in a word or a line of text.
• Text-Decoration:-
{Text-Decoration: Underline} Values Can be
1. Underline
2. Overline
3. Line-through
4. Blink
• Text-Transform: to change the case
{Text-transform: uppercase} Values can be
1. Uppercase
2. Lowercase
3. Capitalized
Text-Align: to control the position of text.
{text-align: left} Values can be
1. Left
2. Right
3. Center
4. Justify
• Text-Indent: To indent text. It can take negative values too.
{Text-Indent: 200px} or
{Text-Indent: -50px} or
{Text-indent: left}
Questions for Practice
Q-1) Write the CSS code to make a paragraph underline and capitalized font also align to right
side, the first line of paragraph is indented 300 pixels.
Ans- P
{Text-decoration: underline;
Text-transform: capitalized;
Text-align: right;
Text-indent: 300px;}
Q-2) Write the CSS code for the following.
(i) The heading level 1 is align to center, Bold and italic, extra large in size and blue. Also
Underline,
(II) The paragraph of the webpage is written in purple sans-serif font with 800 px thickness
and italic font also paragraph is align to Justify and lowercase. The first line of the
paragraph is indented with 100 pixels on negative side.
Ans- (I) H1
{Text-align: center; font-weight: bold;
font-style: italic; Font-size: X-Large; Color: blue; Text-
decoration: Underline;}
(II) p
{color: purple; font-family: sans-serif; font-weight:800px;
font-style: italic; Text-align: Justify; Text-transform: lowercase;
Text-Indent: -100px;}
CSS Background Properties:-
• Background-color: Changes the color of the background. Body
{Background-color: red}
Values:-
1. Color Name
2. RGB Value
3. Hexadecimal code
• Background-image: Sets an image as a background. Body {Background-
image: url (“cloud.jpg”)}
Q-3) Write the CSS code for the given specifications.
Paragraph on the webpage is in 58 and Arial Black font. The background of the paragraph
Yellow in color and Body of the webpage is having the image Could.jpg
Ans-) p
{font-size: 58; Font-family: Arial Black; Background-color: Yellow} Body
{background-image: url(“cloud.jpg”)}
Q-4) Write the CSS code for H2 on a webpage is align to right and a Pink, 90 size in font from
Elephant Family with Border and Oblique effect having green color background.
Ans- H2
{Font-size:90px; Color: pink;
Font-family: Elephant; Font-weight: Bolder;
Font-style: Oblique;
Background-color: Green;}
Border Properties:-
• Border-style: It specify the Border type.
{Border-style: dotted;}
Values can be:-
1. Dotted
2. Solid
3. Dashed
4. Double
5. Inset
6. Outset
• Border-width:
{Border-style: Dashed; Border-width: Thin} Values can be:-
1. Thick
2. Thin
3. Medium
• Border-color:
{Border-style: Dashed; Border-Color: Red} Values Can be:-
1. RGB Value
2. Color Name
3. Hexadecimal Code
Outline Properties:- An outline is a line that is drawn around elements, outside the
border.
• Outline-style: It specify the outline type.
{Outline-style: dotted;} Values can be:-
Dotted Solid Dashed
Double Inset Outset
• outline-width:
{outline-style: Dashed; outline-width: Thin} Values can be:-
4. Thick
5. Thin
6. Medium
• outline-color:
{outline-style: Dashed; outline-Color: Red} Values Can be:-
4. RGB Value
5. Color Name
6. Hexadecimal Co
Q-5) H3 on the webpage is having dotted border of green color around it. Also a beautiful
Yellow background. It is aligned to the center and also having a line above it.
Ans- H3
{Border-style: dotted; Border-color: Green; Background-color: Yellow; Text-align:
Center; Text-decoration: Overlie;}
Q-6) Heading level 6 on the webpage is align to the right side of the webpage with a Red and
Solid border around it. It is written in lowercase and a picture ABC.png is displayed as
background of Heading 6
Ans- H6
{Text-align: Right; Border-style: Solid; Border-color: Red;
Text-transform: lowercase; Background-image: url (“ABC.png”);}
Margin properties
(All values in Pixels)
Margin-Left:- Body{margin-left: 200px}
Margin-Right:- Body{Margin-right:
100px;}
Margin-Top:-
Body{Margin-top: 50px} Margin-Bottom:-
Body{Margin-bottom: 100px}
Margin Short Properties:- Defining all margins using only one property. Always Go from
Top>Right>Bottom>Left
P{Margin: 50px 100px 50px 100px;}
Q-7) Paragraph on the webpage is center aligned and strike though all typed in uppercase, also
given margin 50 on the top and bottom side. It is having 10 pixel thick yellow double
border around it.
Ans- P {Text-align: center; Text-decoration: line-through; Text- transform: uppercase; margin-
top: 50px; Margin-bottom: 50px; Border- style: double; Border-color: Yellow; Border-width:
10px;}
Q-8 Body of the webpage is having a background image liking.png also 50 px border on 3 sides.
Top, left and right.
Ans- Body
{Background-Image: Url (“Linking.png”}; Margin-top: 50px; Margin-right:
50px; Margin-left: 50px;}
CSS Float properties: Only image can be floated. Img {Float: right;}
Values can be
1. Right
2. Left
3. Initial (Default Value)
Height and width properties:- it define the height and width of an element. It does
not include the padding, border and margin etc.
P
{height:200px; width:500px;}
Questions for practice.
Write the CSS code for the Following.
1. Heading Level 1 on the webpage is yellow in color with 101 size having 50x50x50x100 px
margin around it.
2. Heading Level 2 is aligned to right and having italic effect. Also having green color
background.
3. Heading level 3 is in uppercase and having a line above it. It is having a solid red color 10 pixel
border around it.
4. Paragraph on the webpage is belonging to Verdana font and having Extra-large in size
with purple color border. The height of the para is 300pixels and width of the para is
300pixels
5. H3 is bold, Italic and underlined. With small font size and the text of Heading 3 appear
is Capitalized font.
6. Paragraph first line is indented 100 pixel negative side and an image First.gif appears as
the background of paragraph. This paragraph is having dashed green color thick border
around it.
7. The image displayed on webpage is on the right side and body of the webpage is also
having the same image. Name of picture is Candle.jpg.
8. Paragraph on the webpage is aligned to center with Cyan and extra small size having a
lighter and underline effects, It is having green doubled border around. 50px margin on 4
sides appears in the paragraph.
