1. Chapter 4: CSS
CSS Properties
There are various properties that can be set for elements in CSS. Some are-
1. Font
2. Color and Background
3. Text
4. Borders
5. Padding
6. Margin
7. Lists
8. Tables
1. Font Properties: CSS provide several properties for styling the font of the text, including
changing their face, controlling their size and boldness and the style of a text etc.
The font-family property lists one or more font families, separated by commas from highest priority
to lowest. There are two types of font family names-
1. Family name
2. Generic family
family-name: The name of a specific font family. For example, Times and Helvetica are font
families. Font family names containing whitespace should be quoted.
Attributes Description Values
Font-family A comma delimited sequence of
font-family names.
Font-family : “Times New Roman”, Garamond,
serif
Font-family : Arial, veranda, Helvetica, sans-serif
Font-style The font-style property allows
specifying the font style the browser
uses to render a character.
normal, italic, oblique
Font-size The font-size property sets the size of
the text.
Absolute size (xx-small, x-small, small,
medium, large x-large, xx-large)
Relative sizes (larger, smaller)
Percentage; relative to the parent value)
Length inherit (inherited from parent)
Font-
weight
The property specifies the weight i.e.,
boldness or lightness of a font.
Normal(=400), bold(=700),
bolder(=900), lighter(=100),
100,200,300,400,500,600,700,800,900
(Here 100 is the thinnest, 900 is the thickest and 400 is the
normal value)
Font-
variant
The font-variant property
specifies how lowercase letters are
displayed.
normal
small-caps:Display lowercase letters with smaller-font
uppercase letters
2. Chapter 4: CSS
Generic family: A generic font family is used as a general fall back mechanism when an authors
desired font choices are not available. The generic family is added at the last to let the browser
pick a similar font in the generic family if no other fonts are available. They are written in
lowercase and without quotation. Example of generic families are monospace, serif, sans-serif,
cursive , fantasy etc.
PROG-1
<html>
<head>
<style>
.serif {font-family: “Times New Roman”, Times, serif;}
.sansserif {font-family: Arial, Helvetica, sans-serif;}
.monospace {font-family: “Lucida Console”, Courier, monospace;}
</style>
</head>
<body>
<h1>CSS font-family Example</h1>
<p class="serif">This paragraph will be shown in the Times New Roman
font.</p>
<p class="sansserif">This paragraph will be shown in the Arial font.</p>
<p class="monospace">This paragraph will be shown in the Lucida Console
font.</p>
</body>
</html>
2. Color and Background Properties: CSS color and background properties are used to
define the color and background effects for elements.
Attributes Description Values
color Sets an elements text color Colors are specified using predefined
color names, or RGB, HEX, HSL,
RGBA, HSLA values.
Background-
color
Specifies the color in an elements background Same as above
Background-
image
Used to set the background image by the following way
Background-image: url("image.jpg");
Background-
repeat
By default, the background image property repeats an
image both horizontally and vertically. This attribute can
be set up to repeat the image in a customized way
Repeat-x (repeats horizontally)
Repeat-y (repeats vertically)
Output of PROG-1
3. Chapter 4: CSS
throughout the page.
No repeat.
Background
position
The position of the image is specified by the background-
position property:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
PROG-2
<HTML>
<HEAD>
<TITLE> Working with Style Sheets using Color and Background Attributes</TITLE>
<STYLE>
H1 {font-family : Arial, Helvetica, sans-serif; font-size:26pt; background-color : lightblue;}
H2 {font-family : “Lucida Console”, Courier, monospace; font-size : 26pt; background-color
: lightpink;}
Body {background-image : url("block_texture.jpg");}
P {font-size :12pt; font-style: italic; font-weight : bold; color : #23238e; background-color :
red;}
</STYLE>
</HEAD>
<BODY>
<H1> Silicon Chip Technologies</H1>
<P>A private limited company, which was founded in December 1989. The vision of this
company is to provide any corporate client a single entity which addresses all their
Software Development, Technical and User Documentation, Training and Manpower
Recruitment needs. </P></br>
<H2> Silicon Chip Technologies</H2>
</BODY>
</HTML>
Output of PROG-2
