Scribd
Upload
24 views16 pages

Presentation of Cascading Style Sheets (CSS)

The document discusses CSS and its uses for styling web pages. It defines CSS and describes the different ways to insert CSS including external, internal, and inline styles. It also covers CSS syntax, properties for background styling, and color in CSS including color names, RGB, and hexadecimal colors.

Uploaded by

Atiqur Rahman
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
24 views16 pages

Presentation of Cascading Style Sheets (CSS)

The document discusses CSS and its uses for styling web pages. It defines CSS and describes the different ways to insert CSS including external, internal, and inline styles. It also covers CSS syntax, properties for background styling, and color in CSS including color names, RGB, and hexadecimal colors.

Uploaded by

Atiqur Rahman
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/ 16

Presentation Of

Cascading Style Sheets (CSS)


Presented By
Md. Atiqur Rahman (Polash)
Chief Technical Officer(CTO)
Doel e-Services
Web : www.doeleservices.com
Email : [email protected]
Mobile:01720981682

NAPD Web Design and Development


7/30/23 1
Course
Today’s Objectives
• CSS Definition
• Style Sheet Type
• CSS Color
• CSS Syntax
• CSS Background

NAPD Web Design and Development


7/30/23 2
Course
CSS
• Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation of
a document written in a markup language.
• 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
NAPD Web Design and Development
7/30/23 3
Course
Why Use CSS?

• CSS is used to define styles for your web


pages, including the design, layout and
variations in display for different devices and
screen sizes. 

NAPD Web Design and Development


7/30/23 4
Course
Ways to Insert CSS

3 Ways
– External style sheet
– Internal style sheet
– Inline style

NAPD Web Design and Development


7/30/23 5
Course
External Style Sheet

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

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

</body>
</html>
NAPD Web Design and Development
7/30/23 6
Course
Here is how the "mystyle.css" looks:
<style>
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
</style>
NAPD Web Design and Development
7/30/23 7
Course
Internal Style Sheet

<head>
<style>
body {
    background-color: linen;
}

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

NAPD Web Design and Development


7/30/23 8
Course
Inline Styles

• <!DOCTYPE html>
• <html>
• <body>

• <h1 style="color:blue;margin-left:30px;">This is a
heading</h1>
• <p>This is a paragraph.</p>

• </body>
• </html>
NAPD Web Design and Development
7/30/23 9
Course
Multiple Style Sheets
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and
internal style</p>
</body>
</html>
7/30/23
NAPD Web Design and Development
10
Course
Color Names

NAPD Web Design and Development


7/30/23 11
Course
RGB (Red, Green, Blue)

NAPD Web Design and Development


7/30/23 12
Course
Hexadecimal Colors

NAPD Web Design and Development


7/30/23 13
Course
CSS Syntax

NAPD Web Design and Development


7/30/23 14
Course
CSS Backgrounds
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
body {
    background-color: lightblue;
}
body {
    background-image: url(" background.jpg");
}
body {
background-image: url(" background.jpg ");
background-repeat: repeat-x;
}
background-repeat: no-repeat;
background-position: right top;
NAPD Web Design and Development
7/30/23 15
Course
Any Question

NAPD Web Design and Development


7/30/23 16
Course

You might also like