Scribd
Upload
11 views

Module_3

Uploaded by

raiishrit
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
11 views

Module_3

Uploaded by

raiishrit
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/ 48

Unit 3

Unit 3
Cascading Style Sheets (CSS-3): CSS Overview - CSS Rules, CSS
Syntax and Style - Class Selectors, ID Selectors, span and div
Elements - Cascading, style Attribute, style Container, External
CSS Files –
CSS Properties: Color Properties, Font Properties, line-height
Property, Text Properties, Border Properties. Element Box, padding
Property, margin Property - Hosting a Website and GIT.
What is CSS?

• CSS stands for Cascading Style Sheets


• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files
CSS can be added to HTML documents in 3 ways:
•Inline - by using the style attribute inside HTML elements
•Internal - by using a <style> element in the <head> section
•External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


h1 < style=“
display: block;
margin-top: 5cm;
margin-bottom: 0.67cm;
margin-left: 0;
margin-right: 0;
font-weight: bold;
“
>
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
•p {
color: red;
text-align: center;
}

Example Explained
• p is a selector in CSS (it points to the HTML element you
want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value
Internal CSS Format
Inline CSS

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
External CSS
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Cascading Order

• What style will be used when there is more than one style
specified for an HTML element?
• All the styles in a page will "cascade" into a new "virtual"
style sheet by the following rules, where number one has
the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
• So, an inline style has the highest priority, and will
override external and internal styles and browser defaults.
CSS Comments

• Comments are used to explain the code, and may help


when you edit the sourc
• /* This is a single-line comment */
p {
color: red;
}e code at a later date.
<head>
<style>
table, th, td {
border:1px solid black;
}
body{background-image:url("a.jpg")}
</style>
</head>
<table style="width:100%">
<tr style="height:200px">
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
</table>
CSS Class Selector

<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p class="center-text">Hello World!</p>


<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
ID Selector
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>
Color Properties
• body {
color: red;
}

h1 {
color: #00ff00;
}

p.ex {
color: rgb(0,0,255);
}
• Try it Yourself »
CSS font Property

p.a {
font: 15px Arial, sans-serif;
}

p.b {
font: italic small-caps bold 12px/30px
Georgia, serif;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 15px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 15 pixels, and the font family is
Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, with small-caps (all
lowercase letters are converted to uppercase). The font size is set to 12 pixels, the line
height is set to 30 pixels, and the font family is Georgia.</p>
</body>
Font Variant
<!DOCTYPE html>
<html>
<body>
<h1>The font Property</h1>
<p style="font:caption">The font used in captioned controls.</p>
<p style="font:icon">The font used in icon labels.</p>
<p style="font:menu">The font used in dropdown menus.</p>
<p style="font:message-box">The font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The font used in the status bar.</p>
<p><b>Note:</b> The result of the font keywords is browser dependant.</p>

</body>
</html>
The font-size Property
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
font-size: 15px;
}
div.b {
font-size: large;
}
div.c {
font-size: 150%;
}
</style>
</head>
<body>
<h1>The font-size Property</h1>
<div class="a">This is some text.</div>
<div class="b">This is some text.</div>
<div class="c">This is some text.</div>
</body>
</html>
Line Height Property
<!DOCTYPE html> <body>
<html>
<head> <h1>The line-height Property</h1>
<style>
<h2>line-height: normal (default):</h2>
div.a {
<div class="a">This is a paragraph with a standard line-height.<br>
line-height: normal; The standard line height in most browsers is about 110% to 120%.</div>
}
<h2>line-height: 1.6 (recommended):</h2>
div.b { <div class="b">This is a paragraph with the recommended line-
line-height: 1.6; height.<br>
} The line height is here set to 1.6. This is a unitless value;<br>
meaning that the line height will be relative to the font size.</div>
div.c {
<h2>line-height: 80%:</h2>
line-height: 80%; <div class="c">This is a paragraph with a smaller line-height.<br>
} The line height is here set to 80%.</div>

div.d { <h2>line-height: 200%:</h2>


line-height: 200%; <div class="d">This is a paragraph with a bigger line-height.<br>
} The line height is here set to 200%.</div>
</style>
</body>
</head> </html>
Text Properties
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
</style>
</head>
<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>


<p>An <img class="a" src="sqpurple.gif" width="9"
height="9"> image with a default alignment.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a
right padding of 30px, a bottom padding of 50px, and a
left padding of 80px.</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of 70px.</div>
</body>
</html>

You might also like