1 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
What is CSS?
CSS stands for Cascading Style Sheets.
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
Benefits of CSS
CSS saves time :
o You can write CSS once and then reuse the same sheet in multiple HTML
pages.
Easy maintenance:
o To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
Global web standards:
o It's a good idea to start using CSS in all the HTML pages to make them
compatible with future browsers.
Platform Independence:
o The Script offer consistent platform independence and can support latest
browsers as well.
CSS Comments
Comments are used to explain the code, and may help when you edit the source
code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with
*/
Syntax:
/* This is CSS Comment Text */
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
2 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Types Of CSS / Stylesheet
CSS can be added to HTML documents in 3 ways:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
4. Multiple CSS
The most common way to add CSS, is to keep the styles in external CSS files.
1. Inline CSS :
o An inline CSS is used to apply a unique style to a single HTML element.
o An inline CSS uses the style attribute of an HTML element.
o Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
2. Internal CSS :
o An internal CSS is used to define a style for a single HTML page.
o An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
o Example :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
3 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
3. External CSS :
o An external style sheet is used to define the style for many HTML pages.
o To use an external style sheet, add a link to it in the <head> section of each
HTML page:
o Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
style.css
body
{
background-color: powderblue;
}
h1
{
color: blue;
}
p
{
color: red;
}
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
4 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
CSS Slectors
There are two types of selector:
1. Tag Name
2. Class
3. ID
1. Tag Name :
Syntax :
tag_name {
css declarations;
}
Example :
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>This paragraph refers to two classes.</p>
</body>
</html>
2. Class :
The .class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed
by the name of the class.
HTML elements can also refer to more than one class (look at Example 2
below).
Syntax :
.class {
css declarations;
}
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
5 CREATIVE DESIGN & MULTIMEDIA INSTITUTE
Example :
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 30px;
}
</style>
</head>
<body>
<p class="center large">This paragraph refers to two classes.</p>
</body>
</html>
3. ID :
The #id selector styles the element with the specified id.
Syntax :
#id {
css declarations;
}
Example :
<html>
<head>
<style>
#firstname {
font-size: 25px;
color: blue;
}
</style>
</head>
<body>
<p id="firstname">This paragraph refers to two classes.</p>
</body>
</html>
CREATIVE DESIGN & MULTIMEDIA INSTITUTE
