Scribd
Upload
31 views20 pages

M2 Part6

Uploaded by

Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views20 pages

M2 Part6

Uploaded by

Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

CSS - Part 1

What is CSS?
• CSS stands for Cascading Style Sheet.
• CSS is used to add styling description to the html content.
• CSS is used to separate the webpage content and presentation
design style.
• This allows the usage of one presentation design style to be used
in multiple webpage content.
• CSS files are stored with an extension .css
• CSS has a separate syntax and rules to be adapted.
• Each rule is a combination of one or more selectors.
Advantages of CSS
• It is very simple and easy to use
• Follows Global Web Standards and hence
trustable
• It is platform independent
• Saves lot of time through the usage of internal and
external styling
• Since the styling is written separately in external
css, the html page gets loaded faster.
Structure of CSS
Webpage

Style-
Structure
formatting

HTML or
CSS
XHTML
What is a Selector?
A selector is a pattern that is used to select a particular element to be
styled. The selector is made up of three parts namely;
Selector-name { property: value}

There are different types of selectors;


1. Type / Element Selector
2. ID Selector
3. Class Selector
4. Universal Selector
5. Group Selector
6. Descendant Selector
7. Child Selector
8. Attribute Selector
1. Type Selector – This matches and selects all the elements with
the given name.
element { style properties }
Eg:
CSS code:
h3 { color: blue; } // all elements with h3
h1 { color: green;} // all elements with h1
HTML code:
<body>
<h1> This is header 1 tag…</h1>
<h3> This is header 3 tag…</h3>
</body>
2. ID Selector - This selector matches the id value rather than the
element name. This is written with a # symbol preceding the id value. This
can be used to refer to only one element.
Eg:
CSS code:
#myid { color: blue;
font-size: 12px;
}
HTML Code:
<body>
<h3 id=“myid”> CSS H3 Id Selector </h3>
</body>
3. Class Selector: A Class selector searches for the class name in each
tag rather than the element name. There can be more than one element
referring the same id value. This is written with a dot (.) symbol preceding
the class name.
Eg:
CSS code:
.myid, h1.myid { color: blue;
font-size: 12px;
}
HTML Code:
<body>
<h3 class=“myid”> CSS H3 Id Selector </h3>
<h1 class=“myid”> CSS H1 Id Selector </h1>
</body>
4. Universal Selector: The universal selector selects all the elements
in the given page without any consideration of the element tags. This
selector is used when there is a need for a common style to be applied
for the entire document.
Eg:
CSS code:
*{
color: blue;
font-size: 12px;
}
HTML Code:
<body>
<h3> CSS H3 Id Selector </h3>
<h1> CSS H1 Id Selector </h1>
</body>
Here, the entire document content takes a blue color & font-size of 12 pixel
5. Group Selector: This selector is used to group all elements with same
styling properties. Comma is used as a delimiter between elements.
Eg:
CSS code:
h3, h1 { color: blue; } // both h3 and h1 tags are grouped to have
same style
HTML code:
<body>
<h1> This is header 1 tag…</h1>
<h3> This is header 3 tag…</h3>
</body>
6. Descendant Selector: This selector represents the selection element to be
a descendant of another element. Both the elements are specified with a
space as a delimiter.
Eg:
CSS code:
p h1 { color: blue; }
HTML code:
<body>
<p>
Inside paragraph code…
<h1> This is header 1 inside p tag… </h1> // style applied
</p>
<h1> This is header 1 outside p tag….</h1> // style not applied
</body>
Here, the selector style is applied for <h1> inside <p> tag & not for <h1>
outside <p> tag
7. Child Selector: The child selector is similar to that of a descendant selector tag except that
the styling is applied to an element which is just the direct descendant of the given other
element. Here, both the tags are separated by a > symbol.
Eg:
CSS code:
p > h1 { color: blue; }
HTML code:
<body>
<p>
Inside paragraph code…
<h1> This is header 1 inside p tag… </h1> // style applied
<section>
<h1> This is header 1 outside p tag….</h1> // style not applied
</section>
</p>
</body>
Here, though both the <h1> tags are inside the <p> element, the styling is applied only to the
<h1> element which is a direct / immediate descendant of <p>, and not to <h1> which is inside
<p><section><h1>.
8. Attribute Selector: This selector is used to select elements with a specified attribute
listed in it. It then changes the styling according to the specification. Different forms of
representing the attribute selectors are;

element [ attribute = “value” ] { style properties; } // specific property


element [ attribute ~= “value” ] { style properties; } // specific word
element [ attribute |= “value” ] { style properties; } // specific word start
element [ attribute ^= “value” ] { style properties; } // specific word begin
element [ attribute $= “value” ] { style properties; } // specific word end
element [ attribute *= “value” ] { style properties; } // contains specific word
Eg:
CSS Code:
p[style] { background-color: red; }
HTML Code:
<p style> Hi! Welcome….</p>
<p style=“background-color: yellow”> Hi! Welcome….</p>
<p style=“text-align: center;”> Hi! Welcome…</p>
Here, because of the attribute “style” present in the element, the styling property applies.
Attribute Selector:
Example <!DOCTYPE
<html>
html>

<head>
<style>
p[style] { background-color: red; }
font[text~=blue] { background-color: blue; }
</style>
</head>

<body>
<p style> Hi! I am in Red…</p>
<p style="text-align: center;"> Hi! I also in Red…</p>
<p style="background-color: yellow"> Hi! I am in Yellow….</p>
<font style text=blue> Hi! I am Blue….</font><br><br>
<font style text=pink> Hi! I am not in Blue….</font>
</body>
</html>
Types of CSS
- Inline Stylesheet: the styling codes are written directly in
the specific element itself

- Internal/ Embedded Stylesheet: the styling is done using


the <style> tag inside the <head> tag of html

- External Stylesheet: the styling code is written in a


separate file and stored with an extension .css
Inline CSS
- In Inline CSS the styling is applied exactly to the specified element
location.
- This type of styling is very simple and easy to understand.
- But in turn they may increase the redundancy by applying the
same styling in multiple location, thereby increasing the codes
- For example:
- <h3 style=”font-family: ‘Times New Roman’; color: blue; text-decoration:
italics;”> Welcome to CSS Inline Styling….. </h3>
Here, the html document is <h3> tag and the content is “Welcome to CSS Inline
Styling”. We are adding styling description to the html content directly using style
properties.
Structure of Internal CSS

In the internal CSS, the style description is embedded into a


<style>...</style> tag and written inside the <head> tag of
the html document for validation.

A style once written for a particular element can be used


any number of times throughout the html document.
<html>
<head> Internal CSS
<style>
h3 {
font-family: ‘Times New Roman’;
color: blue;
text-decoration: italics;”
}
p,h2 {
color: red;
}
</style>
</head>

<body>
<h2> Welcome to CSS …. </h2>
<h3> Welcome to CSS Internal Styling….. </h3>
<p> This is also called as Embedded Styling….</p>
</body>
</html>
Structure of External CSS
• An External CSS is written as a separate file and saves with an
extension .css
• This way of writing allows the usage of the same stylesheet to be
used in many html documents.
• The link between the html and css file is established through a
<link> tag in the html code, using ‘href’ attribute to specify the
path of the css file. This path can either be a relative URL or
absolute.
• This link tag is usually written inside the <head> tag for it to be
loaded before starting with the body content.
<html>
<head> External CSS
<link rel=“stylesheet” type=“text/css” href=“extstyle.css”>
</head>
<body>
<h2> Welcome to CSS …. </h2>
<h3> Welcome to CSS Internal Styling….. </h3>
<p> This is also called as Embedded Styling….</p>
</body>
</html>
extstyle.css
h3 {
font-family: ‘Times New Roman’;
color: blue;
text-decoration: italics;”
}
p,h2 {
color: red;
}

You might also like