Cascading Style Sheets

M Vishnuvardhan
Introduction
» 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 (.css as
extension)

M Vishnuvardhan
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.
Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

M Vishnuvardhan
There are many css properties some of them are
color, font-size, font-weight, border-color, padding, text-align,
vertical-align, line-height, list-style, background-color,
background-image so on..,
CSS Properties

M Vishnuvardhan
» Inherit
» Predefined values
» Lengths and percentages
» URL
» CSS Colors
» Color name
» Hex code
» rgb(r,g,b) (0-255)
» hsl(h,s,l)( h- 0-360, s,l -0-100%)
» rgba() and hsla() (a- 0-1 where 0 is tansparent and 1 is opaque)
CSS Properties - Values

M Vishnuvardhan
CSS supports c style multiline comments
Syntax:
/* this is a multi line comment
can be spanned for multiple lines*/
Adding Comments to CSS

M Vishnuvardhan
CSS selectors are used to "find" (or select) the HTML elements
you want to style.
Most commonly used CSS selectors are Simple selectors
(select elements based on name, id, class)
Elements by name
Eg: p {
text-align: center;
color: red;
}
CSS Selectors

M Vishnuvardhan
Eg:
p {
text-align: center;
color: red;
}
Here, all <p> elements on the page will be center-aligned,
with a red text color
CSS Selectors – by name

M Vishnuvardhan
The id attribute of html used to set identifier. 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.
Eg:
#para1 {
text-align: center;
color: red;
}
The CSS rule will be applied to the HTML element with
id="para1“
Note: An id name cannot start with a number!
CSS Selectors – by id

M Vishnuvardhan
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.
Eg:
.center
{
text-align: center;
color: red;
}
In this example all HTML elements with class="center" will be
red and center-aligned:
CSS Selectors – by class

M Vishnuvardhan
We can also specify that only specific HTML elements should
be affected by a class.
Eg:
p.center
{
text-align: center;
color: red;
}
In this example only <p> elements with class="center" will be
red and center-aligned:

M Vishnuvardhan
HTML elements can also refer to more than one class.
Eg:
<p class="center large">This paragraph refers to
two classes.</p>
In this example the <p> element will be styled according to
class="center" and to class="large“
Note: A class name cannot start with a number!

M Vishnuvardhan
Selecting elements by context
Some times :first-child is used to select the first child of the
element
Selector Example Description
element element div p
Selects all <p> elements inside <div>
elements
element>element div > p
Selects all <p> elements where the parent is
a <div> element
element+element div + p
Selects the first <p> element that are
placed immediately after <div> elements
element1~element2
p ~ ul
Selects every <ul> element that are
preceded by a <p> element
CSS Selectors – Combinator Selectors

M Vishnuvardhan
It is also possible to select the part of the element
Syntax:
selector::pseudo-element {
property: value;
}
Where peuso-element can be first-line, first-
letter, before, after
Eg:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
CSS Selectors

M Vishnuvardhan
It possible to select an element based on the state.
Syntax:
selector:pseudo-class {
property: value;
}
Pseudoclass can be focus, hover, active, visited,
checked so on
Eg:
div:hover {
background-color: blue;
}
CSS Selectors – Based on state

M Vishnuvardhan
Selector Example Example description
[attribute] [target]
Selects all elements with a target
attribute
[attribute=value] [target=_blank]
Selects all elements with
target="_blank"
[attribute~=value] [title~=flower]
Selects all elements with a title
attribute containing the word "flower"
[attribute^=value] a[href^="https"]
Selects every <a> element whose href
attribute value begins with "https"
[attribute$=value] a[href$=".pdf"]
attribute value ends with ".pdf"
[attribute*=value] a[href*="ssbn"]
attribute value contains the substring
"ssbn"
CSS Selectors – Based on Attributes

M Vishnuvardhan
The grouping selector selects all the HTML elements with the
same style definitions. To group selectors, separate each
selector with a comma.
Eg:
h1, h2, p {
text-align: center;
color: red;
}
Here the styles are applied to h1, h2, p tags
CSS Selectors – Grouping Selector

M Vishnuvardhan
The universal selector (*) selects all HTML elements on the
page.
Eg:
* {
text-align: center;
color: blue;
}
The CSS rule will affect every HTML element on the page
CSS Selectors – Universal Selector

M Vishnuvardhan
There are three ways of inserting a style sheet:
» Inline CSS
» Internal or Embedded CSS
» External CSS
Adding CSS to web page

M Vishnuvardhan
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.
Syntax:
<element style=“ property:value;….”> </element>
Eg:
<p style="color:red;">This is a paragraph.</p>
Inline CSS

M Vishnuvardhan
Internal style is defined inside the <style> element, inside the
head section.
Syntax:
<style>
element
{
property: value;
}
</style>
Internal or Embedded CSS
Eg:
<style>
body
{
background-color: orange;
}
</style>

M Vishnuvardhan
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 any HTML tags.
Syntax:
element
{
property: value;
}
External CSS
Eg: (saved as base.css)
body {
background-color: lightblue;
}

M Vishnuvardhan
HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.
Syntax:
<link rel=“type" href=“cssfilename">
rel attribute specifies the relationship between the current
document and the linked document/resource.
href specifies the address of the filename
Eg: <link rel="stylesheet" href=“base.css">
External CSS

M Vishnuvardhan
It is possible to have alternate style sheet for a web page
Syntax:
<link rel=“alternate stylesheet" href=“cssfilename">
Eg: <link rel="stylesheet" href=“base.css">
<link rel=“alternate stylesheet" href=“context.css">
Alternate Style Sheets

M Vishnuvardhan
It is possible to have style sheets for a web page for a
particular media
Syntax:
<link rel=“stylesheet" media=output href=“cssfilename“ >
Output can be screen or print
Eg:
<link rel="stylesheet" href=“base.css“ media=”screen” >
<link rel=“stylesheet" href=“con.css“ media=”print” >
Using Media Specific Style Sheets

M Vishnuvardhan
All the styles in a page will "cascade" into a new "virtual" style
sheet by the following rules, where number one has the
highest priority:
» Inline style (inside an HTML element)
» External and internal style sheets (in the head section)
» Browser default
So, an inline style has the highest priority, and will override
external and internal styles and browser defaults.
Cascading Order

M Vishnuvardhan
All HTML elements can be considered as boxes. It is
essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and
the actual content. The box model allows us to add a
border around elements, and to define space between
elements.
CSS Layouts – Box Model

M Vishnuvardhan
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
CSS Layouts – Box Model

M Vishnuvardhan
Background properties are used to define the background
effects for elements.
background-color: background-color: lightblue;
background-image: background-image: url("paper.gif");
background-repeat:background-repeat: repeat-x;(h repeat)
background-attachment:background-attachment:fixed/scroll;
background-position: background-position: right top;
Note: Shorthand for all these is background property
background: #ffffff url("img_tree.png") no-repeat right top;
Background

M Vishnuvardhan
Margins are used to create space around elements, outside of
any defined borders.
margin-top, margin-right, margin-bottom, margin-left
The values can be length in px, cm of in %
p {
margin-top: 100px; margin-bottom: 100px;
margin-right: 150px; margin-left: 80px;
}
Note: margin is shorthand for setting margins
margin: 25px 50px 75px 100px;(t-25 l-50 r-75 b-100)
margin: 25px 50px 100px; (t-25 l/r-50 b-100)
margin: 25px 50px; (t/b-25 l/r-50)
margin: 25px; (t/b/ l/r-25)
Margins

M Vishnuvardhan
used to generate space around an element's content, inside of
any defined borders.
padding-top, padding-right, padding-bottom, padding-left
The values can be length in px, cm of in %
p {
padding-top: 100px; padding-bottom: 100px;
padding-right: 150px; padding-left: 80px;
}
Note: padding is shorthand for setting padding
padding: 25px 50px 75px 100px;(t-25 l-50 r-75 b-100)
padding: 25px 50px 100px; (t-25 l/r-50 b-100)
padding: 25px 50px; (t/b-25 l/r-50)
padding: 25px; (t/b/ l/r-25)
Padding

M Vishnuvardhan
float property specifies how an element should float and is
used for positioning and formatting content
e.g. let an image float left to the text in a container.
Syntax:
float: value;
Where value can be left, right, none
Eg:
img {
float: right;
}
Float

M Vishnuvardhan
border properties allow you to specify the style, width, and
color of an element's border.
border-width: specifies the width of border
border-color: specifies the color of the four borders.
border-style: specifies what kind of border to display.
(solid, dashed, dotted, double so on.)
Shorthand for border:
Syntax: border: border-width border-style border-color;
Border-style is mandatory
Eg: border: 5px solid red;
Border

M Vishnuvardhan
position property specifies the type of positioning method
used for an element. There are five different position values:
static: is not positioned in any special way; it is always
positioned according to the normal flow of the page
relative: is not positioned in any special way; it is always
positioned according to the normal flow of the page
fixed: is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled.
absolute: is positioned relative to the nearest positioned
ancestor
sticky: is positioned based on the user's scroll position.
Positioning

M Vishnuvardhan
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an
element with a lower stack order.
Note: z-index only works on positioned elements (position:
absolute, position: relative, position: fixed, or position:
sticky).
z-index: number;
Number can be positive or negative.
Positioning elements in 3D

Cascading Style Sheets

More Related Content

What's hot

Similar to Cascading Style Sheets

More from M Vishnuvardhan Reddy

Recently uploaded

Cascading Style Sheets