CSS
Cascading Style Sheets
What is CSS?
CSS stands for Cascading Style Sheets
CSS is a language that describes the style of an HTML
document.
CSS describes how HTML elements should be displayed.
Why Use CSS?
CSS is used to define styles for your web pages, including
;
Design
layout and
variations in display for different devices and screen
sizes.
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
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.
CSS Selectors
CSS selectors are used to "find" (or select) HTML
elements based on their element name, id, class, attribute,
and more.
CSS Selectors
The element Selector:
The element selector selects elements based on the
element name.
Ex:
You can select all <p> elements on a page like this (here, all <p> elements will be
center-aligned, with a red text color):
p {
text-align: center;
color: red;
}
CSS Selectors
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.
CSS Selectors
The id Selector:
Example
The style rule below will be applied to the
HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!
CSS Selectors
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.
CSS Selectors
Example
In this example all HTML elements with
class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
CSS Selectors
Example
In this example only <p> elements with
class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}
Note: A class name cannot start with a number!
CSS Selectors
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;
}
CSS Selectors
Grouping Selectors:
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from
the previous code:
h1, h2, p {
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.
CSS Comments
Example
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 multi-line
comment */
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. 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.
External Style Sheet
Example
External styles are defined within the <link>
element, inside the <head> section of an
HTML page:
<head>
<link rel="stylesheet" type="text/css" href=
"mystyle.css">
</head>
External Style Sheet
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.
External Style Sheet
"mystyle.css“
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 Style Sheet
Example
Internal styles are defined within the <style> element,
inside the <head> section of an HTML page:
<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.
Inline Styles
Example
Inline styles are defined within the "style"
attribute of the relevant element:
<h1 style="color:blue;margin-
left:30px;">This is a heading</h1>
