CSS
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 Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Syntax
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.
Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship
between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute
value)
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
p{
text-align: center;
color: red;
}
The CSS id Selector
The id of an element is 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.
Example
#para1 {
text-align: center;
color: red;
}
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed
by the class name.
Example
.center {
text-align: center;
color: red;
}
The CSS Universal Selector
The universal selector(all) (*) selects all HTML elements on the page .
Example
*{
text-align: center;
color: blue;
}
How to Add CSS
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!
Example
<!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>
Internal CSS
An internal style sheet may be used if one single HTML page has a unique
style.
The internal style is defined inside the <style> element, inside the head
section.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
An inline style may be used to apply a unique style for a single element.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS Comments
A CSS comment is placed inside the <style> element, and starts with /* and
ends with */:
Example
/* This is a single-line comment */
p{
color: red;
}
CSS Colors
CSS Background Color
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<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>
CSS Backgrounds
CSS background-color
The background-color property specifies the background color of an element.
Example
The background color of a page is set like this:
body {
background-color: lightblue;
}
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can
take a value from 0.0 - 1.0. The lower value, the more transparent:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}
CSS Background Image
Repeat
CSS background-repeat
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");
}
CSS background-repeat: no-repeat
Showing the background image only once is also specified by the background-
repeat property:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
CSS Background Attachment
CSS background-attachment
The background-attachment property specifies whether the background
image should scroll or be fixed (will not scroll with the rest of the page):
Example
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
CSS Borders
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
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
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;}
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.
CSS Border Width
CSS Border Width
The border-width property specifies the width of the four borders.
Example
Demonstration of the different border widths:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
Specific Side Widths
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 20px; /* 5px top and bottom, 20px on the sides
*/
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides
*/
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px
bottom and 35px left */
}
CSS Margins
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
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 Padding
CSS Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 25px, and a
right and left padding of 50px.</div>
</body>
</html>
CSS Outline
CSS Outline
CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
CSS Outline Style
The outline-style property specifies the style of the outline, and 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
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline
The following example shows the different outline-style values:
Example
Demonstration of the different outline styles:
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;}
CSS Outline Shorthand
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following individual
outline properties:
outline-width
outline-style (required)
outline-color
The outline property is specified as one, two, or three values from the list
above. The order of the values does not matter.
The following example shows some outlines specified with the
shorthand outline property:
A dashed outline.
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
Example
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
CSS Text Decoration
Text Decoration
In this chapter you will learn about the following properties:
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
<!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:
Overline text decoration
Line-through text decoration
Underline text decoration
Overline and underline text decoration.
CSS Text Spacing
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: 5px;
}
h2 {
letter-spacing: -2px;
}
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
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
CSS Text Shadow
❮ PreviousNext ❯
Text Shadow
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical
shadow (2px):
Text shadow effect!
Example
h1 {
text-shadow: 2px 2px;
}
CSS Fonts
The CSS font-family Property
Font Style
Font Weight
Font Size
Text Decoration
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
OUTPUT:
Styling a link with text-decoration property
This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective
Link Buttons
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
CSS Lists
Unordered Lists:
o Coffee
o Tea
o Coca Cola
Coffee
Tea
Coca Cola
Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola
I. Coffee
II. Tea
III. Coca Cola
<!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
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Add a border to a table:
Firstname Lastname
Peter Griffin
Lois Griffin
