CSS
Background Colors

In HTML background colors and background image can be applied to the whole page or to a table. CSS provides the facility to apply background color to whole page word.

The property used for this purpose id background-color.

Basic Syntax

Copy Code


p{
   background-color: blue;
}

Background Color Example

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="background-color: yellow;">Learn CSS with PHPDocs community</p>
    </body>
</html>

CSS
Height & Width

Height and width are dynamic dimensions of an element as they fluctuate in order to fit the content.

The width CSS property specifies the width of an element, and the height CSS property specifies the height of an element.

Dimensions Properties

The possible properties can be used to set dimensions are as follows:

Property	Description
height	It specifies the height of an element.
width	It specifies the width of an element.
max-height	It specifies the maximum height of an element.
max-width	It specifies the maximum width of an element.
min-height	It specifies the minimum height of an element.
min-width	It specifies the minimum width of an element.

Dimensions Example

Below examples will demonstrate the basic architecture of height ∓ width

Basic Syntax:

Copy Code


h1{
   height:40px;
  width:30px; 
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <h1 style="height:40h1x; width:30px;">PHPDocs</h1>
    </body>
</html>

CSS
Hyperlink

A hyperlink is an element in a hypertext markup language (HTML) document that links to either another portion of the document or to a different document altogether.

Browsers highlight the content of this element as blue and underlined and permit users to follow the link with a click.

Hyperlink Properties

The following four style sheet entities are used to control hyperlinks in CSS.

Values	Description
a:link	It is used to specify the attributes of a hyperlink
a:visited	It is used to specify the attributes of a hyperlinks that have been visited
a:active	It is used to specify the attributes of an active hyperlink
a:hover	It is used to specify the attributes of the hyperlinks on which the user is moving the mouse.

Hyperlink Example

Below examples will demonstrate the basic architecture of Hyperlink

Basic Syntax:

Copy Code


a:hover{
   color: magenta;
   text-decoration: none;
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css"> 
          h1:hover{
             color: magenta;
            text-decoration: none;
          }
        </style>
    </head>
  
    <body>
       <h1 style="color: #00DDFF;">PHPDocs</h1>
    </body>
</html>

CSS
Indent

The command Indent the first line in every paragraph. Empty space before lines of text in a block is called indentation.

Basic Syntax

Copy Code


              
p{ 
  text-indent: 10px; 
}

Indent Example

Below example will demonstrate the basic architecture of CSS Indent

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="text-indent: 10px;">You can learn programming languages from PHPDocs.</p>
    </body>
</html>

Units

The possible units can be used for these properties are as follows:

Values	Description
pixel	Values with “px” e.g. 3px, 4px
percentage	Values with “%” e.g. 1%, 6%

CSS
Spacing

There are two types of spacing properties in CSS.

Letter Spacing
Word Spacing

Letter Spacing

The letter-spacing defines the spacing between the characters of a block of text.

Syntax:

Copy Code


p{
   letter-spacing: 3px; 
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="letter-spacing: 3px;">You can learn programming languages from PHPDocs.</p>
    </body>
</html>

Word Spacing

The word-spacing defines the length of space between words and tags.

Syntax:

Copy Code


p{ 
  word-spacing: 3px;
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="word-spacing: 3px;">You can learn programming languages from PHPDocs.</p>
    </body>
</html>

Units

The possible units can be used for these properties are as follows:

Values	Description
pixel	Values with “px” e.g. 3px, 4px
rem	Values with “rem” e.g. 1rem, 6rem
normal	It alters the space between characters in order to justify text.

CSS
Float

Float is used to align an element to the left or right side of its container.

It is similar to text-align but the main difference between them is that Align does not remove the item from the document flow whereas float removes it.

Property Values

The possible values are as follows:

Values	Description
right	It aligns the element along the right side.
left	Default value. It aligns the element along the left side.
inherit	It inherits the alignment of the parent.

Float Example

Below example will demonstrate the basic architecture of CSS Float

Float text to right

Copy Code


p {
  float: right;
}

Float text to left

Copy Code


p {
  float: left;
}

Float text as inherit

Copy Code


p{
  float: inherit;
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="float: right;">Learn CSS from PHPDocs.</p>
    </body>
</html>

CSS
Text Alignment

Text alignment is specified by using the property text-align. It only works on block level elements i.e. the elements that add line break around themselves like h1, p, img etc.

Property Values

The possible values are as follows:

Values	Description
right	It aligns the text along the right side.
left	Default value. It aligns the text along the left side.
center	It aligns the contents to the center within the line box.
justify	It specifies the text as justify in order to exactly fill the line box.

Text Alignment Example

Below example will demonstrate the basic architecture of Text Alignment

Align text to right

Copy Code


p{
  float: right;
}

Align text to left

Copy Code


             
p{
  float: left;
}

Align text as center

Copy Code


p{
  float: center;
}

Align text as justify

Copy Code


p{
  float: justify;
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="float: center;">Learn CSS from PHPDocs.</p>
    </body>
</html>

CSS
Text Decoration

The last formatting property is text-decoration. It is used to remove the underlines and other effects of the text. It is normally used to remove the underline from hyperlinks.

Property Values

The possible values are as follows:

Values	Description
none	It removes any extra formatting and makes the text normal.
underline	It adds an underline.
overline	It adds a line over the text.
line-through	It creates a strike through effect.
blink	It makes the text flash on and off.
dashed	It makes the text dashed.
dotted	It makes the text dotted.
double	The line will display as a double line.
inherit	It inherits the decoration of the parent.
initial	It sets this property to its default value.
solid	The line will display as a single line. It is default value.
wavy	It gives wavy effect to text.

Text Decoration Example

Below examples will demonstrate the basic architecture of Text Decoration

Copy Code


              
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

It can also be written as

Copy Code


p{
  text-decoration: underline wavy red;
}

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="text-decoration: underline wavy red;">Learn CSS from PHPDocs.</p>
    </body>
</html>

CSS
Special Effects

Some special effects in CSS are following:

Italics

CSS command for italics is font-style. The possible values are inherit, initial, italic, normal, oblique or unset.

Basic Syntax:

Copy Code


p{ font-style: italic; }

Example:

Copy Code


<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="font-style: italic;">Learn CSS from PHPDocs.</p>
    </body>

    </html>

Boldness

The property that controls the boldness of text is font-weight.

Basic Syntax:

Copy Code


p{ font-weight: bold; }

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="font-weight: bold;">Learn CSS from PHPDocs.</p>
    </body>
    </html>

Capitalization

CSS provides two properties to specify the capitalization of text. Font-variant is used to set all characters in small versions of capital letters.

The possible values are:

uppercase: makes all the letters capital.
lowercase: makes all the letters small.
capitalize: capitalize the first letter in every word.
none: override any inherited transformation.

Basic Syntax:

Copy Code


p{ font-variant: small-caps; }

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="font-variant: small-caps;">Learn CSS from PHPDocs.</p>
    </body>
    </html>

CSS
Text Formatting

HTML provides limited facilities for text formatting, whereas, CSS provides complete text formatting presentation and style.

Text Color

Text color is changed by specifying any color to color property. The color value can be pecified as hexadecimal code like #00DDFF or a named color value like red.

Basic Syntax:

Copy Code


h1 { color: red; }

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <h1 style="color: #00DDFF;">PHPDocs</h1>
    </body>
    </html>

Typeface

Typeface is used to specify the font-family of the text.

The browser will keep going down the list of specified faces until it finds one that is installed on the system. If no font in the list is installed on the system, a font similar to the specified face will be used.

Basic Syntax:

Copy Code

h2 { font-family: Verdana, Arial, Helvatica;}

Example:

Copy Code


<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <h2 style="font-family: Verdana, Arial, Helvatica;">PHPDocs</h2>
    </body>

    </html>

CSS Background Colors

Basic Syntax

Background Color Example

CSS Height & Width

Dimensions Properties

Dimensions Example

Basic Syntax:

Example:

CSS Hyperlink

Hyperlink Properties

Hyperlink Example

Basic Syntax:

Example:

CSS Indent

Basic Syntax

Indent Example

Units

CSS Spacing

Letter Spacing

Syntax:

Example:

Word Spacing

Syntax:

Example:

Units

CSS Float

Property Values

Float Example

Float text to right

Float text to left

Float text as inherit

Example:

CSS Text Alignment

Property Values

Text Alignment Example

Align text to right

Align text to left

Align text as center

Align text as justify

Example:

CSS Text Decoration

Property Values

Text Decoration Example

Example:

CSS Special Effects

Italics

Basic Syntax:

Example:

Boldness

Basic Syntax:

Example:

Capitalization

Basic Syntax:

Example:

CSS Text Formatting

Text Color

Basic Syntax:

Example:

Typeface

Basic Syntax:

Example:

Text Size

Using Point:

Using Pixel:

Using Keyword:

Using Percentage:

CSS
Background Colors

CSS
Height & Width

CSS
Hyperlink

CSS
Indent

CSS
Spacing

CSS
Float

CSS
Text Alignment

CSS
Text Decoration

CSS
Special Effects

CSS
Text Formatting