TOPIC: Cascading Style
Sheets
By Shreyansh Yeole
Points Of Discussion
I. What is CSS and Why CSS?
II. Basic Syntax.
III. Selectors.
IV. Ways of linking with HTML.
V. Color Properties.
VI. Background Properties.
VII. Box Model
1. 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.
It is a style sheet language used for
describing the look and formatting of a
document written in HTML or XML.
1.1 Why CSS?
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
A Web site with CSS
A Web site without CSS
2. Basic Syntax
3. Selectors
CSS selectors are used to "find" (or
select) the HTML elements you want to
style.
There can be 5 types of simple selectors:
1. Element selector
2. id selector
3. Class selector
4. Universal selector
5.Grouping selector
1. Element Selector
The element selector selects HTML elements
based on the element name.
p{
border: 2px solid tomato;
color: white;
background-color: black;
text-align: center;
}
Here, all <p> elements on the page will be
center-aligned, with a White text color and black
background:
Output Slide
2. Id Selector
The id selector uses the id attribute of an HTML element to
select a specific element.
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.
#Box-1{
text-align: center;
background-color: rgb(50, 0,
212);
color: aliceblue;
}
Output Slide
3.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.
Unlike Id selector, Class is used to give same formatting to
multiple elements of HTML.
.Box{
border: 2px solid transparent;
padding: 10% 0;
background-color: #dedaf4;
box-shadow: 16px 16px rgb(179, 123, 212);
}
Output Slide
4.Universal Selector
The universal selector (*) selects all HTML elements on the
page.
*{
color: white;
background-color: black;
}
The CSS rule above will affect every HTML element on the page:
Output Slide
5. Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code in the left side where h1,h2 and p elements required same
set of CSS definition thus, we can see the need of grouping selector(in the Right side):
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Output Slide
4. Ways of linking with
HTML.
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.
Source Code
HTML File
•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 CSS File
any HTML tags.
Output Slide
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>
tag, inside the head section.
Output slide
Inline CSS
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.
Output slide
5. Color Properties.
colors are specified using predefined color
names, or RGB, HEX and RGBA.
In this topic we will see some of the css
properties which involves Color Selection.
This includes:
CSS Background Color
CSS Text Color
CSS Border Color
(1.) CSS Background Color
You can set the background color for HTML
elements Using ‘Background-color’ property.
As shown in the example below:
(2.)CSS Text Color
You can set the color of text using the ‘color’
property of CSS.
As shown in the example below:
(3.) CSS Border Color
You can set the color of borders using the
shorthand property for border width, border style
and Border Color. That is ‘border’ property.
As shown in the example below:
6. Background Properties.
The CSS background properties are used to add
background effects for elements including <body> .
In this topic we will see some of the css properties
for the backgrounds.
This involves:
background-color (Seen Earlier)
background-image
background-repeat
Background-position
background (shorthand property)
(2.)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
irrespective of the dimensions of element.
It requires, a url() function to display image from the web or from
the saved image within the file.
(3.)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 in above example.
background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no- repeat;
(4.)Background-position
The background-position property is used to
specify the position of the background image or
in other words it Sets the starting position of a
background image.
background-position: center; background-position: bottom; background-position: top;
(5.)Background property
To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.
Instead of writing: body {
background-color: #ffffff;
background-
image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
• Use the shorthand property to set the background properties in one
declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right
top;
}
7.Box Model
Content - The content of the box,
where text and images appear
Padding - Clears an area around
the content. The padding is
transparent
Border - A border that goes
around the padding and content.
Margin - Clears an area outside
the border. The margin is
transparent
In CSS, the term "box model" is used when talking about design and
layout.
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins. The image
Above illustrates the box model.
