Introduction To CSS
📘 CSS (Cascading Style Sheets)
🔹 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 both. SCREEN can be managed with the help of div tag and the code can be shared.
🔹 Types of CSS
Inline CSS
Internal CSS
External CSS
🔹 Inline CSS
Inline CSS in which CSS is used within the HTML tag in the style attribute.
File extension → .html
Example:
<font style="color:blue;"></font>
Note:- We never use "=" for properties in CSS, instead we use ":"
🔹 Internal CSS
Defined inside <head> tag using <style> tag.
File extension → .html
Example:
<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
CSS is written in a separate .css file and linked to 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
p{
color:green;
}
body {
background-color:yellow;
}
🔹 Using Class
Class is used for multiple CSS in similar tag.
HTML
<font class="one">this is font1</font>
<font class="two">this is font2</font>
<font class="three">this is font3</font>
CSS
.one{
color: green;
}
.two {
color: yellow;
}
.three{
color: red;
}
🔹 Using ID
The id selector styles the element with the specified id.
HTML
<p id="para">this is paragraph</p>
<font id="ft">this is font</font>
CSS
#para {
color: red;
}
#ft {
font-family: verdana;
}
🔹 CSS Selectors
1) Simple Selectors
name
id
class
2) Combinators
Used to explain relationship between two selectors
a. descendant (" ")
b. child (">")
c. adjacent sibling ("+")
d. general siblings ("~")
a) Descendant Selector
<div>
this is div
<p>this is p1
<p>this is p inside p</p>
</p>
<p>this is p2</p>
</div>
div p → selects all p inside div
b) Child Selector
div > p → selects only direct child p
c) Adjacent Selector
div + p → selects immediate next p after div
d) General Sibling Selector
div ~ p → selects all p siblings after div
🔹 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
Defines a special state of the element
Used to:
Style element on hover
Style visited/unvisited links
Style focused elements
Examples
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over */
a:hover {
color: #FF00FF;
}
/* active link */
a:active{
color:FFFF00;
}
🔹 Advanced Example
<html>
<head>
<style>
input:disabled {
background-color:lightgrey;
}
input[type=text]:focus {
background-color:lightblue;
}
button {
height:50px;
width:100px;
border: none;
}
div {
height:50px;
width:100px;
}
button:hover {
background-color:lightblue;
font-size:20px;
border:7px outset lightblue;
}
input:in-range {
border:4px solid green;
}
input:invalid {
background-color:yellow;
}
input[type=label] {
display:none;
border:none;
}
input[type=checkbox] {
display:none;
}
input[type=email]:invalid ~ input[type=label] {
display:block;
}
input[type=email]:valid + input[type=checkbox] {
display:block;
}
input[type=checkbox]:disabled {
background-color:green;
}
</style>
</head>
<body>
<form>
First Name:<input type="number" min="2" max="6" value="5"><br>
Last Name:<input type="text"><br>
Email:<input type="email" value="chitransht2000@gmail.com">
<input type="checkbox" checked="checked" value="valid" disabled="disabled">
<input type="label" value="Invalid email"><br>
Fees:<input type="text" disabled="disabled" value="8080"><br>
<div>
<button>
<font size="4" style="font-family:'arial';">submit</font>
</button>
</div>
</form>
</body>
</html>
Comments
Post a Comment