CSS (cascading stylesheets)

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs, variations in display for different devices and screen sizes as
well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS

 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You
can define a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a
far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of
device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
 Global web standards − Now HTML attributes are being deprecated and it is being recommended to
use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a specification has
been discussed and officially ratified by the W3C members, it becomes a recommendation. These
ratified specifications are called recommendations because the W3C has no control over the actual
implementation of the language. Independent companies and organizations create that software.
 CSS is used to define styles for your web pages, including the design, layout and variations in display
for different devices and screen sizes.
CSS Example
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1>
or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are
converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
You can put CSS Style Rule Syntax as follows −
selector { property: value }

Example − You can define a table border as follows −

table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value of that
property.
You can define selectors in various simple ways based on your comfort. Let me put these selectors one
by one.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS/HTML support 140 standard color names.
CSS Background Color
You can set the background color for HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">How are all? </p>
</body>
</html>

Output :

Hello World
How are all?

CSS 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.

Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.
CSS 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
The border-style property can have from one to four values (for the top border, right border, bottom
border, and the left border).
Example :
Demonstration of the different border styles:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
output :

A dotted border.

A dashed border.
 A solid border.

A double border.

CSS 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:
Example
Demonstration of the different border widths:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}

CSS 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)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 Transparent
Example
Demonstration of the different border colors:
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
Output :

CSS Margins
Margins are used to create space around elements, outside of any defined borders.

This element has a margin of 70px.

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).
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
Tip: Negative values are allowed.
Example

Set different margins for all four sides of a <p> element:

p{

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

CSS Text
CSS has a lot of properties for formatting text.
Text Color
The color property is used to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Text Color and Background Color

In this example, we define both the background-color property and the color property:
Example
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
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
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>

Output :
 Heading 1 (center)
Heading 2 (left)
Heading 3 (right)

The three headings above are aligned center, left and right.

Text Decoration
Add a Decoration Line to Text
The text-decoration-line property is used to add a decoration line to text.
Tip: You can combine more than one value, like overline and underline to display lines both
over and under a text.
Example
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p{
text-decoration-line: overline underline;
}

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p{
text-decoration-line: overline underline;
 text-decoration-color: purple;
}
</style>
</head>
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p>Overline and underline text decoration.</p>
</body>
</html>

Output :

CSS Fonts
Font Selection is Important
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your text. It is also
important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

 Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
 Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
 Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
 Cursive fonts imitate human handwriting.
 Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Some Font Examples

Generic Font Family Examples of Font Names

Serif Times New Roman

Georgia
Garamond

Sans-serif Arial
 Verdana
Helvetica

Monospace Courier New

Lucida Console
Monaco

Cursive Brush Script MT

Lucida Handwriting

Fantasy Copperplate
Papyrus

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
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style property</h1>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Output :

The font-style property

This is a paragraph in normal style.
This is a paragraph in italic style.

This is a paragraph in oblique style.

Font Weight

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

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

Output :

The font-weight property

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Font Size

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use
font size adjustments to make paragraphs look like headings, or headings look like
paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known

Relative size:

Sets the size relative to surrounding elements

Allows a user to change the text size in browsers

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

Set different list item markers for ordered lists

Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
 <li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Output :

The list-style-type Property

Example of unordered lists:

o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Example of ordered lists:

I. Coffee
II. Tea
III. Coca Cola

a. Coffee
b. Tea
c. Coca Cola
 CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:

Firstname Lastname
Peter Griffin
Lois Griffin

Example
table, th, td {
border: 1px solid;
}
Full-Width Table
Firstname Lastname

Peter Griffin

Lois Griffin

The table above might seem small in some cases. If you need a table that
should span the entire screen (full-width), add width: 100% to the <table>
element:

Example
table {
width: 100%;
}

Table Width and Height

The width and height of a table are defined by the width and height properties.

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

The example below sets the width of the table to 100%, and the height to 70%

Example
table {
width: 100%;
}
th {
height: 70px;
}

To create a table that should only span half the page, use width: 50%:

Firstname Lastname Savings

Peter Griffin $100
Lois Griffin $150
Joe Swanson $300