Scribd
Upload
125 views

5 Basics of CSS - PPSX

The document discusses various topics related to CSS including: 1. Introduction to CSS including what CSS is and its syntax 2. Types of style sheets such as external, internal, and inline 3. CSS selectors including id, class, element, and grouping selectors to select and style elements It also discusses CSS properties like margin, padding, dimensions, display, visibility and positioning.

Uploaded by

Latest Entertainment
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
125 views

5 Basics of CSS - PPSX

The document discusses various topics related to CSS including: 1. Introduction to CSS including what CSS is and its syntax 2. Types of style sheets such as external, internal, and inline 3. CSS selectors including id, class, element, and grouping selectors to select and style elements It also discusses CSS properties like margin, padding, dimensions, display, visibility and positioning.

Uploaded by

Latest Entertainment
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 60

Topics to be Discuss

1. Introduction to CSS
2. Types of Style Sheets
3. Selector
4. Margin and Padding
5. DIV + CSS Layout
Design
1. Introduction to CSS

What is CSS???
CSS Syntax
What is CSS???

 CSS stands for Cascading Style Sheets.
 Styles define how to display HTML elements.
 Styles were added to HTML 4.0 to solve a
problem.
 External Style Sheets can save a lot of work.
 External Style Sheets are stored in CSS files.
 you should have a basic understanding of the
HTML.
CSS Syntax
CSS Comments
A CSS comment starts with /* and ends with */. 

<!DOCTYPE html>
<html>
<head>
<style>
/*This is a multiple
lines comment*/
p
{
color:red;
/*This is another comment*/
text-align:center;
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the
output.</p>
</body>
</html
2. Types of Style Sheets

There are three ways of inserting a style


sheet:
a) External Style Sheet using <link>
b) Internal Style Sheet using
<style>
c) Inline Style Sheet using style
inside element
e.g:<h1 style="color:blue;margin-
left:30px;">This is a heading.</h1>
a) External Style Sheet

 An external style sheet can be written in any text


editor.
 The file should not contain any html tags.
 The style sheet file must be saved with a .css
extension.
 Each page must link to the style sheet with the
<link> tag.
 The <link> tag goes inside the head section.
 Do not add a space between the property value and
the unit (such as margin-left:20 px). The correct way
is: margin-left:20px.
HTML Page :
CSS Page :
Result :
b) Internal Style Sheet

 An internal style sheet should be used when a


single document has a unique style.
 We define internal styles in the head section of an
HTML page, inside the <style> tag.
Program :

<style>
.center
{
text-align:center;
color:red;
}
</style>

<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
Result :
c)Inline Style Sheet

<!DOCTYPE html>
<html>
<head>inline styles
</head>
<body>
<p style="color:sienna;margin-left:20px;Background-
color:blue; font-size:25px;">This is a paragraph.</p>
</body>
</html>
Result :
3. Selector

Id Selector
Class Selector
Grouping Selector
Element selector
Id Selector

#para1
{
text-align:center;
color:red;
}
</style>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
Result :
Class Selector

<style>
.center
{
text-align:center;
color:red;
}
</style>

<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
Result :
<style>
.center
{
text-align:center;
color:red;
}
</style>
<body>
<h1 >This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
Result :
Grouping selector

<style>
h1,h2,p
{
text-align:center;
color:red;
}
.rn
{
color:blue;
}
.jk
{
color:green;
}
</style>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
<h1 class="rn">NIT ROURKELA</h1>
<p class="jk">SPARK CLUB</p>

</body>
Result :
Element Selector

 The element selector selects elements based on


the element name.

 You can select all <p> elements on a page like


this:
p {
    text-align: center;
    color: red;
}
 Similarly any element can be directly selected.
4. Margin and Padding

 MARGIN :The margin clears an area around an


element (outside the border). The margin does
not have a background color, and is completely
transparent.

 PADDING :The padding clears an area around the


content (inside the border) of an element. The
padding is affected by the background color of the
element.
Margin:

 margin :20px;
margin-top : 100px;
margin-bottom:30px;
margin-left :25px;
margin-right :10px;

 margin: 25px 50px 75px 100px;


• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
 margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

 margin: 25px 50px;


• top and bottom margins are 25px
• right and left margins are 50px

 margin: 25px;
• all four margins are 25px
5. DIV + CSS Layout Design
Program part 1 :
CSS
Program part 1 :
HTML
Result :
Program part 2 :
CSS & HTML
Result :
Program part 3 :
CSS & HTML
Result :
Program part 4 :
HTML
Program part 4 :
CSS
Result :
Program part 5 :
HTML
Program part 5 :
CSS
Result :
Program part 6 :
HTML
Program part 5 :
CSS
Result :
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
HTML
Program part 6 :
CSS
Result :
Program part 7 :
HTML
Result :
6.CSS Dimension
Properties

 The CSS dimension properties allow you to control the


height and width of an element.

 height : Sets the height of the element.


max-height: Sets the maximum height.
min-height: Sets the minimum height.
width: Sets the width of the
element.
max-width: Sets the maximum width.
min-width: Sets the minimum width.
7.CSS Display and
Visibility

 The display property specifies if/how an


element is displayed, and the visibility
property specifies if an element should be
visible or hidden.
 HIDING AN ELEMENT:

visibility:hidden – It hides the element but it


takes up the space as occupied by the
element if it is shown.

display:none – It hides the element and it


does not takeup the space of that element.
 BLOCK AND INLINE :

display:inline : It takes the necessary width and do


not force linebreaks.

display:bock : It takes the full width necessary and


has a line break before and after.

Block element : <h1>, <p>, <li>, <div>


Inline element : <span>, <a>
8.CSS Position

 The CSS positioning properties allow you to position an


element. It can also place an element behind another,
and specify what should happen when an element's
content is too big.

 There are four different positioning methods:


1. Static(default) : position according to normal webpage flow.
2. Fixed : position is fixed relative to browser
window.
3. Relative :
4. Absolute

You might also like