Scribd
Upload
4 views

Types of CSS

Uploaded by

tunalidoga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Types of CSS

Uploaded by

tunalidoga
Copyright
© © All Rights Reserved
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