Unit-III Cascading Style Sheets What is CSS • Cascading Style Sheets • Contains the rules for the presentation of HTML. • CSS describes how HTML elements are to be displayed + HTML = + = CSS = Web Page Before CSS • Any modification in the design of websites was a very difficult and boring task , as it evolves manually editing every HTML page. Overview • CSS handles the look and feel part of a web page. • Using CSS, you can control the • • • • • • color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. Why Use CSS? / Advantages of CSS • CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. • Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. Introduction to Cascading Style Sheet (CSS) • What is CSS? oCSS stands for Cascading Style Sheets. oStyles define how to display HTML elements. oStyles were added to HTML 4.0 to solve a problem. oExternal Style Sheets can save a lot of work. oExternal Style Sheets are stored in CSS files. • Styles Solved a Big Problem HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> • When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. • To solve this problem, the World Wide Web Consortium (W3C) created CSS. • In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. • All browsers support CSS today. CSS Saves a Lot of Work! • CSS defines HOW HTML elements are to be displayed. • Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! CSS essentials • CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. CSS Example A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p { color:red; text-align:center; } CSS essentials • CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ Insert CSS • There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color: sienna;} p {margin-left:10px;} body {background-image: url("images/back40.gif");} Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px; Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style> hr {color:red;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> Inline Style Sheet Inline Styles • An inline style loses many of the advantages of style sheets by mixing content with presentation. • To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="margin-left:40px; color:red;">This is a paragraph.</p> Multiple Styles If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color:red; text-align:left; font-size:8pt; } And an internal style sheet has these properties for the h3 selector: h3 { text-align:right; font-size:20pt; } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red; text-align:right; font-size:20pt; The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet. Multiple Styles Will Cascade into One Styles can be specified: • inside an HTML element • inside the head section of an HTML page • in an external CSS file Even multiple external style sheets can be referenced inside a single HTML document. Cascading order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. External style sheet 3. Internal style sheet (in the head section) 4. Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! Selectors CSS Selectors • Different types of selectors that CSS support are, • Type Selector(HTML Element ) • Class Selector(.) • ID Selector(#) • Grouping Selectors(separate by , ) • Pseudo classes(:) TYPE SELECTOR (HTML ELEMENT) • Type Selectors are very simple. • They correspond with any HTML element type. • Example <HEAD> <style type="text/css"> b {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b>This is a customized headline style bold</b> </BODY> Class Selectors • Allows you to define same style for the different elements • A class selector is a name preceded by a period (.) • The general syntax for a Class selector is: .ClassSelector {Property:Value;} example: • <HEAD> <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b class="headline">This is a bold tag carrying the headline class</b> <br> <i class="headline">This is an italics tag carrying the headline class</i> </BODY> Combining class and type selectors For two types of paragraphs in your document: one right-aligned paragraph, and one centre-aligned paragraph: p.right {text-align: right} p.center {text-align: center} You have to use the class attribute in your HTML document: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Combining multiple classes • Perhaps the most powerful aspect of class selectors is that multiple classes can be applied to one HTML element. For examples, • <p class="big indent"> sdsdsds </p> .big { font-weight: bold; } .indent { padding-left: 2em; } Example HTML code <div class="red border box"></div> <div class="blue border box"></div> <div class="green border box"></div> <div class="red box"></div> <div class="blue box"></div> <div class="green box"></div> <div class="border box"></div> CSS Code .box { width: 100px; float: left; margin: 0 10px 10px 0; } .red { color: red; background: pink; } .blue { color: blue; background: light-blue; } .green { color: green; background: light-green; } .border { border: 5px solid black; } ID selectors • ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree. • An ID selector is a name preceded by a hash character (#). CSS #firstname { background-color:yellow; } HTML <p id="firstname">My name is Donald.</p> <p id="hometown">I live in Duckburg.</p> Should you use ID or class? • Repeated use within a document • Classes can be used as many times as needed within a document. • IDs can only be applied once within a document. • Combining class selectors • You can use multiple classes to style an HTML element but • you can only use one ID when styling an HTML element. • For example, • <p class="right color"> This paragraph will be right-aligned. </p> .right {text-align: right} .color {color:green} • IDs have higher specificity than classes • If a class selector and ID selector were to be in conflict, the ID selector would be chosen. • <h3 class="color" id="color1"> This paragraph will be center-aligned. </h3> .color {color:green} #color1 {color:red} Grouping Selectors • If multiple selector have same style then you can combine those selector in one and each selector separate by comma (,). • If you have elements with the same style definitions, like this: h1 { text-align: center; color: red; } h2 { text-align: center; color: red;} p { text-align: center; color: red;} • you can group the selectors, to minimize the code. • To group selectors, separate each selector with a comma. • In the example below we have grouped the selectors from the code above: Example h1, h2, p { text-align: center; color: red; } Pseudo-Classes • Pseudo Classes allow the designer the freedom to control how the element should appear under different conditions. • It represent dynamic events to customize those styles. • A pseudo-class is used to change in state of an element. • For example, it can be used to: • Style an element when a user mouse over it • Style visited and unvisited links differently • A pseudo-class starts with a colon (:). • No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon. • Syntax selector:pseudo-class { property:value; } Pseudo Classes • They include: • • • • :link :- specifies unvisited hyperlinks :visited :- specifies visited hyperlinks :hover :- Applies properties on mouse over. :focus :- Applies properties on focus (usually a form input field / if user has used their keyboard to navigate to a link). • :active:- specifies user currently clicking • :first-child ,:last:-child:,:nth-child,nth-child(number),nth-last-child(number) • For examples, a:link, a:visited { color: blue; } a:hover, a:active { color: red; } You can add class names and customize various links a.linkColor:link { color: #FF0066; } Pseudo Classes • They include: • • • • :link :- specifies unvisited hyperlinks :visited :- specifies visited hyperlinks :hover :- Applies properties on mouse over. :focus :- Applies properties on focus (usually a form input field / if user has used their keyboard to navigate to a link). • :active:- specifies user currently clicking • :first-child ,:last:-child:,:nth-child,nth-child(number),nth-last-child(number) • For examples, a:link, a:visited { color: blue; } a:hover, a:active { color: red; } You can add class names and customize various links a.linkColor:link { color: #FF0066; } <head> <style> a:hover { color:#FF00FF; } a.new:hover { color:red} input.inp1:focus { background-color:yellow;} </style> </head> <body> <p><b><a href=“#" >This is a link</a></b></p> <p><b><a href="#" class=“new”>This is a link</a></b></p> <form> User Name : <input type="text" class="inp1"> </form> </body> :first-child, :last-child • The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element. • The :last-child pseudo-class matches a specified element that is the last child of another element and adds special style to that element that is the last child of some other element. • :nth-child(x) selects every element that is the child number x of its parent • :nth-last-child(x) selects every element that is the child number x of its parent, counting from the last child. <style> p:first-child { background-color: #ff00ff; } p:last-child { background-color: #00ff00; } p:nth-child(odd) { background: red; } p:nth-child(even) { background: blue; } </style> </head> <body> <h3> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </h3> <h3> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </h3> </body> ::before Selector • inserts something before the content of each selected element(s). • Use the content property to specify the content to insert. • p::before { content: "Read this: "; } • Insert "Read this: " text before the content of each <p> element Note: IE8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:before). Newer versions support the standard, doublecolon CSS3 syntax (::before). Note: For :before to work in IE8, a <!DOCTYPE> must be declared. p::before { content: "Read this -"; background-color: yellow; color: red; font-weight: bold; } ::after Selector • inserts something after the content of each selected element(s). • Use the content property to specify the content to insert. • p::after { content: “ – Remember this: "; } • Insert “- Remember this: " text after the content of each <p> element Note: IE8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:after). Newer versions support the standard, double-colon CSS3 syntax (::after). Note: For :after to work in IE8, a <!DOCTYPE> must be declared. p::after { content: " - Remember this"; background-color: yellow; color: red; font-weight: bold; } CSS Links Styling Links • Links can be styled with any CSS property (e.g. color, font-family, background, etc.). • In addition, links can be styled differently depending on what state they are in. • The four links states are: • • • • a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked 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 */ • When setting the style for several link states, there are some order rules: • a:hover MUST come after a:link and a:visited • a:active MUST come after a:hover Common Link Styles • In the example above the link changes color depending on what state it is in. • Lets go through some of the other common ways to style links: • Text Decoration • The text-decoration property is mostly used to remove underlines from links: • Example a:link {text-decoration:none;} a:hover {text-decoration:underline;} • Background Color • The background-color property specifies the background color for links: • Example a:link {background-color:#B2FF99;} a:hover {background-color:#FF704D;}