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

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 – IU

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 – h1 {color:red; font-family:sans-serif} –

Creating an Embedded Style Embedded Example (default is “text/css”) Style declarations 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 Getting Started h1 {font-family: sans-serif; color: organge}

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 tags Save the document as filename.css

Linking to Style Sheets 1 Open an HTML file Between and add – 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 Getting Started 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 : …

Working With Ids To create an ID for a specific tag, use the property: – 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. …

Applying a style to a class

Working With Classes To create a class, enter the following in the HTML tag: – – IU –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 Syntax selector: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. 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 tag is used for blocks of text, e.g., paragraphs, block quotes, headers, or lists To create a container for block-level elements, use: – Block-level elements – –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.Slogan {font-weigh:bold} Maxwell Scientific’s new Slogan is: ”We teach science” style HTML code Maxwell…: “We teach… Resulting text

Working With With the tag, you can use inline elements, e.g.,, To create a container for inline elements, use: – inline elements –

CSS for Page Layout CSS manipulates the size and location of block- level elements Block-level elements in HTML: –Heading tags, e.g.,, – – and tags –List tags, e.g.,,, –

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. border margin padding

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 BIG

Beyond the Normal Flow Three alternatives 1. relative positioning  position is altered relative to its normal flow position 2. float positioning  inline element moves to one side or the other of its line box 3. 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:right width:50px float:right width:50px clear:right