www.tutorialandexample.com Objective
Introduction to CSS What is CSS? CSS Syntax Types of CSS External Style Sheet Internal Style Sheet
Inline Style
Cascade order Advantages of CSS
Conclusion
“What is CSS?” Structure of CSS How to use CSS in your web page
www.tutorialandexample.com
• CSS(Cascading Style Sheet) was developed by Hakon Wium Lie in 1996.
• To improve web presentation capabilities CSS was introduced by W3C (World Wide Web Consortium). It was intended to allow web designers to define the look and feel of their web pages, and to separate content from document’s layout.
www.tutorialandexample.com
• CSS stands for “Cascading Style Sheets.”
• Cascading: refers to the procedure that determine which style will apply to a certain section, if you have more than one style rule. • Style: how you want a certain part of your page to look. You can set things like color, margins, font etc for things like tables, paragraphs and headings. • Sheets: the “sheets” are like templates, or a set of rules, for determine how the web page will look. So, CSS(all together) is a styling language-is set of rules to tell browsers how your web page should look.
www.tutorialandexample.com
• The selector points to the HTML element you want to style. • The declaration block contain one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by colon. • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
www.tutorialandexample.com
There are three types of cascading style sheets: 1. External style sheet 2. Internal style sheet 3. Inline style
www.tutorialandexample.com
• Ideal when applied to many pages. • Syntax: <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”/> </head>
• An external style sheet can be written in any text editor. • Your style sheet should be saved with a .css extension. • Eg. hr{ color : blue; } p{ margin-left : 20px; } body{ background-image : url(“images/back40.gif”); }
www.tutorialandexample.com
• It should be used when a single document has a unique style. • You can define internal styles in the head section of an HTML page, by using the <style> tag, like this• E.g. <head> <style type=“text/css”> hr{ color : blue; } p{ margin-left : 20px; } body{ background-image : url(“images/back40.gif”); } </style> </head>
www.tutorialandexample.com
• An Inline style loses many of the advantages of style sheet.
• To use inline styles, add the style attribute to the relevant tag.
• The style attribute can contain any css property.
• E.g.
<h1 style=“color : blue; margin-left:20px;”>This is a heading</h1>
www.tutorialandexample.com
• What style will be used when there is more than one style specified for an HTML element?
• All the style will “Cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority: Inline style(inside an HTML element) External and Internal style sheets(in the head section)
www.tutorialandexample.com
• Allows separating content of an HTML document from the style and layout of that document.
• Make documents much easier to maintain and give much better control over the layout of your web pages.
• CSS saves lots of time • Easy maintenance •Pages load faster • Superior styles to HTML •Multiple device compatibility
www.tutorialandexample.com
In this presentation weâ&#x20AC;&#x2122;ve learned that how to create style sheets to control the style and layout of multiple web sites at once. www.tutorialandexample.com
www.Tutorialandexample.com