2. What is CSS
• Cascading-Style-Sheet:
• It is a language which is used to add style to
various HTML tags (elements).
• It is used to define(style) the elements of
various tags as per user style.
• CSS allows re-usability.
3. Defining <H1> Elements with CSS
<HTML>
<HEAD>
<STYLE>
H1
{
ALIGN:CENTER;
BACKGROUND-COLOR: GREEN;
COLOR: WHITE;
FONT-FAMILY:VERDANA;
TEXT-ALIGN:CENTER;
}
</STYLE>
</HEAD>
<BODY BGCOLOR="AQUA">
<H1>THIS IS CSS STYLE H1</H1>
<H1>THIS IS ANOTHER CSS H1</H1>
</BODY>
</HTML>
4. Defining <P> Elements with CSS
<html>
<head>
<title>CSS PARAGRAPH</title>
<style>
p {
color: red;
text-align: right;
font-size: 44px;
}
</style>
</head>
<body bgcolor="yellow">
<h1>PARAGRPH TAG WITH CSS</h1>
<hr color="green" size=10 length=100></hr>
<p>My Paragraph with css </p>
</body>
</html>
5.
6. CSS Syntax
• 3 Elements to a CSS Statement
– Selector
• Tells,What HTML sections does it affect (tags)
– Property
• Tells,What attribute of that HTML section will be affected
– Value
• Tells,What value will be made to that attribute or property
7. Three CSS Definition Locations
• Inline: the “style” attribute (along with tag)
Note, the selector for inline CSS is the tag which contains the style attribute.
• Internal: the <style> markup tag (inside <head>
tag
• External: the .css stylesheet file
<p style=“font-color:red;font-size:10px;”>Content</p>
<html><head><style>
p { background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>
<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
8. CSS CLASS
The .class selector is used to select all elements
which belong to a particular class attribute.
Syntax:
.class {
// CSS property
}
9. Css id vs class
Class Id
We can apply a class to various elements
so that it could be numerous times on a
single page.
The Id is unique in a page, and we can
only apply it to one specific element.
The class is assigned to an element and
its name starts with "." followed by the
name of the class.
The name of the Id starts with the "#"
symbol followed by a unique id name.
We can attach multiple class selectors to
an element.
We can attach only one ID selector to an
element.
Syntax:
.class{
// declarations of CSS
}
Syntax:
#id{
// declarations of CSS
}
10. <html>
<head>
<style>
p.rama {
font-size: 200%;
text-align: center;
color: red;
}
p.sita {
font-size: 300%;
color:green;
text-align:left;
}
</style>
</head>
<body bgcolor="pink">
<h1 align="center">class selector </h1>
<hr color="red" size=10 length=100></hr>
<p class="rama">WORK IS WORSHIP with class rama style</p>
<p class="sita">HONESTY IS BEST POLICY with class sita style</p>
</body>
</html>
