css introduction cascading style sheets provides a great deal of control over the presentation of...
TRANSCRIPT
CSS Introduction
• Cascading Style Sheets
• Provides a great deal of control over the presentation of the document
• HTML indicates both semantics of a document and its presentation
- semantics content
- presentation style how it appear on the web page
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
Media attribute in link tag
• <link rel="stylesheet" type="text/css" href="style1.css" media = “screen, tv,projection” title = Style 1" />
• <link rel="stylesheet" type="text/css" href="style1.css" media= “handheld, print” title = Style 1" />
Applying a single style sheet to multiple documents
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}• h1 is the selector
Style Precedence
1. External style sheet
2. Embedded styles
3. Inline styles
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”>IU</h1>
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 (e.g., h1) in a web page
• Example– <style>
• h1 {color:red; font-family:sans-serif}
– </style>
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)
An Example of an embedded style
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-family: sans-serif; color: organge}
</style>
</head>
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
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
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
An example of an external style sheet with an original html file
<head>
<title>Getting Started</title>
<link href=“scraps.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
• Wherever possible, place your styles in external style sheets
• Take advantage of the power of CSS to have control over an entire Web site
Selector Strings
• Type selector - simply the name of the element type- separated by commas- eg. h1,h2,h3 {color:red; font-family:sans-serif;}
• Universal selector- denoted by asterisk *- * { font-weight:bold } for every element in the document
• ID selector
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>
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}
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>
Applying a style to a class
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}
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
Pseudo Classes
• Pseudo classes are used to add special effects to some selectors
• Syntaxselector:pseudo-class {property:value;}
• Example• a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */
• Eg Pseudoclass.html
At-rules
• This rule is used to input one style sheet into another one.
• Eg
• @import url{ “gen-rules.css”}
h1, h2 {background-color:aqua}
Rule cascading
• Rule cascading a multistage sorting process that selects a single declaration that will supply the property value.
• Steps:
1.Which external or embedded style sheets apply to the document ( external includes alternate as well as media type)
2.Origin and weight with every declaration of property of element
Rule cascading
• Origin who wrote the declaration
* Author :person who wrote the HTML doc (or)
* User Agent: A browser / other user agent who define style property values
* User: User can indicate style preferences
• Weight normal or !important
Rule Cascading
• Priority
1.Important with user origin
2.Important with author origin
3.Normal with author
4.Normal with user
5.Any declaration with user agent
Rule cascading
• Specificity Priority
1.ID selectors
2.Class and pseudo-class selectors
3.Type selectors
4.Universal selectors
Eg rule cascdng.html
Style Inheritance
• Inheritance properties are passed from parent to child elements
• properties have not been explicitly defined by other means. Certain properties are inherited automatically,
• a child element will take on the characteristics of its parent with regards to these properties.
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}
Working With <DIV>
DIV.Slogan {font-weigh:bold}
<DIV CLASS=Slogan>Maxwell Scientific’s new Slogan is:<BR>”We teach science”</DIV>
style
HTML code
Maxwell…:“We
teach…Resultingtext
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>
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>– <img>
CSS Box Model
• Parts of the block-level elements:– Margin– Border– Padding
CSS Box Layout
I appreciate the prompt delivery of the pack of star disks.
bordermarginpadding
Controlling the Margins
• To define the margins of an element, use:– margin:value– where value = a length value (“em” is often
used), a percentage (a margin proportional to the element’s width, or auto
Controlling the Margins
• To set margins on a side, use:– margin-top– margin-right– margin-bottom– margin-left
• E.g., LI {margin-top: 15px; margin-right: 45px; margin-left: 45px ; margin-bottom: 30px;} (or)Margin: 15px 45px 30px
Number of values
• one assign to all ( top, right, bottom & left)
• Two first value assign to top & bottom, second value to right & left
• Three first to top , second to right & left, third to bottom.
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)
Setting the Padding Size
• To set margins on a side, use:– padding-top– padding-right– padding-bottom– padding-left
Formatting the Border
• Border can be set in three ways:– border-width– border-style– border-color
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
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}
Simple Inline Boxes
• Eg
• <span style= “font-size : 36pt”> BIG </span>
Beyond the Normal Flow
• Three alternatives1. relative positioning position is altered relative to its normal flow position2. float positioning inline element moves to one side or the other of its line box3. absolute positioning element is moved entirely from the normal and placed somewhere else.
Properties for positioning
• position: static indicates the normal flow• position : relative / absolute / fixed• Fixed positioned elements can overlap
other elements.• float ( static or relative pos): none/right /
left • an element can be pushed to the left or
right, allowing other elements to wrap around it.
Using the Float Attribute
float:rightwidth:50px
float:right width:50px clear:right