Inline:When you will call an html tag to make design for output and write the design inside same tag then it will be inline CSS. For example:
<html>
<head>
<title>example of inline CSS</title>
</head>
<body>
<div style="width:80%;height:600px;background-color:green;float:left">
<p style="color:white">Hello World</p>
</div>
</body>
</html>
In the above example you have seen two times use inline CSS. One time inside <div>tag and next <p> tag.
Internal:When you will write this style inside <head>here</head>.Example:
<html>
<head>
<title>This is internal CSS</title>
<style>
p{
color:white;
font-size:100px;
text-align:center;
}
div{
width:80%;
height:400px;
background-color:green;
float:left;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
External CSS: This style is very popular and effective because it saves time than other styles.
Now create a new file and save it "name.css"(after file name must put.css).Suppose my css file name is ar.css. Now I write all the styles inside this css file and this file need a link with the HTML file.Example:-
ar.css:
p{
color:white;
font-size:100px;
text-align:center;
}
div{
width:80%;
height:400px;
background-color:green;
float:left;
}
HTML file:
<html>
<head>
<title>This is internal CSS</title>
<link rel="stylesheet" type="text/css "href="ar.css">
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
Note:
In the above HTML file you applied two tags design in the external CSS but when you will need different design for same tag then what you will do? It is very easy just add a class or id inside HTML tag. If you take class inside HTML tag then write in the CSS file ".class name" or if you take id then "#id name".For example:
ar.css:
p{
color:white;
font-size:50px;
text-align:center;
}
.hex{
color:red;
font-size:50px;
text-align:center;
}
div{
width:100%;
height:400px;
background-color:green;
float:left;
}
#hex1{
width:100%;
height:400px;
background-color:blue;
float:left;
}
HTML file:
<html>
<head>
<title>This is internal CSS</title>
<link rel="stylesheet" type="text/css "href="ar.css">
</head>
<body>
<div>
<p>Hello World</p><br />
<p class="hex">Why you are not forever for life?</p>
</div>
<div id="hex1">
</div>
</body>
</html>
Note:Do not take any space inside class /id name.If it is necessary then take "_"to add your class/id letter or words.
Example:
ar.css:
p{
color:white;
font-size:50px;
text-align:center;
}
.hex_bin1{
color:red;
font-size:50px;
text-align:center;
}
div{
width:100%;
height:400px;
background-color:green;
float:left;
}
#hex_res{
width:100%;
height:400px;
background-color:blue;
float:left;
}
HTML file:
<html>
<head>
<title>This is internal CSS</title>
<link rel="stylesheet" type="text/css "href="ar.css">
</head>
<body>
<div>
<p>Hello World</p><br />
<p class="hex_bin1">Why you are not forever for life?</p>
</div>
<div id="hex_res">
</div>
</body>
</html>
Now just notice below:
Here you get all css styles:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
For Practice just follow below.
Make the above design by using HTML and CSS. To do this
make a folder and one image(image name will be "a " and extention ".png") , one video (video name will be "ttre.mp4") just insert this folder.Now make HTML file & CSS file( total two files one HTML other CSS ) and save it as index.html, tg.css in this folder.
Attention: In this practice you will observe different kinds of css use such as inline,external etc. Whenever you will practise notice carefully which tag or style work what?If you finish your practice correctly and can make output like the above image layout through your browser,then you know html and css good.
Now start:
index.html(write this code correctly inside your "index.html"file and save it)
<html>
<head>
<title>arup bashak</title>
<link rel="stylesheet" type="text/css" href="tg.css">
</head>
<body>
<div style="width:100%;height:1600px;background-color:#e8e8e8;float:left">
<div style="width:100%;height:200px;background-color:#e8e8e8;float:left">
<div style="width:40%;height:100px;background-color:#e8e8e8;float:left">
<h1>ULTIMATE</h1><h4>DESIGNER TOOLKIT</h4>
</div>
<div style="width:60%;height:100px;background-color:#e8e8e8;float:left">
<table class="bb"><tr><td><input type="text" placeholder="search for free stuffs . . . . . . . . . . . . . ." style="width:200px;height:30px;font-family:impact;background-color:blue;color:white">
</input>
</td></tr></table>
</div>
<div style="width:100%;height:100px;background-color:#e8e8e8;float:left">
<table class="rt">
<tr><td>Home</td><td>Company</td><td>Service</td><td>Blog</td><td>Product</td><td>Clients</td><td>Contact</td></tr></table>
</div>
</div>
<div style="width:100%;height:300px;background-color:#bdbdbd;float:left">
<div style="width:3%;height:300px;background-color:#bdbdbd;float:left">
</div>
<div class="kl">
</div>
<div style="width:2%;height:300px;background-color:#bdbdbd;float:left">
</div>
<div class="kl">
</div>
<div style="width:2%;height:300px;background-color:#bdbdbd;float:left">
</div>
<div class="kl">
</div>
<div style="width:2%;height:300px;background-color:#bdbdbd;float:left">
</div>
<div class="kl">
</div>
<div style="width:2%;height:300px;background-color:#bdbdbd;float:left">
</div>
</div>
<div style="width:100%;height:40px;background-color:#e8e8e8;float:left">
</div>
<div style="width:5%;height:300px;background-color:#e8e8e8;float:left">
</div>
<div class="jbr">
<div class="br1">
<table><tr><td> <img src="a.png" width="100%" height="100%"></img> </td><td>This is a good picture and i like it very much This is a good picture and i like it very much
This is a good picture and i like it very much This is a good picture and i like it very much This is a good picture and i like it very much</td></tr></table>
</div>
<div class="br2">
<table><tr><td><img src="a.png" width="100%" height="100%"></img></td><td>This is a good picture and i like it very much This is a good picture and i like it very much
This is a good picture and i like it very much This is a good picture and i like it very much This is a good picture and i like it very much</td></tr></table>
</div>
<div class="br3">
<table><tr><td><img src="a.png" width="100%" height="100%" ></img></td><td>This is a good picture and i like it very much This is a good picture and i like it very much
This is a good picture and i like it very much This is a good picture and i like it very much This is a good picture and i like it very much</td></tr></table>
</div>
<div class="br4">
<table><tr><td><img src="a.png" width="100%" height="100%"></img></td><td>This is a good picture and i like it very much This is a good picture and i like it very much
This is a good picture and i like it very much This is a good picture and i like it very much This is a good picture and i like it very much</td></tr></table>
</div>
</div>
<div style="width:5%;height:200px;background-color:#e8e8e8;float:left">
</div>
<div style="width:100%;height:00px;background-color:#e8e8e8;float:left">
</div>
<div style="width:5%;height:00px;background-color:#e8e8e8;float:left">
</div>
<div style="width:100%;height:20px;background-color:#e8e8e8;float:left">
</div>
<div style="width:100%;height:20px;background-color:#e8e8e8;float:left">
</div>
<div class="dsa">
<table class="jhgk">
<tr><td style="width:100%; height:20%;">FACE BOOK</td></tr>
<tr><td>GMAIL</td></tr>
<tr><td>CARD</td></tr>
<tr><td>SHOP</td></tr>
<tr><td>HELP</td></tr>
</table>
</div>
<div class="ase">
<video class="ght" controls >
<source src="ttre.mp4" type="video/mp4">
<source src="ttre.ogg" type="video/ogg">
</video>
</div>
<div class="vvd">
<table class="jhgk">
<tr><td style="width:100%; height:20%;">FACE BOOK</td></tr>
<tr><td>YOUTUBE</td></tr>
<tr><td>IMAGES</td></tr>
<tr><td>GOOGLE</td></tr>
<tr><td>UPDATES</td></tr>
</table>
</div>
<div style="width:5%;height:300px;background-color:#e8e8e8;float:left">
</div>
<div style="width:60%;height:300px;background-color:#e8e8e8;text-align:left;float:left">
<p class="sd">Welcome to our company</p>
Welcome to our company.It is an excellent company for business.Welcome to our company.It is an excellent company for business.
Welcome to our company.It is an excellent company for business.Welcome to our company.It is an excellent company for business.
</div>
<div style="width:2%;height:300px;background-color:#e8e8e8;float:left">
</div>
<div style="width:28%;height:300px;background-color:#e8e8e8;float:left">
<p class="sd">Contact us </p>
Welcome to our company.It is an excellent company for business.Welcome to our company.It is an excellent company for business.
Welcome to our company.It is an excellent company for business.Welcome to our company.It is an excellent company for business.
</div>
<div style="width:5%;height:300px;background-color:#e8e8e8;float:left">
</div>
<div style="width:5%;height:40px;background-color:#bdbdbd;float:left">
</div>
<div style="width:95%;height:40px;background-color:#bdbdbd;float:left;text-align:left">
Copy right from Sigma IT institute
</div>
</div>
</body>
</html>
tg.css:(Write this code correctly inside your "tg.css" file and save it.)
.kk{
color:white;
}
.headerthree{
width:90%;
height:100px;
background-color:red;
float:left;
margin-left:65px;
border:2px solid white;
border-radius:left 10%;
}
.downheader{
width:90%;
height:50px;
background: rgba(255, 255, 0, 1);
float:left;
margin-left:65px;
border:2px solid white;
border-radius:left 10%;
}
.downheadertwo{
width:90%;
height:388px;
background-color:red;
float:left;
margin-left:65px;
border:1px solid white;
border-radius:left 10%;
}
.hk{
width:1366px;
height:130%;
background-color:#e5ddf8;
float:left;
border:1px solid white;
}
.tk{
width:100%;
}
.gh
{
background-color:red;
}
.downheaderfour{
width:90%;
height:24px;
background-color:#e5ddf8;
text-align:center;
color:blue;
float:left;
margin-left:65px;
border:1px solid white;
border-radius:left 10%;
}
h1{
font-size:20px;
font-family:impact;
color:shadow;
}
.dr{
font-size:20px;
}
.downheaderfive{
width:78%;
height:388px;
background-color:#e5ddf8;
float:left;
overflow:scroll;
border:1px solid white;
}
.downheadersix{
width:20.5%;
height:388px;
background-color:white;
float:left;
/*margin-left:65px;*/
border:1px solid white;
}
.downheaderseven{
width:1%;
height:388px;
background-color:white;
float:left;
border:1px solid white;
}
.downheader table{
width:100%;
margin-top:.7%;
}
.downheader table tr td a{
border:solid 1px white;
text-align:center;
font-size:25px;
margin-left:30%;
font-family:Impact;
}
.downheader table tr td a:hover{
color:black;
background-color:white;
}
.tt{
text-align:center;
font-size:35px;
color:red;
}
