Scribd
Upload
8 views

Module_3

Uploaded by

raiishrit
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Module_3

Uploaded by

raiishrit
Copyright
© © All Rights Reserved
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