CSS:- it means a cascading style sheet, it is used to provide a set of properties to design the HTML web page. Without using CSS, we can not best design, theme, and appearance on Web Page.HTML only provide a set of an element using HTML Tag but CSS provide properties to design HTML.
If we want to provide backgroundcolor,backgroundimage,height,width,margin,padding,font-family,font-size,color,alignment then we use css.
History of CSS:-
CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN. Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web.
Note:- If you did not read HTML then first read this article after that read this then you can easily understand the CSS concept.
Click to learn HTML
CSS has three different approaches to write it.
1) inline css:- we can write css under HTML element similat to HTML property.
<p style="backhround-color:red;color:yellow;">dfdif yiud yfiudyfudyfidfy</p>
Example of Inline CSS:-
<html>
<head>
</head>
<body>
<div style="height:400px;border:2px solid blue;">
<p style="background-color: red;color:white;">Welcome in SCS</p>
<h1 style="color:orange">Welcome in Inline css </h1>
<input type="text" style="width: 400px;height: 30px;margin-left: 120px;margin-top: 50px;" />
</div>
</body>
</html>
Now I am creating a small front page using inline CSS, which contains the header, footer, and middle.
Complete Code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0px;">
<div style="height:100px;background-color:blue;">
<h1 style="color:white;margin: 0px;">Computer Sales and Services Indore</h1>
</div>
<div style="height:500px;background-image: url('reg.jpg');background-size: cover;">
<h1>Welcome in Shiva Concept Digital</h1>
<a href="http://shivaconceptsolution.com/digital" style="color:red;font-weight:bolder;">Click here</a>
</div>
<div style="height:200px;background-color:blue;">
<div style="float:left;height:180px;width:30%;margin-left: 10px;margin-top:10px;border:1px solid white;">
Part1
</div>
<div style="float:left;height:180px;width:30%;margin-left: 10px;margin-top:10px;border:1px solid white;">
Part2
</div>
<div style="float:left;height:180px;width:30%;margin-left: 10px;margin-top:10px;border:1px solid white;">
Part3
</div>
</div>
</body>
</html>
2) Internal CSS:-
We will write CSS code under <head> section of HTML web page using <style> tag.
This CSS contains two different blocks.
1) Implicit block:-
All predefined tags of HTML will be defined as an implicit block.
p
{
}
h1
{
}
img
{
}
2) Explicit block:- this type of block will be created manually using .block and #block.
.block will be called by the class selector and #block will be called by id selector
.abc
{
color:red;
font-size:24px;
}
<div class="abc"></div>
#mno
{
color:orange;
background-color:yellow;
}
<div id="mno"></div>
#block will be used to define unique features on the web page because we can not use ID multiple items.
.block will be used to define repeated features on the web page, it can be called multiple times on a single web page.
A complete example of Internal CSS, create any .html file and write this code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin: 0px;
}
#header
{
height:100px;
background-color:blue;
}
h1
{
color:white;
margin: 0px;
}
#middle
{
height:500px;
background-image: url('reg.jpg');
background-size: cover;
}
#mid
{
height:200px;
background-color:blue;
}
a
{
color:red;
font-weight:bolder;
}
.part
{
float:left;
height:180px;
width:30%;
margin-left: 10px;
margin-top:10px;
border:1px solid white;
}
</style>
</head>
<body>
<div id="header">
<h1>Computer Sales and Services Indore</h1>
</div>
<div id="middle">
<h1>Welcome in Shiva Concept Digital</h1>
<a href="http://shivaconceptsolution.com/digital">Click here</a>
</div>
<div id="mid">
<div class="part">
Part1
</div>
<div class="part">
Part2
</div>
<div class="part">
Part3
</div>
</div>
</body>
</html>
External CSS:- We will create a separate CSS file that can be used on multiple web pages.
We will create a .css extension file to implement external CSS.
Step1:-
Create .html file
Step2nd:-
Create .css file
Step3rd:-
Link .css file under HTML Web page.
Code of Html file:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="middle">
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Code of CSS File
*
{
margin: 0px;
}
body
{
background-color: lightblue;
}
#container
{ margin-left:50px;
margin-right: 50px;
}
#header
{
height: 100px;
background-color: darkblue;
}
#middle
{
height: 500px;
background-color: lightgray;
}
.part
{
width:31.5%;
height: 100%;
border:1px solid red;
margin-left: 20px;
float:left;
}
#footer
{
height: 100px;
background-color: darkblue;
}
Now we create five web page application using HTML + CSS
1) Create HTML file and define three section using <div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
2) Create a .css file under the same folder:
i have created .css file and named it style.css
*
{
margin: 0px;
}
#container
{
}
#header
{
height: 100px;
background-color: #918484;
}
#middle
{
height: 500px;
background-color: #e65a5a;
}
#footer
{
height: 300px;
background-color: #918484;
}
3) Link style.css file under index.html file <head></head>
<link rel="stylesheet" type="text/css" href="style.css">
4) Create five web page content to copy.
Download Code:-
POST Answer of Questions and ASK to Doubt