Introduction To CSS
CSS[Cascading style sheets]:-
CSS is the skin of HTML skeleton.HTML was unable to do SCREEN ARRANGEMENT and CODE SHARING (we cannot use a piece of code from one HTML doc to another )
But with the help of CSS we can do the both. SCREEN can be managed with the help of div tag and the code can be shared.
TYPES OF CSS:-
1. Inline CSS
2. Internal CSS
3. External CSS
INLINE CSS- Inline CSS in which CSS is used within the HTML tag in the style attribute. here the file extension will be .html .
e.g- <font style="color:blue;"></font>
[here, first thing to note down is we never use"=" equals to sign for the properties to be defined in CSS instead we use ":" colon ]
INTERNAL CSS- We have already learn't earlier that everything defined inside <head> tag is defined for SPECIAL USE like CSS,JAVASCRIPT and etc. In Internal CSS <style> tag is defined <head> tag and all the CSS will be implemented inside <style> tag. here also the file extension will be .html
e.g- <html>
<head>
<style type="text/css">
p{
color:green;
text-align:center;
}
body
{
background-color:yellow;
}
</style>
</head>
<body>
<p>this is internal CSS</p>
</body>
</html>
EXTERNAL CSS- External CSS in which CSS is implemented in a file with extension .css and that .css will be linked the desired .html file in which you have to apply css by giving the link in .html file.
.html file
<html>
<head>
<link href="my.css" rel="stylesheets" type="text/css">
</head>
<body>
<p>
THIS IS PARA
</p>
</body>
</html>
.css file(this includes no tags)
p{
color:green;
}
body
{
background-color:yellow;
}
Using id and class-
class is used for multiple css in similar tag. the example is below-
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<font class="one">
this is font1
</font>
<font class="two">
this is font2
</font>
<font class="three">
this is font3
</font>
</body>
</html>
my.css file(this includes no tags)
.one{
color: green;
}
.two
{
color: yellow;
}
.three
{
color: red;
}
The id selector styles the element with the specified id.
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css" >
</head>
<body>
<p id="para">this is paragraph</p>
<font id="ft">this is font</font>
</body>
</html>
my.css file
#para
{ color: red;
}
#ft
{ font-family: verdana;
}
CSS Selectors:-
1. Simple selectors(name,id and class)
2.combinators-
it is used to explain the relationship between two selectors.
a. descendant(" ")
b. child(">")
c. adjacent sibling("+")
d. general siblings("~")
a. descendant-
e.g <div>this is div
<p>this is p1
<p>this is p inside p</p>
</p>
<p>this is p2</p>
</div>
if we use div p then all p tags inside div will get selected
b. child selector-
e.g <div>this is div
<p>this is p1
<p>this is p inside p</p>
</p>
<p>this is p2</p>
</div>
if we use div>p then only p(child) tag inside div will get selected,
not the p inside p.
c. adjacent selector-
e.g <div>this is div
<p>this is p1
<p>this is p inside p</p>
</p>
<p>this is p2</p>
</div>
<p>this is a p outside div
(adjacent sibling)
</p>
if we use div+p then the adjacent p
tag of div will get selected,
not other than adjacent neighbour.
d. general sibling selector-
e.g <div>this is div
<p>this is p1
<p>this is p inside p</p>
</p>
<p>this is p2</p>
</div>
<p>this is a p outside div
(adjacent sibling)
</p>
<p>this is a general sibling p
</p>
if we use div~p then all p tags
(neighbours of div) will get selected.
EXAMPLE-
<head>
<style>
p#b {
display: none;
background-color: yellow;
padding: 20px;
border-style:inset;
border-radius:8px;
border-color:red;
}
div{
border:1px solid red;}
div:hover~p#b {
display: block;
}
</style>
</head>
<body>
<div>Hover over me to show the p element
</div>
<p id="t">p with id t! Here I am!</p>
<p id="b">p with id b! Here I am!</p>
</body>
</html>
PSEUDO CLASSES-
it defines a special state of the element
For example, it can be used to:
a.Style an element when a user mouses over it
b.Style visited and unvisited links differently
c.Style an element when it gets focus
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/*link is clicked*/
a:active{
color:FFFF00;
}
Comments
Post a Comment