Scribd
Upload
49 views

1) Text Alignment: Color Property

The document discusses various CSS properties for styling text, fonts, lists, and links. It covers properties for setting text color, alignment, decoration, and transformation. Font properties covered include font family, style, size, weight, and variant. List properties allow customizing list item markers and adding backgrounds. Link styling can differentiate between unvisited, visited, hovered, and active link states.

Uploaded by

aruntomy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

1) Text Alignment: Color Property

The document discusses various CSS properties for styling text, fonts, lists, and links. It covers properties for setting text color, alignment, decoration, and transformation. Font properties covered include font family, style, size, weight, and variant. List properties allow customizing list item markers and adding backgrounds. Link styling can differentiate between unvisited, visited, hovered, and active link states.

Uploaded by

aruntomy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Color property

The CSS color property defines the foreground color of the text content for an element. Its value
can be one of the following:
• Name of the color
• Hexadecimal representation
• RGB representation
Eg: body { color: red; }
h1 { color: #00FF00; }
p.ex { color: RGB(62,0,255); }
Text property
1) Text Alignment

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.

Eg: h1 { text-align: center; }

h2 { text-align: left; }
2) Text Decoration

The text-decoration property is used to set or remove decorations from text.


The values are none, underline, overline, line-through.
Eg: h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
3) Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text. The
values are uppercase, lowercase, capitalize.

Eg: p.lowercase { text-transform: lowercase; }

p.capitalize { text-transform: capitalize; }

4) Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.

Eg: p{ text-indent: 50px; }

Font property
CSS font properties enable you to change the look of your text. For example, you can assign a
font family, apply bold or italic formatting, change the size and more.
1) Font family
The font-family property allows you to set the font family.
1
The font-family property accepts a list of different font families because not all users will have the
same fonts installed on their computer.
If the user doesn't have your first choice font, the second choice will be used, and so on.
<style>
p.serif { font-family: "Times New Roman", Times, serif; }
p.sansserif { font-family: Arial, Helvetica, sans-serif; }
</style>
2) Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning"
<style>
p.normal { font-style: normal; }
p.italic { font-style: italic; }
p.oblique { font-style: oblique; }
</style>
3) Font Size
The font-size property sets the size of the text. The font size can be set in various units such as
Ems, percentage, points, pixels etc.
h1 { font-size: 40px; }
h2 { font-size: 30px; }
p{ font-size: 14px; }
4) Font Weight
The font-weight property specifies the weight of a font:
<style>
p.normal { font-weight: normal; }
p.light { font-weight: lighter; }
p.thick { font-weight: bold; }
p.thicker { font-weight: 900; }
</style>
5) Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font
<style>
p.normal { font-variant: normal; }
p.small { font-variant: small-caps; }
</style>
2
CSS List Property
The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker (ul { list-style-image: url('sqpurple.gif'); })
• Add background colors to lists and list items
The list-style-type property specifies the type of list item marker.
Eg: <!DOCTYPE html>
<html>
<head>
<style>
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
ol { background: #ff9999; padding: 20px; margin-left: 35px;}
ul { background: #3399ff; }
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>

3
</ol>
</body>
</html>
Output

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
links can be styled differently depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
<style>
/* unvisited link */
a:link { color: red; }

/* visited link */
a:visited { color: green; }

/* mouse over link */


a:hover { color: hotpink; }

/* selected link */
a:active { color: blue; }
</style>

You might also like