CSS (Cascading Style

sheet)
Prepared at infidata technologies
By
Binod Adhikari
aolbinod@gmail.com
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web
pages all at once
External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen
CSS sizes.a Big Problem
Solved
HTML was NEVER intended to contain tags for formatting a web
page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web developers.
Development of large websites, where fonts and color information
were added to every single page, became a long and expensive
process.
 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.
p {following example all <p> elements will be center-aligned,
In the
color:
with a red textred;
color:
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
-- The element selector selects elements based on the element
Selector
name.
-- You can select all <p> elements on a page like this (in this case,
all
p <p>
{ elements will be center-aligned, with a red text color):
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":
 #para1 {
text-align: center;
Note: An id name cannot start with a number!
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:
.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a
In the example below, only <p> elements with class="center" will be center-a
p.center {
text-align: center;
color: red;
}
 HTML elements can also refer to more than one class.
In the example below, the <p> element will be styled according to
class="center" and to class="large":
<p class="center
Note: A class name
large">This paragraph
cannot start with a
refers to two classes.</p>
number!

Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red; It will be better to group the
} selectors, to minimize the code.
h2 { To group selectors, separate each
text-align: center; selector with a comma.
color: red; In the example below we have
} grouped the selectors from the code
p{ on left side
text-align: center; h1, h2, p {
color: red; text-align: center;
} color: red;
}
 CSS Comments
Comments are used to explain the code, and may help when you
edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also
span multiple lines:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is a comment *

When a browser reads a style sheet, it will format the HTML

document according to the information in the style sheet.
Three Ways to Insert CSS
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:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

An external style sheet can be written in any text editor. The file
should not contain any html tags. The style sheet file must be saved
with a .css extension.
Here
body { is how the "mystyle.css" looks:
background-color: lightblue;
} Note: Do not add a space
between the property value
h1 { and the unit (such as margin-
color: navy; left: 20 px;). The correct way
margin-left: 20px; is: margin-left: 20px;
}
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>
<head>section of an HTML page:
<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:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Tip: An inline style loses many of the advantages of a style sheet

(by mixing content with presentation). Use this method sparingly.

Cascading Order
What style will be used when there is more than one style specified
for an HTML element?
Generally speaking we can say that all the styles will "cascade"
into a new "virtual" style sheet by the following rules, where number
one has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style (inside a specific HTML element) has the highest
priority, which means that it will override a style defined inside the
<head> tag, or in an external style sheet, or a browser default
 CSS Colors
Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
You can set the color of tex
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values:
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1
RGB Value
In HTML, a color can be specified as an RGB value, using this
formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of
the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is
set to its highest value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0,
like this: rgb(0, 0, 0).
To display the color white, all color parameters must be set to
255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
 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:

body {
background-color: lightblue;
}
 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:
body {
background-image: url("paper.gif");
}
Note: When using a background image, use an image that does not disturb th
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:
body {
background-image: url("gradient_bg.png");
}
If the image above is repeated only horizontally (background-
repeat: repeat-x;), the body
background
{ will look better:
background-image: url("gradient_bg.png");
Tip: To repeat an image background-repeat: repeat-x;
vertically, }
set background-repeat:
Background Image - Set position and no-repeat

Showing the background image only once is also specified by

the background-repeat property:

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:

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:

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

Background - Shorthand property

--To shorten the code, it is also possible to specify all the
background properties in one single property. This is called a
shorthand property.
The shorthand property for background is background:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
background-color
background-image
background-repeat
background-attachment
background-position
 CSS Border Properties
The CSS border properties allow you to specify the style, width, and
color of an element's border.
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
*ridge - Defines a 3D ridged border. The effect depends on the border-color va
*inset - Defines a 3D inset border. The effect depends on the border-color valu
*outset - Defines a 3D outset border. The effect depends on the border-color va
*none - Defines no border
*hidden - Defines a hidden border

p.dotted {border-
p.outset {border-style: outset;}
style: dotted;}
p.none {border-style: none;}
p.dashed {border-
p.hidden {border-style: hidden;}
style: dashed;}
p.mix {border-style: dotted dashed solid doub
p.solid {border-style: solid;}
p.double {border-
style: double;}
CSS Margins
The CSS margin properties are used to create space around
elements, outside of any defined borders.
With CSS, you have full control over the margins. There are
properties for setting the margin for each side of an element (top,
right, bottom, and left).
The auto Value
You can set the margin property to auto to horizontally center
the element within its container.

CSS Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element (top,
right, bottom, and left).
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
 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.
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
 CSS Text
Text Color
The color property is used to set the color of the text. The color is specified b
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

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):
h1 { When the t
ext-align p
e a ch line is stre roperty is se
text-align: center; tched so tha t to "justify"
,
width, and t t e v e ry line has e
} he left and r
igh qual
(like in mag t margins ar
azines and n e straight
ewspapers):
h2 {
text-align: left; div {
} text-align: justify;
}
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 link
a{
text-decoration: none;
}

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

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}
Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters,
or capitalize the first letter of each word:
p.uppercase {
Text Indentation
text-transform: uppercase;
The text-indent property is used
}
to specify the indentation of the
first line of a text:
p.lowercase {
text-transform: lowercase; p{
} text-indent: 50px;
}
p.capitalize {
text-transform: capitalize;
}
 Letter Spacing
The letter-spacing property is used to specify the space between
the characters in a text.
The following example demonstrates how to increase or decrease
the space between characters:
h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}
Line Height
The line-height property is used to specify the space between lines:

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}
Text Direction
The direction property is used to change the text direction of an element:

p{
direction: rtl;
}

Word Spacing
The word-spacing property is used to specify the space between
the words in a text.
The following example demonstrates how to increase or
decrease the space between words:
h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
 Text Shadow
The text-shadow property adds shadow to text.

CSS Fonts
The CSS font properties define the font family, boldness, size, and the style of