CSS can be added in 3 ways.
i)Inline - By using the style attribute in HTML elements
This method is used to add style to the specific tag
Eg: <html>
<body>
<h1 style="color:blue;">hello</h1>
</body>
</html>
ii)Internal - By using <style> element in the <head> section
This is used to add style for a single web page
Eg:<html>
<head>
<style>
body{background-color: green;}
p{color: red;}
</style>
</head>
<body>
<p>hello</p>
</html>
iii)External By using an external css file
This is used to add style using external style sheet
Eg::<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello</p>
</html>
Main important things in CSS than HTML
1)CSS colors
We can insert the color in many ways.
rgb(red, green, blue)
hexadecimal value #ff0000
hsl value(hue, saturation, lightness)
i)background color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
ii)text color
<h1 style="color:Tomato;">Hello World</h1>
iii)border color
<h1 style="border:2px solid Tomato;">Hello World</h1>
2)CSS backgrounds
background-color
background-color: lightblue;
background-image
background-image: url("paper.gif");
background-repeat
background-repeat: repeat-x;
background-attachment
background-attachment: fixed;
background-position
background-position: right top;
3)CSS border
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
4)CSS margin
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
5)CSS boxmodel
Css boxmodel consist content,padding,border and margin.Content is as usual appear of text and images.Padding is a area around content.Border is around the padding.Margin clears an area outside border.
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
6)CSS text
as usual in HTML but some others as follows
text-decoration: overline;
text-transform: uppercase;
text-indent: 50px;
7)CSS icons
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
8)CSS navigation bar
Nav bar is very important because of its role now a days website.
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
9)CSS overflow
overflow: visible;
10)CSS image gallery
As usual in HTML we used image code further that call href and div for gallery.
11)CSS tables
Same as HTML but easily add color or any other format by calling class.
th {
background-color: #4CAF50;
color: white;}
12)CSS lists
ul.a {
list-style-type: circle;}
Comments
Post a Comment