CSS3 - Styling
PRACHI PATIL, V.S.VISHNU VARDHAN
Formatting With CSS Properties
CSS Background
We can use CSS background properties to de ine the background e ects of
an element .
The following properties can be used for background e ects :
1. background - color
2. background - image
3. background - repeat
4. background - position
f
ff
ff
Formatting With CSS Properties
CSS Background Colour
• The background-color property is used to specify the background colour
of an element.
• EXAMPLE:
body{
Background-color:darkblue;
}
• Similarly, we can specify the background for any element (wherever
applicable).
Formatting With CSS Properties
CSS Background Image
• You can use an image as the background for an element using
background - image property.
• EXAMPLE:
body{
background - image:url(‘java.png’);
}
• By default the image is repeated, both horizontally and vertically, so as to
cover the entire body (or the element on which it is applied).
Formatting With CSS Properties
CSS Background Position
• If the background image disturbs the texts,i.e if the text cannot be read clearly
due to the image in background, we can set the position of the background
image.
• EXAMPLE:
body{
background-image:url(“css.jpg”);
background-repeat:no-repeat;
background-position:right top;
}
Formatting With CSS Properties
Text Formatting
The following properties can be used for formatting text:
1. Text color
2. Text alignment
3. Text decoration
4. Text transformation
5. Text indentation
Formatting With CSS Properties
Text Alignment
• We can either align the text to the left, right, center or we can make it
justi ied.
• EXAMPLE:
p{ text-align:left;}
h1{ text-align:center;}
Text Color
• The color property is used to set the color of text.
• EXAMPLE:
body{ color:blue;}
f
Formatting With CSS Properties
Text Decoration
• You can use text-decoration property to set or remove decorations from
text.
• EXAMPLE:
p{ text-decoration:underline;}
h1{ text-decoration:none;}
Text Transformation
• This property is used to specify lower and uppercase letters of any text.
• EXAMPLE:
h1{ text-transform:uppercase;}
Formatting With CSS Properties
CSS Font
CSS font properties are used to de ine the font family, size, style and
boldness of the text.In CSS there are 2 types of font family names:
1. generic family - a group of font families with a similar look (like “Serif” or
“Monospace”).
2. font family - a speci ic font (like”Times New Roman” or ”Arial”).
CSS Font Family
• The font - family property should hold several font names as a “fallback”
system. If the browser does not support the irst font, it tries the next font.
• EXAMPLE:
p{ font-family:”Arial”,Times,”Sans-serif”;}
f
f
f
Formatting With CSS Properties
CSS Font Size
•You can use the font-size property to set the size of text. The font-size
value can be absolute or it can be relative.
•EXAMPLE:
h1{
font-size: 30px;
}
P{font-size: 15px;
}
Formatting With CSS Properties
CSS Font Size (Relative size)
•You may face resizing problems, when you use older versions of
browsers.
•To avoid such problems, you can use font size using em instead of pixels.
•The em size unit is a W3C recommendation. 1 em is equal to the current
font size.If the default font size is 14px then size of 1 em is 14px.
•EXAMPLE:
h1{
font-size: 1.875em;/*30px/16=1.875em*/
}
Formatting With CSS Properties
CSS Links
•You can use CSS styles to style any link.
•Links can be styled in different ways by using any CSS property like color,
font-family etc.
•Links can be in one of the following states:
1. a: link - Unvisited link
2. a: visited - A link that user has visited
3. a: hover - A link over which the mouse pointer is moving
4. a: active - A link which has been just clicked
Formatting With CSS Properties
CSS Lists
You can use CSS list properties for:
1. Setting different list item markers for ordered lists.
2. Setting different list item markers for unordered lists.
3. Set an image as the list item marker.
Values:
• list-style-type
• list-style-image
Formatting With CSS Properties
CSS Tables
Tables are used to organize data that is too detailed or complicated to be
described adequately in the text.
Table Borders
table, th, td {
border: 1px solid;
}
Formatting With CSS Properties
CSS Tables
Command Width Tables
table {
width: 100%;
}
Formatting With CSS Properties
CSS Tables
Collapse Table Borders
table {
border-collapse:
collapse;
}
Formatting With CSS Properties
CSS Tables
Horizontal Table Alignment
td {
text-align: center;
}
Formatting With CSS Properties
CSS Tables
Vertical Table Alignment
td {
vertical-align: bottom;
}
THANK YOU
