Cascading Style Sheets (CSS)

Cascading Style Sheets
(CSS)
Introduction
What is CSS?
• CSS contains the rules for PRESENTATION
of HTML (How HTML elements are to be
displayed)
• CSS was introduced to separate the
presentation from HTML Content
• HTML+CSS=Web Page
Why CSS?
• CSS saves time and work
• Avoids manual editing of Web pages
when ever design modifications requires
• Providing support for multiple browsers
Syntax of CSS Rule set
• A CSS Rule set consists of a Selector and a
Declaration block.
• Selector { Property1: Value;
Property2:value;
…}
• Ex:- h1 { font-size:20px;
color: Red;
font-weight: bold;}
Note: Selector Name is nothing but HTML tag
name.
Types of Selectors
• Element Selector
• ID selector
• Class Selector
• Grouping Selector
Element Selector
• Element selectors selects the elements
based on element names.
• Ex: h1 { text-align: left; color: green;}
ID Selector:
• ID selector uses the ID attribute of an HTML element to select a
specific element.
• ID should be unique within the webpage
• Need to prefix a hash(#) to the id of the attribute.
• Ex:- if the HTML element is as follows
<h1 id="Header1">Hello World!!!</h1>.
Then the selector should be
#Header1{
font-size: 20px;
color: green
}
Class Selector:
• The class selector selects elements within a specific class
attribute
• Class name should be prefixed with period(.)
• Ex:- suppose the following is the HTML content
<p class=“Paragraph">This is class selector</p>
Then the selector should be
. Paragraph {
color: Green;
text-align: center;
background-color: Red;
}
Grouping of Selectors:
• Multiple selectors can be grouped into a single
style declaration
• Selector1,selector2,… { Property1: value;
property2: value;
…..}
Ex: h1,h2,p{ color: green; font-size:20px}
Universal selector
• Universal selectors are used to select any element ( styles Applied to all
elements in the web page)
• The selector name should “*”
• EX:- If the HTML content is as given below
<h1>S V E C</h1>
<p>SVEC is located in pedatadepalli near to Tadepalligudem</p>
and the selector is
* {
color: blue;
text-align: center;
background-color: yellow;
}
Types of CSS
• Inline CSS
• Internal CSS
• External CSS
Inline CSS
• Styles are placed directly inside an HTML element.
• Style are defined with the help of a style attribute
• Syntax:
<ElementName style=“Property1:value;
property2:value;…..;">----------</ElementName>
EX:-
<h1 style="color:Gray;text-align:center;background-
color:Green;">Helloo...</h1>
<html>
<body>
color:Green;">Helloo...</h1>
color:Green;">Welcome To CSS</h1>
<p style="color:red;font-family: verdana;font-size:
30px;background-color:Green;">Sri Vasavi Engineering
College......</p>
</body>
</html>
Internal CSS
• Is used when one single web page has a unique styles
• In this Internal style sheet styles are defined within a <style> tag inside the <head>
section of HTML file
• Syntax:
<head>
<style>
Selector1 { Property1: Value;
Property2:value;
…}
Selector2 { Property1: Value;
Property2:value;
…}
…..
</style>
<head>
<html>
<head>
<style>
body {
background-color:Green;
}
h1,h2 {
color: gray;
text-align: center;
}
p{
font-family: verdana;
font-size: 30px;
color: Red
}
</style>
</head>
<body>
<h1>Helloo...</h1>
<h2>Welcome TO CSS</h2>
<p>Sri Vasavi Engineering College......</p>
</body>
</html>
External CSS
• With an External style sheet you can change the look
of an entire web site by changing just a single file
• Styles are specified in an separate file and save it
with .css
• Each page must include a reference to the external
style sheet(.css) inside the using link element in
head section
• Syntax:
<link rel="stylesheet" href="style.css">
• External style sheet(Style.css)
body {
background-color:Green;
}
h1,h2 {
color: gray;
text-align: center;
}
p{
font-family: verdana;
font-size: 30px;
color: Red
}
• Web page 1
<html>
<head>
</head>
<body>
<h1>Helloo...</h1>
<h2>Welcome To CSS</h2>
<p>Sri Vasavi Engineering College.....</p>
</body>
</html>
• Web page 2
<html>
<head>
</head>
<body>
<h1>Helloo...</h1>
<h2>Welcome To CSS</h2>
<p>CSE DEPT.....</p>
</body>
</html>
CSS Properties
Resolving Conflicts in CSS
• Conflicts in CSS: As we already know that, it is
possible to have css declarations in both
external style sheet and embedded style
sheet. Two or more conflicting CSS rules are
sometimes applied to the same element.
• There are several factors which are involved in
resolving CSS conflicts
Inheritance
• Some properties are passed from parent to
child. For example, this rule in a style sheet
would be inherited by all child elements of the
body and make every font on the page display
as Georgia.
• body {font-family: Georgia;}
Cascade
• Within the cascade, more than one factor can
figure into determining which one of several
conflicting CSS rules will actually be applied.
These factors are source order, specificity and
importance. Location is part of the cascade, too.
• Source order: source order means the order in
which rules appear in the style sheet. A rule that
appears later in the source order will generally
overrule an earlier rule
• Ex:-
body {font-family: Georgia;}
h1, h2, h3 {font-family: Arial;}
Because the h1, h2, and h3 selectors are in
the source order after the body rule, the
headings would display in Arial, not in
Georgia. There’s also the fact that the selector
is picking specific elements.
• Specificity: Specificity is determined by a mathematical
formula, but common sense can help you understand it
• Ex:-
p {font-family: Georgia;}
.feature p {font-family: Arial;}
In this case, the selector .feature p is more specific than
the selector p. For any paragraph assigned to the class
‘feature’ the font-family would be Arial. Common sense
tells you that selecting a paragraph that belongs to a
particular class is a more specific choice than selecting all
paragraphs. The more specific selector overrules the less
specific selector.
• !important: There are rules that are declared !
important. !important rules always overrule other rules,
no matter what inheritance, source order or specificity
might otherwise do. A user created stylesheet can use !
important to overrule the author’s CSS.
• Ex:-
*{font-family: Arial !important;}
This rule would mean that everything (* selects
everything) would be Arial no matter what other rules
were used in the CSS.
CSS BOX MODEL
• All HTML elements can be considered as boxes. 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:
margins, borders, padding, and the actual content
• 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
• Ex:-
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
• Margins: We can control all margins of an element at once
using the margin property, or each side individually using the
equivalent longhand properties:
margin-top
margin-right
margin-bottom
margin-left
• Borders: You can set the width, style, or color of all four
borders at once using the border property. To set the
properties of each side individually, you can use:
border-top
border-right
border-bottom
border-left
• To set the width, style, or color of all sides, use the following:
border-width
border-style
border-color
• To set the width, style, or color of a single side, you can use one of the most granular
longhand properties:
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
• Padding: We can control the padding on each
side of an element individually using
the padding property, or each side individually
using the equivalent longhand properties:
padding-top
padding-right
padding-bottom
padding-left
Calculation of Total width and height
• The total width of an element should be calculated like
this:
Total element width = width + left padding + right padding
+ left border + right border + left margin + right margin
• The total height of an element should be calculated like
this:
Total element height = height + top padding + bottom
padding + top border + bottom border + top margin +
bottom margin

Cascading Style Sheets (CSS)

Uploaded by

Copyright:

Available Formats

You might also like

Cascading Style Sheets (CSS)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets (CSS)

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

You might also like