introductiontohtmlcss-part2-120711042239-phpapp02.ppt

What is CSS • Cascading Style Sheets • Contains the rules for the presentation of HTML. + = HTML CSS Web Page • CSS was introduced to keep the presentation information separate from HTML markup (content).

Before CSS • Initially Designers used presentation tags like (FONT, B, BR, TABLE etc.) and spacers GIFs to control the design of web pages.

• Any modification in the design of websites was a very difficult and boring task , as it evolves manually editing every HTML page.

Providing support for multiple browsers was a difficult task.

Sources of Styles Author (developer) Styles • Inline Styles - As inline attribute “style” inside HTML tags <div style=“font-weight: bold;”>I am bold</div> • Embedded Styles - As embedded style tag with in HTML document. <html> <head> <title>Welcome to Vendio!</title> <style> .footer { width:90%; } </style> ------- </html> • Linked Styles - Inside separate files with .css extension <link rel="stylesheet" href=“external.css" type="text/css" />

Sources of Styles(contd.) • User Style sheets This file contains the user created styles . [firefox profile folder]/ chrome/userContent-example.css is the current user’s style sheet file for the firefox. • Browser default style sheet This file contains default styles for all users of a browser [firefox folder]/res/html.css is the default style sheet file for the firefox.

CSS Selectors • ID based ( #) HTML CSS <div id=“content”> #content { Text width: 200px; </div> } ID selectors should be used with single elements.

Class based selector • Class (.) HTML CSS <div class=“big”> .big{ Text width: 200px; </div> } <div> <span class=“big”>some text </span> </div> Class based styles can be used by multiple HTML elements.

Tag based selectors • Tag (Tag name) HTML CSS <div> DIV { Text width: 200px; </div> } <div> SPAN { <span>some text </span> font-size:130%; </div> } <span>some other text </span>

Grouping • Multiple selectors can be grouped in a single style declaration by using , . H1, P , .main { font-weight:bold; }

Descendant selectors Descendant selectors are used to select elements that are descendants (not necessarily children) of another element in the document tree. HTML CSS <div class=“abc”> DIV.abc P { <div> font-weight:bold; <P> } Hello there! </p> </div> </div>

Child selectors A child selector is used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children. HTML CSS <div > DIV.abc > P { <div class=“abc”> font-weight:bold; <P> } Hello there! </p> </div> </div>

Universal selectors Universal selectors are used to select any element. * { color: blue; }

Adjacent sibling selectors Adjacent sibling selectors will select the sibling immediately following an element. DIV.abc + P { font-weight: bold; } will work for <div> <div class=“abc”>Message</div> <P>Hello there!</p> </div>

Attribute selectors Attribute selectors selects elements based upon the attributes present in the HTML Tags and their value. IMG[src="small.gif"] { border: 1px solid #000; } will work for <img src=“small.gif” />

CSS Pseudo-classes selector:pseudo-class { property: value } :link :visited } Link (A tag) related pseudo classes :hover :active :after :before :first-child :focus :first-letter :first-line :lang

CSS Values • Words: text-align:center;. • Numerical values: Numerical values are usually followed by a unit type. font-size:12px; 12 is the numerical value and px is the unit type pixels. – Absolute Values – in, pc, px, cm, mm, pt – Relative Values – em, ex, % • Color values: color:#336699 or color#369 or rgb(255, 255, 255).

Categories of CSS properties • Positioning and layout handling related. • Background related properties. • Font and text related • Links related. • Lists related. • Table related.

Cascade The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. Order of preference for various styles: – Default browser style sheet (weakest) – User style sheet – Author style sheet – Author embedded styles – Author inline styles (strongest)

CSS Specificity Rule 1. CSS File >> Embedded >> Inline Rule 2. TAG >> class >> ID

Inheritance • Styles that relate to text and appearance are inherited by the descendant elements. • Styles that relate to the appearance of boxes created by styling DIVs, paragraphs, and other elements, such as borders, padding, margins are not inherited.

Refrences • www.w3schools.com • www.w3.org • World wide web

introductiontohtmlcss-part2-120711042239-phpapp02.ppt

More Related Content

Similar to introductiontohtmlcss-part2-120711042239-phpapp02.ppt

More from SherwinSangalang3

Recently uploaded

introductiontohtmlcss-part2-120711042239-phpapp02.ppt