Cascading Style
Sheets
(CSS)
Types of CSS
CSS is a simple way to add style such as fonts, colours or
spacing to webpages.
CSS code can be either internal (specified within the <head> section of
a webpage :They are coded between <style> </style> tags ) or external
( on a sperate document that can be shared by multiple webpages)
Css can also be applied in third way called inline , where it is
used to apply a unique style for single element.
Internal CSS
Internal CSS is placed in the webpage in a discrete section of the
header.
A style for a particular element ,
such as paragraph can be given
an id. This is done by placing a #
before the style name .
Using <p id=“para1”>This is
some text with para1
ids Examples:
style<p>
#para1 {
Font-family: Arial; <p id =“para2”>This is
Font-size:17px; some text with para2 style
Color:red; <p>
}
#para2 {
Text-align:center;
Color:black;
Font family: Times;
Font –size=12px
}
Using classes
A class is like an id , is a set of style attributes but they
can be applied to any element. A style defined by an id
can be applied to only one element type. However class
can be added many elements within an .html document
Class is defined by placing a dot (.)before the style name
when you are defining it .
<h1 class=“myOther”>This is a main
.myclass1{ header with MyOther style </h1>
Color:red;
Font-size:50px; <p class=“myClass1”>this is some text
Text-align:center; with myclass1 class</p>
}
.myOther{ <p class=“myOther”>This is some text
Colour:blue; with myOther class </p>
}
<h1 class=“myClass1”>This is main
header with myClass1 style </h1>
<h1> A header with no class applied
</h1>
Difference A style can only be used once
whereas a class can be
re-used.
between
style and Class is used to style a group
of elements and is used on
class several elements with the
same class name .
/* This is the
Attaching comment */
comments
to CSS Comment is written
between /*………*/
