Cascading Style Sheet
Piyush Mishra
What is CSS?
CSS stands for Cascading Style Sheets
CSS defines how HTML elements are to be
displayed
Styles were added to HTML 4.0 to solve a
problem
CSS saves a lot of work
External Style Sheets are stored in CSS files
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1 color=“red”>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 web sites, 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.
In HTML 4.0, all formatting could (and should!) be removed from the HTML
document, and stored in a separate CSS file.
CSS Saves a Lot of Work!
Thestyle definitions are normally saved in
external .css files.
With
an external style sheet file, you can
change the look of an entire Web site 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.
CSS Syntax
Each declaration includes a property name and a value,
separated by a colon.
To make the CSS code more readable, you can put one
declaration on each line.
CSS Comments
Comments are used to explain your code, and may help you 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:
Example
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
CSS Selectors
CSS selectors allow you to select and manipulate HTML
elements.
CSS selectors are used to "find" (or select) HTML elements
based on their id, class, type, attribute, and more.
CSS Selectors
The element Selector
The element selector selects elements based on the element
name.
You can select all <p> elements on a page like this: (all <p>
elements will be center-aligned, with a red text color)
Example:
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.
An id should be unique within a page, so the id selector is used if you want to
select a single, 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;
color: red;
}
<p id=”para1”>Some Text</p>
CSS Selectors
The class Selector
The class selector selects elements with a specific class attribute.
In the example below, all HTML elements with class="center" will be center-
aligned.
.center {
text-align: center;
color: red;
}
<p class=”center”>some text</p>
CSS Selectors
The class Selector
You can also specify that only specific HTML elements should be affected by a
class.
In the example below, all <p> elements with class="center" will be center-
aligned
p.center {
text-align: center;
color: red;
}
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
you can 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
CSS Selectors
Grouping Selectors
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
An external style sheet is ideal when the
style is applied to many pages. With an
external style sheet, you can change the
look of an entire Web site by changing
just one file.
Each page must include a link to the
style sheet with the <link> tag. The
<link> tag goes inside the head section.
External Style Sheet
Syntax
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</h
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. An example of a
style sheet file called "myStyle.css", is shown below:
ead>
External Style Sheet
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet should be used when a
single document has a unique style. You define
internal styles in the head section of an HTML
page, inside the <style> tag, like this:
Internal Style Sheet
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles:
An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style
attribute can contain any CSS property. The example 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>
Css Priority:
1. Inline Css.
2. Internal Css
3. External Css
CSS Border Properties
The CSS border properties allow you to specify the style,
width, and color of an element's border.
p{
border: 5px solid red;
}
p{
border-left: 6px solid red;
background-color: lightgrey;
}
p{
border-bottom: 6px solid red;
background-color: lightgrey;
}
p{
border: 2px solid red;
border-radius: 5px;
}
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).
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
CSS Margins
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
p{
margin: 100px;
}
CSS Margins
If the margin property has four values:
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
CSS Margins
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
CSS Margins
If the Margin has two values
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
CSS Margins
If the Margin has one value
margin: 25px;
all four margins are 25px
CSS Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an
element.
With CSS, you have full control over the padding. There are CSS properties for
setting the padding for each side of an element (top, right, bottom, and left).
CSS Padding
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
CSS Padding
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties
in one property.
The padding property is a shorthand property for the following
individual padding properties:
div {
padding: 50px;
}
CSS Padding
So, here is how it works:
If the padding property has four values:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
CSS Padding
If the padding property has three values:
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
CSS Padding
If the padding property has two values:
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
CSS Padding
If the padding property has one value:
padding: 25px;
all four paddings are 25px
