CSS PROPERTY


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)"
Structure:
{
    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
     
2. CSS Links
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 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

3. CSS Tables 
a. Table Borders
To specify table borders in CSS, use the border property.

Example:
table, th, td { border: 1px solid black;
}


b. Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border.

Example:

table { border-collapse: collapse;
}

c. Table Width and Height
Width and height of a table are defined by the width and height properties.
Example:

table { width: 100%;
}

th { height: 50px;
}


d. Horizontal Alignment
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;
}


e. Vertical Alignment
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;
}



Tidak ada komentar:

Posting Komentar