Scribd
Upload
11 views20 pages

CSS3-STYLING

The document provides an overview of CSS3 styling, focusing on background properties, text formatting, font properties, links, lists, and tables. It includes examples for each property to illustrate how to apply them effectively. Key topics covered include background color, images, text alignment, font sizes, and table formatting.

Uploaded by

pysv8z4wm5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views20 pages

CSS3-STYLING

The document provides an overview of CSS3 styling, focusing on background properties, text formatting, font properties, links, lists, and tables. It includes examples for each property to illustrate how to apply them effectively. Key topics covered include background color, images, text alignment, font sizes, and table formatting.

Uploaded by

pysv8z4wm5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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

You might also like