Embed Size (px)
Citation preview
Cascading Style Sheet
What is CSS?• CSS stands for Cascading Style Sheets.• CSS are a series of instruction that specify how
markup elements should appear on a web page.• Cascading: Multiple styles can overlap in order
to specify a range of style from a whole web site.
• Style: CSS deals specifically with the presentation domain of designing a web page(Color, Font, Layout, etc).
• Sheet: Normally, CSS is a file separate from the HTML file – linked to the HTML file through its <HEAD>.
• CSS was created by “Hakon Wium Lie” of MIT in 1994.
• It is a markup language used to directly effect the “look” of web pages.
• This includes overall layout, text size, style and formatting, link properties, and more.
CSS Web Template
• CSS web template is a website design creates using CSS technology.
• CSS allow enhanced browser and platform capability.
• Your website will look perfect in any browser.• The template is primarily tested on multiple
platform to ensure better requirements compliance.
Why Style Sheets?
• HTML is not designed for styling documents.If you wished to state that you want your heading in some style then you will write some code for that.
• Following are the reasons to use CSS:– You have to add same piece of code to each
heading that you want styled. This is time consuming, chance of error.
– If you want to change those heading to some other color and font , then you will have to change each heading individually.
Why CSS?
• Allows for much richer document appearances than HTML.
• Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML document.
• Use same style on multiple pages.• Reduce page download size.• HTML is use for content and CSS is used for
presentation.
Style Sheets Advantages• HTML permits the mixing of document
structure and formatting (Style).• Style sheets permit the separation of the
logical document structure and content from its style.
• It is possible to give a uniform look and feel to a website that can easily be customized.
• Define the look of your pages in one place rather than repeating yourself over and over again throughout your site.
• Easily change the look of the pages even after they’re created. Since the style are defines in one place you can change the look of the entire site at once.
• Allows you much richer document appearances than HTML.
• Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML doc.
• Use same style on multiple pages.• Reduce page download size.
• Control layout of many documents from one single style sheet.
• CSS makes it very easy to change the style of a document.
• Probably the mostly useful feature of CSS is that all of the style and layout is removed from the HTML, so the HTML page size is very much smaller.
• Separate content from Formatting.• Compatibility across browsers and platforms.
How CSS work?
• CSS overrides the browser’s default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag to apply style attributes defined either locally or in a style sheet.
• Style sheet contain rules, composed of selectors and declarations that define how styles will be applied.
• The selector(a redefined HTML element,class name, or ID name) is the link between the HTML document and the style.
• There are two different kinds of selectors:– Types (HTML element tags)– Attributes (such as class and ID names).Syntax:Selector {property 1:value1;property 2:value 2}For eg: <body bgcolor=“#FF0000”>
body {background-color:#FF0000;}
