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
Selectors and Combinators

Here are the possible selectors and combinators:

Selector

CSS selectors are the patterns utilize for selecting the elements for style purpose.

Selector	Description	Syntax
Type	It selects all the elements that match the given node name.	selector_name
Class	It selects all elements that have the given class attribute.	.class_name
ID	It selects an element based on the value of its id attribute.	#id_name
Universal	It selects all elements.	* universal_name\|* \|
Attribute	It selects the elements based on the value of given attribute.	[attr] [attr_value]

Combinator

CSS combinators are used to explain the relationship between two or more selectors.

Selector	Description	Syntax
Adjacent Sibling	The “+” combinator selects adjacent siblings, which means, the second element directly follows the first, and both share the same parent.	Selector + Selector
General Sibling	The ~ combinator selects siblings, which means, the second element follows the first, and both share the same parent	Selector ~ Selector
Child	The > combinator selects the direct children of the first element.	Selector > Selector
Descendant	The (space) combinator selects the nodes which are descendants of the first element.	Selector Selector
Column	The \|\| combinator selects nodes which belong to a column.	Selector \|\| Selector

CSS
Integration

In order to apply CSS properties on existing HTML tags, it is must to link CSS code with HTML. There are three ways to embed CSS file into HTML document.

Inline CSS

Inline style is applied to an individual tag. It modifies the attributes of a tag in the current occurrence of that tag. If the tag is used again, the default style of the tag will be used.

The attributes are given in the opening tag using <style>.

Example:

Copy Code


<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
        <p style=”color: blue;”> PHPDocs</p>
    </body>
</html>

Internal CSS

An internal style sheet is inserted in the head section of a web page. It only affects the web page in which it is inserted. It is added in an HTML document using the <style> tag.

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <style type=”text/css”>
            H4{ color: green; }
            H5{ color: red; }
        </style>
    </head>
  
    <body>
        ...
    </body>
</html>

External CSS

An external style sheet is defined in a separate file stored with .css extension. It is very useful when the style is applied to many pages.

It is used to specify the style of an entire website in one file. An external style sheet file is then linked to the web page using the <link> tag. This <link> tag us written inside the head section.

Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
    </head>
  
    <body>
        ...
    </body>
</html>

Introduction to
CSS

Cascading Style Sheet (CSS) is a collection of formatting styles that are used to modify the properties of existing HTML tags. The designer can specify the design of a web page in a style sheet.

The same style sheet can be used in multiple web pages. It provides a facility of creating websites with consistent design and outlook.

Basic Syntax

Copy Code


Selector{
         Property: Value;
}

CSS Breakdown

Here is the breakdown of CSS

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 Selectors and Combinators

Selector

Combinator

CSS Integration

Inline CSS

Example:

Internal CSS

Example:

External CSS

Example:

Introduction to CSS

Basic Syntax

CSS Breakdown

CSS
Text Alignment

CSS
Text Decoration

CSS
Special Effects

CSS
Text Formatting

CSS
Selectors and Combinators

CSS
Integration

Introduction to
CSS