Scribd
Upload
2 views49 pages

Css Best Notes

Cascading Style Sheets (CSS) is a mechanism for styling web documents, first developed in 1997. It offers advantages such as time-saving, ease of changes, and consistency across web pages, with styles applied through inline, embedded, or external styles. The document covers the structure of style definitions, the use of IDs and classes, layout control, and various styling techniques for elements like links, backgrounds, fonts, lists, and tables.

Uploaded by

sharama445
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views49 pages

Css Best Notes

Cascading Style Sheets (CSS) is a mechanism for styling web documents, first developed in 1997. It offers advantages such as time-saving, ease of changes, and consistency across web pages, with styles applied through inline, embedded, or external styles. The document covers the structure of style definitions, the use of IDs and classes, layout control, and various styling techniques for elements like links, backgrounds, fonts, lists, and tables.

Uploaded by

sharama445
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

Introduction to CSS

Unit-5 Web Technology

By: Swati Sharma


What is CSS
 Cascading Style Sheets (CSS) is a simple mechanism for
adding style (e.g., fonts, colors, spacing) to Web
documents.
 CSS was first developed in 1997

By: Swati Sharma


Advantages of Style Sheets
 Saves time
 Easy to change
 Keep consistency
 Give you more control over layout
 Use styles with JavaScript => DHTML
 Make it easy to create a common format for all the
Web pages

By: Swati Sharma


Applying a single style sheet to multiple
documents

By: Swati Sharma


Basic Structure of a Style
 Each definition contains:
 A property
 A colon
 A value
 A semicolon to separate two or more values
 Can include one or more values
 h1 {font-size:12pt; color:red}

By: Swati Sharma


Style Precedence
 External style sheet
 Embedded styles
 Inline styles

By: Swati Sharma


Three Style Types
Inline styles
Add styles to each tag within the HTML file Use it when
you need to format just a single section in a web page
Example
<h1 style=“color:red; font-family: sans-sarif”>Swati</h1>

By: Swati Sharma


Three Style Types
Embedded or internal styles
A style is applied to the entire HTML file
Use it when you need to modify all instances of particular
element in a web page
Example
<style type=“text/css”>
h1 {color:red; font-family:sans-serif}
</style>

By: Swati Sharma


Creating an Embedded Style
<head>
<title>Embedded Example</title>
<style> (default is “text/css”)
Style declarations
</style>
</head>
 A style declaration:
 Selector {attribute1:value1; attribute2:value2; …}
 Selector = an element in a document (e.g., a header or
paragraph)

By: Swati Sharma


An Example of an embedded style
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-family: sans-serif; color: organge}
</style>
</head>

By: Swati Sharma


Three Style Types
External style sheets
An external style sheet is a text file containing the style
definition (declaration)
Use it when you need to control the style for an entire web
site
Example
h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif}
Save this in a new document using a .css extension

By: Swati Sharma


Creating an External Style Sheet
 Open a new blank document in Notepad
 Type style declarations
 h1 {color:red; font-family:sans-serif;}
 Do not include <style> tags
 Save the document as filename.css

By: Swati Sharma


Linking to Style Sheets 1
 Open an HTML file
 Between <head> and </head> add
 <link href=URL rel=“relation_type” type=“link_type”>
 URL is the file.css
 Relation_type=“stylesheet”
 Link_type=“text/css”
 Save this file and the .css file in the same web server
directory

By: Swati Sharma


External style sheet example
<head> h1 {font-family: sans-serif;
<title>Getting color: orange}
Started</title> b {color: blue}
<link href=“style.css”
rel=“stylesheet”
type=“text/css” />
</head>

Text file of css named “stylesheet”


html file
By: Swati Sharma
Style Sheet Strategies
 Wherever possible, place your styles in external style
sheets
 Take advantage of the power of CSS to have control over
an entire Web site

By: Swati Sharma


Style Sheet Strategies
 At the top level of your web site: define a default
global.css style sheet
 Refine styles at sublevels with a section.css style sheet
 Try to avoid using styles in tags

By: Swati Sharma


Using IDs and Classes
 Use an id to distinguish something, like a
paragraph, from the others in a document.
 For example, to identify a paragraph as
“head”, use the code:

<p id=“head”>… </p>

By: Swati Sharma


Working With Ids
 To create an ID for a specific tag, use the property:
 <tag ID=id_name>
 To apply a style to a specific ID, use:
 #id_name {style attributes and values}

By: Swati Sharma


Classes
 HTML and XHTML require each id be unique–
therefore an id value can only be used once in a
document.
 You can mark a group of elements with a common
identifier using the class attribute.

<element class=“class”> …
</element>

By: Swati Sharma


Applying a style to a class

By: Swati Sharma


Working With Classes

 To create a class, enter the following in the HTML


tag:
 <tag CLASS=class_name>
 <h1 CLASS=FirstHeader>IU</h1>
 class_name is a name to identify this class of tags
 To apply a style to a class of tags, use:
 tag.class_name {style attributes} or
 .class_name {style attributes}

By: Swati Sharma


Working With Classes and Ids
 The difference between the Class property and the ID
property is that the value of the ID property must be
unique:
 you can’t have more than one tag with the same ID value
 You can apply the same Class value to multiple document
tags

By: Swati Sharma


Working With DIV
 <DIV> tag is used for blocks of text, e.g., paragraphs,
block quotes, headers, or lists
 To create a container for block-level elements, use:
 <DIV CLASS=class_name>
 Block-level elements
 </DIV>
 Class_name is the name of the class
 You can substitute the ID proper for the Class property (with ID, the
syntax for CSS style, #id_name {style attributes and values}

By: Swati Sharma


Working With <DIV>

DIV.Slogan {font-weigh:bold}
style
Our new…:
“We
teach…
Resulting
<DIV CLASS=Slogan>Our new text
Slogan is:<BR>”We teach CSS”</DIV>
HTML code

By: Swati Sharma


Working With <span>

 With the <span> tag, you can use inline elements, e.g.,
<B>, <I>
 To create a container for inline elements, use:
 <span CLASS=class_name>
 inline elements
 </span>

By: Swati Sharma


CSS for Page Layout
 CSS manipulates the size and location of block-level
elements
 Block-level elements in HTML:
 Heading tags, e.g., <H1>, <H2>
 <p>
 <blockquote> and <address> tags
 List tags, e.g., <ul>, <ol>, <dl>
 <div>
 <body>
 <hr>
 <img>

By: Swati Sharma


CSS for Page Layout
 Parts of the block-level elements:
 Margin
 Border
 Padding

By: Swati Sharma


CSS for Page Layout

I am teaching you CSS

padding border
margin
By: Swati Sharma
Controlling the Margins
 To define the margins of an element, use:
 margin:value
 where value = a length value (“px” is often used), a
percentage (a margin proportional to the element’s width,
or auto

By: Swati Sharma


Controlling the Margins
 To set margins on a side, use:
 margin-top
 margin-right
 margin-bottom
 margin-left
 E.g., LI {margin-left:10px; margin-right:10px;
margin-top:10px; margin-bottom:10px}

By: Swati Sharma


Setting the Padding Size
 To define padding, use:
 padding: value
 where value = a length value or a percentage (a padding
proportional to the element’s width)

By: Swati Sharma


Setting the Padding Size
 To set margins on a side, use:
 padding-top
 padding-right
 padding-bottom
 padding-left

By: Swati Sharma


Formatting the Border
 Border can be set in three ways:
 border-width
 border-style
 border-color

By: Swati Sharma


Formatting the Border
 To set the border, use:
 border:width_value style color
 To set borders on a side, use:
 border-top
 border-bottom
 border-left
 border-right

By: Swati Sharma


Formatting Width & Height of Block-Level
Boxes

 To set the width of a block-level element, use:


 width:value
 height:value
 where value can be a length value, a percentage, or auto
 E.g., textarea {width:225px; height:100px}

By: Swati Sharma


Using the Float Attribute
 With CSS float, an element can be pushed to the left or
right, allowing other elements to wrap around it.
float:margin
 Where margin = right, left, none
 To prevent an element from wrapping, use:
 Clear:margin
 Where margin=right, left, both, none
 img
{
float:right;
}

By: Swati Sharma


Turning off Float - Using Clear

Elements after the floating element will flow around it. To


avoid this, use the clear property.
The clear property specifies which sides of an element other
floating elements are not allowed.
.text_line
{
clear:both;
}

By: Swati Sharma


Using the Float Attribute

float:right
float:right width:50px
width:50px clear:right

By: Swati Sharma


Formatting Hypertext Links
 To remove the style of underlining hypertext, use:
 A {text-decoration:none}
 4 types of hyperlinks can be modified:
 A:visited {styles for previously visited links}
 A:link {styles for links that have never visited}
 A:active {styles for links that are currently being clicked}
 A:hover {styles when the mouse cursor is hovering over the
link}

By: Swati Sharma


Styling Background
CSS background properties are used to define the background
effects of an element.
background-color

background-image

background-repeat

background-attachment

background-position

By: Swati Sharma


Background Examples
p {background-color:#e0ffff;}
body {background-image:url('paper.gif');}
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
body {background:#ffffff url('img_tree.png') no-repeat
right top;}(Shorthand Property)

By: Swati Sharma


Styling Fonts
Font
Font-size
Font-family
Font-style
 Normal
 Italic
Font-weight

By: Swati Sharma


Font Style Example
p{
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:40px;
font-weight:Bold;
}

By: Swati Sharma


Styling List
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
<UL>
ordered lists - the list items are marked with numbers or
letters <OL>

By: Swati Sharma


List Properties
List-style
List-style-image
List-position
List-style-type
 Circle
 Square
 Upper-roman
 Lower-roman
 Upper-alpha
 Lower-alpha

By: Swati Sharma


List Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}


ol.d {list-style-type: lower-alpha;}
ul
{
list-style-image: url('sqpurple.gif');
}

By: Swati Sharma


Styling Table
 Table Borders
table, th, td
{
border: 1px solid black;
}
 Collapse Borders
The border-collapse property sets whether the table borders are
collapsed into a single border or separated:
table
{
border-collapse:collapse;
}

By: Swati Sharma


Table Width and Height
table
{
width:100%;
}
th
{
height:50px;
}
Table Text Alignment
td
{
text-align:right;
vertical-align:bottom;
}
Table Padding
td
{
padding:15px;
By: }
Swati Sharma
Queries…?

By: Swati Sharma

You might also like