Download presentation
Presentation is loading. Please wait.
1
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
2
Outline Introduction What is CSS ? Types of selectors
Different ways of CSS Advantages of CSS Conclusion References
3
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?
4
Introduction <html> <body bgcolor=“cyan”>
<h2><font color=“blue”> I am blue</h1> <h3><font color=“blue”>I am blue</h2> </body> </html>
5
Introduction
6
Introduction
7
Introduction CSS Created by Hakon Wium Lie in 1994
HTML is used to structure content. CSS is used to formatting structured content
8
Introduction
9
Introduction
10
Introduction CSS helps web developers to create a uniform look across number of pages of a website
11
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.
12
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
13
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.
14
CSS MEANS? Sheets:the “sheets” are like templates or a set of rules, for determining how the web page will look.
15
CSS MEANS? So, CSS (all together) is a styling language – a set of rules to tell the browsers how our web page should look
16
Structure of CSS The CSS rules are made up of 5 parts: selector
declaration property / value declaration block curly braces
17
Selector Definition: The HTML element we want add style to.
<p> <h1> <table> etc
18
Selector {declaration;} Declaration = {property: value;}
Definition: The statement of style for that element. Selector {declaration;} Declaration = {property: value;}
19
Property & Value Each property has a value.
: (Colon) – Seperates property & value ; (Semicolon) – seperates pairs from each other
20
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.
21
Value 2px pixels 1mm millimeters 2cm centimeters 0.2in inches
22
Declaration Block Definition: multiple declaration lines
including the curly braces
23
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 .
24
Structure of CSS
25
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
26
Selector {property: value;}
Implement examples Selector {property: value;} p {color: red; background-color: yellow;} p This is my link
27
Types of selectors p
28
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
29
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
30
Class Selector Here we can use the same class on multiple elements
Syntax: .class name { css declarations; }
31
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>
32
Class Selector
33
ID Selector An ID is like a class but can be applied only once in a document.
34
ID Selector CSS <html> <head> <style>
# foo {color: red;} </style> </head> <body> <h1 ID=“foo”> css</h1> </body> </html>
35
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
36
Different methods of CSS
37
Inline Style Applies styles directly to the elements by adding declarations into the style Styles can be assigned to the desired content
38
Inlined Example <body> <p style=“text-align: center;
color: red;”> What was I thinking? </p> </body> What was I thinking?
39
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
40
Internal Style Sheet <head> <style> { text-align: left;
font-family: verdana; } </style> </head>
41
External Style Sheet Styles can be defined for multiple documents Applies styles as a separate file with a .css extension
42
Introduction
43
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 ”
44
External Style Sheet Example : <html> <head>
<link rel="stylesheet" href=“gdc.css”> </head> <body> </body> </html> Link to a seperate CSS page
45
Advantages of Cascading style sheets (CSS)
CSS saves time Pages load faster Easy maintenance Superior style to HTML Multiple device compatibility Global web standards
46
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.
47
CSS Div and Span Example: .edit { color: red;
text-decoration: underline; }
48
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>
49
CSS Div and Span Output: This is a heading This is another paragraph
This is a next paragraph
50
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.
51
CSS Div and Span Example:
<p> This is a <span class="edit"> paragraph </span> </p>
52
CSS Div and Span Output: This is a paragraph
53
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.
54
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.
55
CSS Layers
56
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>
57
CSS Layers
58
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>
59
CSS Layers
60
Conclusion Structure of the CSS Inline, Internal, External Style
What is CSS? Structure of the CSS Inline, Internal, External Style Advantages of Styles
61
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?
62
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.
63
THANK YOU
Similar presentations
