This text is styled with some of the text formatting properties.
The heading uses the text-align, text-transformation and color properties.
The paragraph is indented, aligned, and the space between characters is specified.
Text Color
The Color property is used to set the color of the text.
With CSS, a color is most often specified by:
- a color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
{
color: blue;
}
Text 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.
Structure:
{
text-align: center;
}
{
text-align: left;
}
{
text-align: right;
}
{
text-align: justified;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
Structure:
{
text-transform: uppercase;
}
{
text-transform: lowercase;
}
{
text-transform: capitalize;
}
CSS Fonts:
The CSS font properties define the font family, boldness, size, and the style of a text.
Font Family
The font family of a text is set with the font-family property.
Structure:
{
font-family: "Times New Roman", Times, serif;
}
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
Structure:
{
font-style: normal;
}
{
font-style: italic;
}
CSS Text
Font Weight
The font-weight property specifies the weight of a font:
Structure:
{
font-weight: normal;
}
{
font-weight: bold;
}
1. Padding - Individual Sides
CSS has
properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
Links
can be styled with any CSS property (e.g.
color
,
font-family
,
background
,
etc.).
The four
links states are:
a:link
- a normal, unvisited linka:visited
- a link the user has visiteda:hover
- a link when the user mouses over ita:active
- a link the moment it is clicked
3. CSS Tables
a. Table Borders
To
specify table borders in CSS, use the
border
property.
Example:
table,
th, td { border: 1px solid black;
}
}
The
border-collapse
property sets whether the table borders should be collapsed into a
single border.
Example:
table
{ border-collapse: collapse;
}
}
Width
and height of a table are defined by the
width
and height
properties.
Example:
table
{ width: 100%;
}
th { height: 50px;
}
}
th { height: 50px;
}
The
text-align
property sets the horizontal alignment (like left, right, or center)
of the content in <th> or <td>.
Example:
th
{ text-align: left;
}
}
The
vertical-align
property sets the vertical alignment (like top, bottom, or middle) of
the content in <th> or <td>.
Example:
td
{ height: 50px;
vertical-align: bottom;
}
vertical-align: bottom;
}
Tidak ada komentar:
Posting Komentar