css introduction
DESCRIPTION
Introduction to Cascading Style sheet, Web Technology, Unit-5, MCATRANSCRIPT
By: Swati Sharma
Introduction to CSSUnit-5 Web Technology
What is CSS
By: Swati Sharma
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
Advantages of Style Sheets
By: Swati Sharma
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
Applying a single style sheet to multiple documents
By: Swati Sharma
Basic Structure of a Style
By: Swati Sharma
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}
Style Precedence
By: Swati Sharma
External style sheet Embedded styles Inline styles
Three Style Types
By: Swati Sharma
Inline stylesAdd 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>
Three Style Types
By: Swati Sharma
Embedded or internal stylesA style is applied to the entire HTML fileUse 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>
Creating an Embedded Style
By: Swati Sharma
<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)
An Example of an embedded style
By: Swati Sharma
<head><title>Getting Started</title><style type=“text/css”>
h1 {font-family: sans-serif; color: organge}</style></head>
Three Style Types
By: Swati Sharma
External style sheetsAn 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
Exampleh1, h2, h3, h4, h5, h6 {color:red; font-
family:sans-serif}Save this in a new document using a .css
extension
Creating an External Style Sheet
By: Swati Sharma
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
Linking to Style Sheets 1
By: Swati Sharma
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
External style sheet example
By: Swati Sharma
<head><title>Getting
Started</title><link
href=“style.css” rel=“stylesheet” type=“text/css” />
</head>
h1 {font-family: sans-serif; color: orange}
b {color: blue}
html file
Text file of css named “stylesheet”
Style Sheet Strategies
By: Swati Sharma
Wherever possible, place your styles in external style sheets
Take advantage of the power of CSS to have control over an entire Web site
Style Sheet Strategies
By: Swati Sharma
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
Using IDs and Classes
By: Swati Sharma
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>
Working With Ids
By: Swati Sharma
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}
Classes
By: Swati Sharma
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>
Applying a style to a class
By: Swati Sharma
Working With Classes
By: Swati Sharma
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}
Working With Classes and Ids
By: Swati Sharma
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
Working With DIV
By: Swati Sharma
<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}
Working With <DIV>
By: Swati Sharma
DIV.Slogan {font-weigh:bold}
<DIV CLASS=Slogan>Our new Slogan is:<BR>”We teach CSS”</DIV>
style
HTML code
Our new…:“We
teach…Resultingtext
Working With <span>
By: Swati Sharma
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>
CSS for Page Layout
By: Swati Sharma
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>
CSS for Page Layout
By: Swati Sharma
Parts of the block-level elements: Margin Border Padding
CSS for Page Layout
By: Swati Sharma
I am teaching you CSS
bordermarginpadding
Controlling the Margins
By: Swati Sharma
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
Controlling the Margins
By: Swati Sharma
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}
Setting the Padding Size
By: Swati Sharma
To define padding, use: padding: value where value = a length value or a
percentage (a padding proportional to the element’s width)
Setting the Padding Size
By: Swati Sharma
To set margins on a side, use: padding-top padding-right padding-bottom padding-left
Formatting the Border
By: Swati Sharma
Border can be set in three ways: border-width border-style border-color
Formatting the Border
By: Swati Sharma
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
Formatting Width & Height of Block-Level Boxes
By: Swati Sharma
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}
Using the Float Attribute
By: Swati Sharma
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;}
Turning off Float - Using Clear
By: Swati Sharma
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;}
Using the Float Attribute
By: Swati Sharma
float:rightwidth:50px
float:right width:50px clear:right
Formatting Hypertext Links
By: Swati Sharma
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}
Styling Background
By: Swati Sharma
CSS background properties are used to define the background effects of an element.
background-color
background-image
background-repeat
background-attachment
background-position
Background Examples
By: Swati Sharma
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)
Styling Fonts
By: Swati Sharma
FontFont-sizeFont-familyFont-style
NormalItalic
Font-weight
Font Style Example
By: Swati Sharma
p{font-family:"Times New Roman", Times, serif; font-style:italic;font-size:40px;font-weight:Bold;}
Styling List
By: Swati Sharma
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>
List Properties
By: Swati Sharma
List-styleList-style-imageList-positionList-style-type
Circle Square Upper-roman Lower-roman Upper-alpha Lower-alpha
List Example
By: Swati Sharma
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');}
Styling Table
By: Swati Sharma
Table Borderstable, th, td{border: 1px solid black;}
Collapse BordersThe 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 Heighttable {width:100%;}th{height:50px;}
Table Text Alignmenttd{text-align:right;vertical-align:bottom; }
Table Paddingtd{padding:15px;}
Queries…?
By: Swati Sharma