This document provides an overview of various Cascading Style Sheets (CSS) properties for styling text and web pages. It discusses CSS properties for color, backgrounds, borders, margins, height/width, outlines, fonts, float, and text alignment. For each property, it provides examples of how to specify values in CSS code to style HTML elements. The document is intended to teach the basics of using CSS for text styling and web page design.

1. COMPUTER APPLICATIONS
CLASS X (Code 165)
TOPIC:
UNIT 2: Cascading Style Sheets – Part 2
By
HIMANSHU PATHAK

2. Contents
• Introduction
• Text styling
• Web-page styling

3. CSS Color
• In CSS, a color can be specified by using a
predefined color name or RGB or Hex values.
• With CSS, a color is most often specified by:
– a valid color name - like "red"
– a HEX value - like "#ff0000"
– an RGB value - like "rgb(255,0,0)"
• we can set the color of text:
– <h1 style="color : red;">Hello World</h1>

4. CSS Backgrounds
• You can set the background color for HTML
elements:
– <p style="background-color : blue;">Himanshu </p>
• The opacity property specifies the transparency
of an element. It can take a value from 0.0 - 1.0.
• <p style=“opacity : 0.3; ">Himanshu </p>
• The background-image property specifies an image to
use as the background of an element.
body {
background-image: url("paper.gif");
}

5. CSS Borders
• The CSS border properties allow you to specify
the style, width, and color of an element's
border.
• The border-style property specifies what kind of
border to display.
• The following values are allowed:
– dotted - Defines a dotted border
– dashed - Defines a dashed border
– solid - Defines a solid border
– double - Defines a double border

6. Cont…
• The border-width property specifies the width of
the four borders.
• The width can be set as a specific size (in px, pt,
cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick.
• The border-width property can have from one to
four values (for the top border, right border,
bottom border, and the left border)
• <p style=“border-style : dotted; border-width: 5px; ”>Himanshu
</p>

7. Cont…
• The border-color property is used to set the
color of the four borders.
• If border-color is not set, it inherits the color
of the element.
<p style=“border-style : dotted; border-width: 5px;
border-color: red”>Himanshu </p>

8. CSS Margins
• Margins are used to create space around elements, outside of any defined
borders.
• There are properties for setting the margin for each side of an element (top,
right, bottom, and left).
• All the margin properties can have the following values:
– auto - the browser calculates the margin
– length - specifies a margin in px, pt, cm, etc.
– % - specifies a margin in % of the width of the containing element
• p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
• Use the margin shorthand property with four values:
• p {
margin: 25px 50px 75px 100px;
}

9. CSS Height & Width
• The height and width properties are used to set the height
and width of an element.
• The height and width properties do not include padding,
borders, or margins.
• The height and width properties may have the following
values:
– auto - This is default. The browser calculates the height and
width
– length - Defines the height/width in px, cm etc.
– % - Defines the height/width in percent of the containing block
– initial - Sets the height/width to its default value
– inherit - The height/width will be inherited from its parent
value

10. Cont…
• Example:
<style>
div {
height: 200px;
width: 50%;
}
</style>

11. CSS Outline
• An outline is a line that is drawn around elements,
OUTSIDE the borders, to make the element "stand out".
• CSS has the following outline properties:
– outline-style
– outline-color
– outline-width
• The outline-style property specifies the style of the
outline, and can have one of the following values:
– dotted - Defines a dotted outline
– dashed - Defines a dashed outline
– solid - Defines a solid outline
– double - Defines a double outline

12. Cont…
• The outline-width property specifies the width of
the outline, and can have one of the following
values:
– thin (typically 1px)
– medium (typically 3px)
– thick (typically 5px)
• The outline-color property is used to set the color of
the outline.
– The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"

13. CSS Fonts
• CSS Font property is used to control the look of
texts.
• By the use of CSS font property you can change
the text size, color, style and more.
• font-family: This property is used to change the
face of the font.
• font-size: This property is used to increase or
decrease the size of the font.
• font-style: This property is used to make the font
bold, italic or oblique.

14. CSS Font-Family
• In CSS there are five generic font families:
– Serif fonts have a small stroke at the edges of each letter.
They create a sense of formality and elegance.
– Sans-serif fonts have clean lines (no small strokes
attached). They create a modern and minimalistic look.
– Monospace fonts - here all the letters have the same
fixed width. They create a mechanical look.
– Cursive fonts imitate human handwriting.
– Fantasy fonts are decorative/playful fonts.
• All the different font names belong to one of the
generic font families.

15. Cont…

16. Cont…
• Example:
<style>
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
</style>

17. CSS Font Size
• The font-size property is used to control the size
of fonts.
• Possible values could be xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger,
size in pixels or in %.
• <p style = "font-size : 20px;"> This font size is 20
pixels </p>
• <p style = "font-size : small;"> This font size is
small </p>

18. CSS Font Style
• CSS font-style property defines what type of font
you want to display.
• It may be italic, oblique, or normal.
<style>
h2 { font-style: italic; }
p { font-style: oblique; }
h4 { font-style: normal; }
</style>

19. CSS Float
• The CSS float property is a positioning property.
• It is used to push an element to the left or right,
allowing other element to wrap around it.
• It is generally used with images and layouts.
• Elements are floated only horizontally. So it is
possible only to float elements left or right, not
up or down.
• The float property can have one of the following
values: left, right, none, inherit

20. Cont…
<style>
img {
float: right;
}
</style>

21. CSS align
• The text-align property is used to set the horizontal
alignment of a text.
• A text can be left or right aligned, centered, or
justified.
• h1 {
text-align: center;
}
h2 {
text-align: left;
}

22. Summary
• How to incorporate basic text and web page
design properties using CSS.
• In the next class, we will start Unit III – Cyber
Ethics in detail.
•Thanks