Tech Grovestudies
CSS / Tech Grovestuides
Ways to write CSS
in HTML
There are three
ways to CSS in html file .
·
Inline
css
·
Internal
css
·
External
css
Priority Order
Inline > Internal > External
Inline CSS
è
Before
CSS we use inline to apply style
è
Not an
efficient way to write
è
Self contained
è
Uniquely
applied to each content element
Example –
<h3 style=” color : red”> Have
a great day </h3>
<p style –“color; purple”> I
make this </p>
Internal CSS
·
With the help of style tag we apply styles
with the HTML file .
·
Redundancy is removed
·
But idea of speparation concern still lost
·
Uniquely applied on single document
·
Example –
<style>
H1 {
Color : red;
}
</style>
<h3> Have a good sweet
night </h3>
External CSS
·
With the
help of <link> tag in head we
apply styles
·
Reference
is added
·
File saved
with css extension
·
Redundancy
is removed
·
Idea of
separation is maintained
·
Uniquely
applied in each contents
Example –
<link rel=”stylesheet” type=”text/css”
href=””>
H1 {
Color : red; //.cssfile
}
CSS Selectors
·
Selectors
are used target and apply CSS
·
Three
simple selectors
o
Element
Selectors
o
Id
selectors
o
Class
selectors
·
Priority
selectors
Id> Class> Element
Id Selectors
·
Id attributes
is used to select HTML element
·
Used
to target specific or unique element
·
How we
do it ?
#unique
{
Color: red;
}
<H1 ID=” unique”> Hello world
</p>
Firstly we select
the id and then change the color property , text color to red.
And then written
text in the content tag will change the color to red.
Class Selectors
·
Class
attribute is used to select HTML element
·
Used to
target specific class of element
·
How we
do –
.group
{
Color:
red;
}
<h1
class =” group”> Heloo litty </h1>
We select the
class and then changed the color property , text color to red.
Then written text
in this tag content will have the text color as
red.
