Css

CSS (Cascading Style Sheets) Presented by Prof Venkat Krishnan

Topics to be Covered Linking a style to an HTML document In line style External style sheet Internal style sheet Multiple styles Introduction to DHTML

What is CSS The goal of Cascading Style Sheets (CSS) is to separate a Web page’s style from its structure and to make it easier to maintain Web pages that you’ve created. Style sheets give you precise control over how structural elements appear on a Web page. What’s even better is that you can create one style sheet for an entire Web site to ensure that the layout and look of your content is consistent from page to page. Cascading Style Sheets (CSS) provide you with more flexibility and allow you to control alignment, color, line height, kerning, and so forth in ways that HTML never could

However, there is a slight catch. CSS support appeared in Web browsers in the late 1990s. By now, most users have upgraded to browsers that support CSS fully. However, studies show that about 10 percent of users have not upgraded and may not upgrade soon. That means that you must decide whether that 10 percent falls into your target audience. If so, plan accordingly.

What you can do with CSS You can control just about every aspect of a page’s display — from borders to font sizes and everything in between: Background properties control the background colors associated with blocks of text and with images. You can also use these properties to attach background colors to your page or to individual elements. Border properties control borders associated with the page, lists, tables, images, and block elements (such as paragraphs). You can specify border width, color, style, and distance from the element’s content. Classification properties control how elements such as images flow on the page relative to other elements. You can use these properties to integrate images and tables with the text on your page. List properties control how lists appear on your page, such as • Managing list markers • Using images in place of bullets

CSS Structure and Syntax A style sheet is made of style rules. Each style rule has two parts: Selector: Specifies the markup element to which the style rules apply. Declaration: Specifies how the content described by the markup looks. You use a set of punctuation marks and special characters to define a style rule. The syntax for a style rule always follows this pattern: selector { declaration }

A declaration breaks down further into two items: Properties are aspects of how the computer displays text and graphics (for example, font size or background color). Values are the data that specify how you want text and images to look on your page (for example, a 24-point font size or a yellow background). You separate the property from the value in a declaration with a colon: selector { property : value }

For example, these three style rules set the colors for first-, second-, and third-level headings: h1 {color: teal} h2 {color: maroon} h3 {color: black} Style sheets override a browser’s internal display rules; your formatting specifications affect the final appearance of the page in the user’s browser. This means you can better control how your content looks and create a more consistent and appropriate experience for visitors

You probably want a style rule to affect the display of more than one property for any given selector. You can create several style rules for a single selector, each with one declaration, like this: h1 {color: teal} h1 {font-family: Arial} h1 {font-size: 36px} However, such a large collection of style rules becomes hard to manage. CSS lets you combine several declarations in a single style rule that affects the display characteristics of a single selector, like this: h1 {color: teal; font-family: Arial; font-size: 36px}

You can make the same set of declarations apply to a collection of selectors, too: You just separate the selectors with commas. The following style rule applies the declarations for text color, font family, and font size to the h1, h2,and h3 selectors: h1, h2, h3 {color: teal; font-family: Arial; font-size: 36px} If you want a style rule that applies only to paragraphs that hold copyright information, you need a way to tell the browser that the rule has a limited scope.

To target a style rule more closely, combine the class attribute with a markup element. The following examples show HTML for two kinds of paragraphs: A regular paragraph (without a class attribute) <p>This is a regular paragraph.</p> A class attribute with the value of copyright <p class=”copyright”>This is a paragraph of class copyright.</p> To create a style rule that applies only to the copyright paragraph, follow the paragraph selector in the style rule with A period (.) The value of the class attribute, such as copyright

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: Browser default External style sheet Internal style sheet (inside the <head> tag) 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 declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p{text-align: center; /* This is another comment */ color: black;font-family: arial}

How to Insert a 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 internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this: BorderMargin.html

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. 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

Inheriting styles The CSS specification recognizes that you often nest one element inside another and wants to be sure that styles associated with the parent element find their way to the child element. This mechanism is called inheritance. Multiple style sheets can affect page elements and build upon one another. It’s like inheriting styles within a Web page. This is the cascading part of CSS. Here’s a real-world example: a Web site for university’s English department. The English department is part of the School of Humanities, which is just one school in the overall university. Each of these entities — the university, the school, and the English department — has its own style sheet.

1. The university’s style sheet provides style rules for all of the pages in the overall site. 2. The school’s style sheet links to the university’s style sheet (using an @import statement), and adds more style rules specific to the look the school wants for its own site. 3. The English department’s style sheet links to the school’s style sheet. So the department’s pages both have their own style rules and inherit the style rules from both the school and the university’s style sheet.

DHTML DHTML stands for D ynamic HTML . DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML is a "marketing term" - used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support. W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

Css

More Related Content

What's hot (20)

Similar to Css (20)

More from Venkat Krishnan (7)

Css