Cascading Style Sheets III B. Com (Paper - VI) & III B Cascading Style Sheets III B.Com (Paper - VI) & III B.Sc (Paper - VIIC) Web Technologies By S.Vinila Kumari, Dept.of Computer Science
Outline Introduction What is CSS ? Types of selectors Different ways of CSS Advantages of CSS Conclusion References
Introduction HTML tags only provide limited formatting We can manually change the format for all the H1 headlines, but what about we have 100 pages in our website?
Introduction <html> <body bgcolor=“cyan”> <h2><font color=“blue”> I am blue</h1> <h3><font color=“blue”>I am blue</h2> </body> </html>
Introduction
Introduction
Introduction CSS Created by Hakon Wium Lie in 1994 HTML is used to structure content. CSS is used to formatting structured content
Introduction
Introduction
Introduction CSS helps web developers to create a uniform look across number of pages of a website
Introduction Former with CSS all of this formatting information was made directly in the document either in the form of attributes like height or width.
CSS MEANS? Cascading : refers to the procedure that determines which style will apply to a certain section , if we have more than one style rule
CSS MEANS? Style : how we want a certain part of our page to look. we can set things like color, margins, font etc for things like tables, paragraphs and headings.
CSS MEANS? Sheets:the “sheets” are like templates or a set of rules, for determining how the web page will look.
CSS MEANS? So, CSS (all together) is a styling language – a set of rules to tell the browsers how our web page should look
Structure of CSS The CSS rules are made up of 5 parts: selector declaration property / value declaration block curly braces
Selector Definition: The HTML element we want add style to. <p> <h1> <table> etc
Selector {declaration;} Declaration = {property: value;} Definition: The statement of style for that element. Selector {declaration;} Declaration = {property: value;}
Property & Value Each property has a value. : (Colon) – Seperates property & value ; (Semicolon) – seperates pairs from each other
Property & Value Property : What particular we need to format ex: color, font, margins etc. Value : The exact settings for that format ex : red, italic, 40px etc.
Value 2px pixels 1mm millimeters 2cm centimeters 0.2in inches
Declaration Block Definition: multiple declaration lines including the curly braces
Curly Braces Definition: the curly braces contain the properties of the element we want to manipulate, and the values that we want to change them to .
Structure of CSS
Selector {property: value;} This is the text in this paragraph. Implement examples Selector {property: value;} p {color: yellow;} This is the text in this paragraph. p
Selector {property: value;} Implement examples Selector {property: value;} p {color: red; background-color: yellow;} p This is my link
Types of selectors p
The Universal selector Rather than selecting elements of a specific type, this selector quite simply matches the name of any element type * { color: green; } p
The Grouping selector h1, h2, h3 { color: green; } We can apply a style to many selectors just separate the selectors with a comma h1, h2, h3 { color: green; } p
Class Selector Here we can use the same class on multiple elements Syntax: .class name { css declarations; }
Class Selector CSS <html> <head> <style> .intro {background-color:yellow; color:red} </style></head> <body> <h1 class=“intro”> css</h1> <p class=“intro”> css </p> </body> </html>
Class Selector
ID Selector An ID is like a class but can be applied only once in a document.
ID Selector CSS <html> <head> <style> # foo {color: red;} </style> </head> <body> <h1 ID=“foo”> css</h1> </body> </html>
Difference between Class & ID We can’t have more than one tag with the same ID value We can apply the same class value to multiple document tags
Different methods of CSS
Inline Style Applies styles directly to the elements by adding declarations into the style Styles can be assigned to the desired content
Inlined Example <body> <p style=“text-align: center; color: red;”> What was I thinking? </p> </body> What was I thinking?
Internal Style Sheet Applies styles to HTML by placing the CSS rules inside the tag <style> inside the document tag <head> Styles can be assigned to whole content of the document
Internal Style Sheet <head> <style> { text-align: left; font-family: verdana; } </style> </head>
External Style Sheet Styles can be defined for multiple documents Applies styles as a separate file with a .css extension
Introduction
External Style Sheet Creation of CSS file: h2{ font-weight: bold; Border size: 5; color: green } Save the above code with a file name “ gdc.css ”
External Style Sheet Example : <html> <head> <link rel="stylesheet" href=“gdc.css”> </head> <body> </body> </html> Link to a seperate CSS page
Advantages of Cascading style sheets (CSS) CSS saves time Pages load faster Easy maintenance Superior style to HTML Multiple device compatibility Global web standards
CSS Div and Span Div (Short for division) divides the content into individual sections. Div is a block level container , meaning that there is a line feed after the </div> tag.
CSS Div and Span Example: .edit { color: red; text-decoration: underline; }
CSS Div and Span Example: <div class="edit"> <h4> This is a paragraph </h4> <h5> This is another paragraph </h5> <p> This is a next paragraph </p> </div>
CSS Div and Span Output: This is a heading This is another paragraph This is a next paragraph
CSS Div and Span Span is similar to div. The difference is that , we can span to format a single character if needed. There is no line feed after the </span> tag.
CSS Div and Span Example: <p> This is a <span class="edit"> paragraph </span> </p>
CSS Div and Span Output: This is a paragraph
CSS Layers To create a layer all we need to do is assign the position attribute to our style. The position can be either absolute or relative.
CSS Layers The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute.
CSS Layers
CSS Layers <div style="position:relative; font-size:50px; z-index:1;">LAYER 1 </div> <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:2">LAYER 2</div>
CSS Layers
CSS Layers <div style="position:relative; font-size:50px; z-index:2;">LAYER 1 </div> <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div>
CSS Layers
Conclusion Structure of the CSS Inline, Internal, External Style What is CSS? Structure of the CSS Inline, Internal, External Style Advantages of Styles
Important Questions Define Style? Explain about the Cascading Style Sheets? Write about the different ways of defining style sheets? Describe the purpose of CSS. Also explain its features?
References 2. CSS : The Definitive Guide - Eric A.Meyer , 3rd Editon 1. Web programming Building Internet Appliactions – Chris Bates, 2nd Edition 2. CSS : The Definitive Guide - Eric A.Meyer , 3rd Editon 3. www.w3schools.com
THANK YOU