Scribd
Upload
29 views

Cascading Style Sheets

CSS stands for Cascading Style Sheets and is used to style and lay out HTML documents. CSS allows separation of document content from design, making it easier to change design without altering content. CSS rules are made up of selectors that point to HTML elements along with declarations that specify property-value pairs to style those elements. CSS can be attached to HTML documents via internal, external, and inline stylesheets and uses properties like color, background-color, and font-size along with selectors like element, class, ID and universal to target elements for styling.

Uploaded by

shreyas
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

Cascading Style Sheets

CSS stands for Cascading Style Sheets and is used to style and lay out HTML documents. CSS allows separation of document content from design, making it easier to change design without altering content. CSS rules are made up of selectors that point to HTML elements along with declarations that specify property-value pairs to style those elements. CSS can be attached to HTML documents via internal, external, and inline stylesheets and uses properties like color, background-color, and font-size along with selectors like element, class, ID and universal to target elements for styling.

Uploaded by

shreyas
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

CASCADING STYLE SHEETS

THE PURPOSE OF CSS

If HTML is the content and meaning


➡ CSS helps to convey that meaning
Allows developers to separate the content from
layout and design
Content and design inherently different in nature
➡ Change in content does not require change in design
WHAT IS CSS?

CSS stands for Cascading Style Sheet.


Typical CSS file is a text file with an
extention.css and contains a series of
commands or rules. These rules tell the
HTML how to display.

*To create a style sheet, create a file using Notepad (PC) or Text
Edit (Mac), save it as a .css document and start writing the CSS
code (see right).
CSS BENEFITS

• Separates structure from presentation


• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn
 Inline css
 Document Level css

 External css
ATTACHING A STYLE SHEET

Attach a style sheet to a page by adding the code to the <head>


section of the HTML page. There are 3 ways to attach CSS to a
page:

1. External Style Sheet: Best used to control styling on multiple


pages.
<link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
2. Internal (DOCUMENT)Style Sheet: Best used to control styling
on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is
used directly within HTML tags.
<p style=“color: red”>Some Text</p>
STYLE SPECIFICAITON FORMAT
Inline
 Style = “ property_1:value_1;property_2:value2;”

Document
 <style type=“text/css”>

Rule_list
 </style>
CSS RULE STRUCTURE

A CSS RULE is made up of a selector


and a declaration. A declaration consists
of property and value.

selector {property: value;}

declaration
SELECTORS

A selector, here in green, is often an element of


HTML.

body { property: value; }


h1 { property: value; }
em { property: value; }
p { property: value; }
PROPERTIES AND VALUES
body {background: purple;}
h1 {color: green; }
h2 {font-size: large;}
p {color: #ff0000;} /*hexadecimal for
red*/

Properties and values tell an HTML element how to display.

body {
*CSS code can be written in a
background: purple; linear format (above) or in a block
color: green; format (below).

}
GROUPING SELECTORS
Group the same selector with different declarations
together on one line.

h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}

Example of grouping selectors (both are correct):

h1 {
color: black;
font-weight: bold;
background: white;
}
GROUPING SELECTORS
Group different selectors with the same declaration on
one line.

h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}

Example of grouping selectors (both are correct):

h1, h2, h3 {color: yellow;}


COMMENTS IN CSS

• Explain the purpose of the coding


• Help others read and understand the code
• Serve as a reminder to you for what it all means
• Starts with /*and ends with*/

p {color: #ff0000;} /*Company Branding*/


CLASS SELECTOR

 Class selector are used to allow different


occurrences of the same tag to use different style
specification.
 P.normal {property-valuelist}

 P.warning {property-value list }

 <p class=“normal”>
A paragraph text is presentedin ‘normal’ </p>
<p class=“warning”>
A paragraph text is presents a warning message.</p>
GENERIC SELECTOR

.sale { property-value list }


<h3 class=“sale”>Weekend sale </h3>
<p class=“sale”>
….
…………
</p>
ID SELECTOR
 #specific-id { property-value list }
 #sec12 {font-size:20}
 <h2 id=“sec12”> dsdkhd </h2>
UNIVERSAL SELECTOR
 Apllies to all elements.

 * {color:red;}
COLOR PROPERTIES
 Color
 Background-color
SPAN & DIV TAG

 The <span> tag is used to group inline-elements


in a document.
 The <span> tag provides no visual change by
itself.
 The <span> tag is used for a part of a text or a
part of a document.

 The <div> tag defines a division or a section in an


HTML document.
 The <div> tag is used to group block-elements to
format them with CSS.

You might also like