Scribd
Upload
5 views

Types of CSS

Uploaded by

tunalidoga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Types of CSS

Uploaded by

tunalidoga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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 /*………*/

You might also like