CSS Tutorial:

CSS is a stylesheet language that defines the presentation of an HTML (or XML) document.
CSS defines how elements must be rendered on screen, on paper, or in other media.
This tutorial will teach you CSS from basic to advance

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

p {

font-family: "Times New Roman";

font-size: 20px;

}

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

What is CSS?

CSS stands for Cascading Style Sheets
CSS defines how HTML elements are to be displayed on screen, paper, or in other news papers
CSS saves a lot of work. It can control the layout of many web pages all at once
External stylesheets are stored in CSS files

CSS Syntax and Selectors:

CSS Syntax:

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all <p> elements will be center-aligned, with a red text color:

p {
color: red;
text-align: center;
}

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

Example

p {
text-align: center;
color: red;
}

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example

#para1 {
text-align: center;
color: red;
}

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example

.center {
text-align: center;
color: red;
}

Grouping Selectors

If you have elements with the same style definitions, like this:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example

h1, h2, p {
text-align: center;
color: red;
}

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External style sheet
Internal style sheet
Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Example

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

Example

<h1style="color:blue;margin-left:30px;">This is a heading.</h1>

CSS Colors

Colors are displayed combining RED, GREEN, and BLUE light.

Colors in CSS are most often specified by:

a valid color name - like "red"
an RGB value - like "rgb(255, 0, 0)"
a HEX value - like "#ff0000"

Color Names

Colors set by using color names:

<!DOCTYPE html>

<html>

<body>

<h2>Color Names Examples</h2>

<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>

Red background-color

</h2>

Green background-color

</h2>

Blue background-color and white text color

</h2>

Orange background-color

</h2>

Yellow background-color

</h2>

Cyan background-color

</h2>

Black background-color and white text color

</h2>

</body>

</html>

RGB (Red, Green, Blue) Examples

<!DOCTYPE html>

<html>

<body>

<h2>RGB Color Examples</h2>

Background-color set by using rgb(255, 0, 0)

</h2>

Background-color set by using rgb(0, 255, 0)

</h2>

Background-color set by using rgb(0, 0, 255)

</h2>

Background-color set by using rgb(255, 165, 0)

</h2>

Background-color set by using rgb(255, 255, 0)

</h2>

Background-color set by using rgb(0, 255, 255)

</h2>

</body>

</html>

Hexadecimal Colors:

RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00). Note: HEX values are case-insensitive: "#ff0000" is the same as "FF0000".

<!DOCTYPE html>

<html>

<body>

<h2>HEX Color Examples</h2>

Background-color set by using #FF0000

</h2>

Background-color set by using #00FF00

</h2>

Background-color set by using #0000FF

</h2>

Background-color set by using #FFA500

</h2>

Background-color set by using #FFFF00

</h2>

Background-color set by using #00FFFF

</h2>

</body>

</html>

CSS Backgrounds:

The CSS background properties are used to define the background effects for elements.

CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color:

The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example

body {
background-color:lightblue;
}

With CSS, a color is most often specified by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

In the example below, the <h1>, <p>, and <div> elements have different background colors:

Example

h1 {
    background-color: green;
}

div {
    background-color:lightblue;
}

p {
    background-color: yellow;
}

Background Image:

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example:

body {
background-image:url("paper.gif");
}

Below is an example of a bad combination of text and background image. The text is hardly readable:

Example

body {
background-image:url("bgdesert.jpg");
}

Background Image - Repeat Horizontally or Vertically:

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
background-image:url("gradient_bg.png");
}

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body {
background-image:url("gradient_bg.png");
background-repeat: repeat-x;
}

Background Image - Set position and no-repeat:

Showing the background image only once is also specified by the background-repeat property:

Example

body {
background-image:url("img_tree.png");
background-repeat: no-repeat;
}

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:

Example

body {
    background-image:url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example

body {
    background-image:url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

CSS Borders:

CSS Border Properties:

The CSS border properties allow you to specify the style, width, and color of an element's border.

This element has a groove border that is 15px wide and green.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.dotted{border-style: dotted;}
p.dashed{border-style: dashed;}
p.solid{border-style: solid;}
p.double{border-style: double;}
p.groove{border-style: groove;}
p.ridge{border-style: ridge;}
p.inset{border-style: inset;}
p.outset{border-style: outset;}
p.none{border-style: none;}
p.hidden{border-style: hidden;}
p.mix{border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Example

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

Border Width:

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two{
    border-style: solid;
    border-width: medium;
}

p.three{
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Border Color:

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two{
    border-style: solid;
    border-color: green;
}

p.three{
    border-style: solid;
    border-color: red green blue yellow;
}

CSS Margins

CSS Margin Properties

The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space OUTSIDE the border.

This element has a margin of 80px.

CSS Margins

The CSS margin properties set the size of the white space OUTSIDE the border.

Note: The margins are completely transparent - and cannot have a background color!

With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left

All the margin properties can have the following values:

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element

Note: It is also possible to use negative values for margins; to overlap content.

The following example sets different margins for all four sides of a <p> element:

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;

Example

<!DOCTYPE html>

<html>

<head>

<style>

div.container {

border: 1px solid red;

margin-left: 100px;

}

p.one {

margin-left: inherit;

}

</style>

</head>

<body>

<h2>Use of the inherit Value</h2>

<p>Let the left margin be inherited from the parent element:</p>

<p class="one">This is a paragraph with an inherited left margin (from the div element).</p>

</div>

</body>

</html>

So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

If the margin property has three values:

margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px

If the margin property has two values:

margin: 25px 50px;

top and bottom margins are 25px
right and left margins are 50px

If the margin property has one value:

margin: 25px;

all four margins are 25px

Use of The auto Value:

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

width:300px;

margin: auto;

border: 1px solid red;

}

</style>

</head>

<body>

<h2>Use of the auto Value</h2>

<p>You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>

This div will be centered because it has margin: auto;

</div>

</body>

</html>

CSS Padding:

CSS Padding Properties

The CSS padding properties are used to generate space around content.

The padding properties set the size of the white space between the element content and the element border.

This element has a padding of 50px.

CSS Padding

The CSS padding properties define the white space between the element content and the element border.

The padding clears an area around the content (inside the border) of an element.

Note: The padding is affected by the background color of the element!

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all four sides of a <p> element:

Example

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;

}

CSS Height and Width Dimensions:

CSS Dimension Properties:

The CSS dimension properties allow you to control the height and width of an element.

This element has a width of 100%.

Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

This <div> element has a height of 100 pixels and a width of 500 pixels.

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!

The following example shows a <div> element with a height of 100 pixels and a width of 500 pixels:

Example

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

Setting max-width:

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

This <div> element has a height of 100 pixels and a max-width of 500 pixels.

Note: The value of the max-width property overrides width.

The following example shows a <div> element with a height of 100 pixels and a max-width of 500 pixels:

Example

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

CSS Text

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it yourself" link.

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)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Example

body {
color: blue;
}

h1 {
color: green;
}

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.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Text Decoration

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

The value text-decoration: none; is often used to remove underlines from links:

Example

a {
text-decoration: none;
}

The other text-decoration values are used to decorate text:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

CSS Fonts

Difference Between Serif and Sans-serif Fonts

CSS Font Families

In CSS, there are two types of font family names:

generic family - a group of font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")

Generic family	Font family	Description
Serif	Times New Roman Georgia	Serif fonts have small lines at the ends on some characters
Sans-serif	Arial Verdana	"Sans" means without - these fonts do not have the lines at the ends of characters
Monospace	Courier New Lucida Console	All monospace characters have the same width

Font Family

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".

More than one font family is specified in a comma-separated list:

Example

p {
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
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

p.normal{
    font-style: normal;
}

p.italic{
    font-style: italic;
}

p.oblique{
    font-style: oblique;
}

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {
    font-size: 2.5em;/* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em;/* 30px/16=1.875em */
}

p {
    font-size: 0.875em;/* 14px/16=0.875em */
}

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the <body> element:

Example

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-

Font Weight

The font-weight property specifies the weight of a font:

Example

p.normal{
font-weight: normal;
}

p.thick{
font-weight: bold;
}

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Example

p.normal{
font-variant: normal;
}

p.small{
font-variant: small-caps;
}

Next time Description all tag===>>>