CSS Introduction
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 sizes.
CSS Solved a Big Problem
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.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!
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:
Example
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;
}
You can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class="center" will be center-aligned:
Example
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":
Example
<p class="center large">This paragraph refers to two classes.</p>
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
<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 is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
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> 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
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
CSS Borders
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 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.
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).
5px border-width
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.
Red border
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;
}
Border - Individual Sides
From the examples above you have seen that it is possible to specify a different border for each
side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and
left):
Different Border Styles
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
The example above gives the same result as this:
Example
p {
border-style: dotted solid;
}
So, here is how it works:
If the border-style property has four values:
border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
If the border-style property has three values:
border-style: dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
If the border-style property has two values:
border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
If the border-style property has one value:
border-style: dotted;
o all four borders are dotted
The border-style property is used in the example above. However, it also works with border-
width and border-color.
Border - Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing
with borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
Example
p {
border: 5px solid red;
}
Result:
Some text
You can also specify all the individual border properties for just one side:
Left Border
p {
border-left: 6px solid red;
background-color: lightgrey;
}
Result:
Some text
Bottom Border
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
Result:
Some text
Rounded Borders
The border-radius property is used to add rounded borders to an element:
Normal border
Round border
Rounder border
Roundest border
Example
p {
border: 2px solid red;
border-radius: 5px;
}
CSS Margins
CSS Margins
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border.
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
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;
}
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin properties:
margin-top
margin-right
margin-bottom
margin-left
Example
p {
margin: 100px 150px 100px 80px;
}
So, here is how it works:
If the margin property has four values:
margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
If the margin property has three values:
margin: 25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
If the margin property has two values:
margin: 25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
If the margin property has one value:
margin: 25px;
o all four margins are 25px
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
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
This example lets the left margin be inherited from the parent element:
Example
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal
to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:
Example
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
CSS Outline
CSS Outline
The CSS outline properties specify the style, color, and width of an outline.
An outline is a line that is drawn around elements (outside the borders) to make the element
"stand out".
However, the outline property is different from the border property - The outline is NOT a part of
an element's dimensions; the element's total width and height is not affected by the width of the
outline.
This element has a thin black border and an outline that is 10px wide and green.
Outline Style
The outline-style property specifies the style of the outline.
The outline-style property can have one of the following values:
dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline. The effect depends on the outline-color value
ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
inset - Defines a 3D inset outline. The effect depends on the outline-color value
outset - Defines a 3D outset outline. The effect depends on the outline-color value
none - Defines no outline
hidden - Defines a hidden outline
The following example first sets a thin black border around each <p> element, then it shows the
different outline-style values:
Example
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
invert - performs a color inversion (which ensures that the outline is visible, regardless of
color background)
Example
p {
border: 1px solid black;
outline-style: double;
outline-color: red;
}
Outline Width
The outline-width property specifies the width of the outline.
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
p {border: 1px solid black;}
p.one {
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Outline - Shorthand property
To shorten the code, it is also possible to specify all the individual outline properties in one
property.
The outline property is a shorthand property for the following individual outline properties:
outline-width
outline-style (required)
outline-color
Example
p {
border: 1px solid black;
outline: 5px dotted red;
}
CSS 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 Font family Description
family
Serif Times New Serif fonts have small lines at the ends on some characters
Roman
Georgia
Sans-serif Arial "Sans" means without - these fonts do not have the lines at
Verdana the ends of characters
Monospace Courier New All monospace characters have the same width
Lucida
Console
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;
}
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
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-size: 0.875em;
}
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;
}
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;
}
When the text-align property is set to "justify", each line is stretched so that every line has
equal width, and the left and right margins are straight (like in magazines and newspapers):
Example
div {
text-align: justify;
}
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:
Example
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:
Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
Example
p {
text-indent: 50px;
}
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:
Example
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Line Height
The line-height property is used to specify the space between lines:
Example
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:
Example
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:
Example
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Text Shadow
The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the position of the
vertical shadow (2px) and the color of the shadow (red):
Example
h1 {
text-shadow: 3px 2px red;
}
CSS Tables
The look of an HTML table can be greatly improved with CSS:
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbkp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Kniglich Essen Philip Cramer Germany
Laughing Bacchus
Yoshi Tannamuri Canada
Winecellars
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid black;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single
border:
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
If you only want a border around the table, only specify the border property for <table>:
Example
table {
border: 1px solid black;
}
Table Width and Height
Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to
50px:
Example
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content
in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements
are left-aligned.
The following example left-aligns the text in <th> elements:
Example
th {
text-align: left;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td>
elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use the padding property on
<td> and <th> elements:
Example
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Add the border-bottom property to <th> and <td> for horizontal dividers:
Example
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
tr:hover {background-color: #f5f5f5}
Striped Tables
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or
odd) table rows:
Example
tr:nth-child(even) {background-color: #f2f2f2}
Table Color
The example below specifies the background color and text color of <th> elements:
Example
th {
background-color: #4CAF50;
color: white;
}
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full
content:
First Last Point Point Point Point Point Point Point Point Point Point Point Point
Nam Name s s s s s s s s s s s s
e
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Ada Johnso 67 67 67 67 67 67 67 67 67 67 67 67
m n
Add a container element (like <div>) with overflow-x:auto around the <table> element to make
it responsive:
Example
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
