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.