Cascading style sheet part 2

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

Contents
• Introduction
• Text styling
• Web-page styling

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>

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");
}

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

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>

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>

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;
}

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

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

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

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)"

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.

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.

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

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>

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>

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

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

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;
}

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

Cascading style sheet part 2

More Related Content

What's hot (20)

Similar to Cascading style sheet part 2 (20)

More from Himanshu Pathak (18)

Recently uploaded (20)

Cascading style sheet part 2