Cascading Style Sheet(CSS)
CSS is a technique and used to add styles (font , color) to our document or for designing webpages.
Properties of Cascading Style Sheet(CSS)
Background
It is used to control the background effort of an element tag.
Example : body {
background color : yellow;}
CSS Text
It is used to control the appearance of the text.
Example: body { color : black; }
CSS Font
It is used to control the font properties such as font-family size.
Example: body { font-family : courier; }
CSS Border
It is used to control the link style and color of the element border.
Example: table { border-style : dotted; }
CSS Outline
It is used to draw a line around an element outside the border edge.
Example: h1{ outline-style : solid; outline-width : medium; }
CSS Margin
It is used to control the space around the element.
Example: body { margin-left : 25%; }
CSS Table
It is used to set table layout.
Example: table { border-spacing : 20pt; }
How many types of Cascading Style Sheets(CSS) are there?
There are three type of Cascading Style Sheets(CSS)
- Internal Cascading Style Sheets(CSS)
- Embedded Cascading Style Sheets(CSS)
- External Cascading Style Sheets(CSS)
Internal Cascading Style Sheets(CSS)
Internal CSS is written in our HTML document. The style of the content in the body of the HTML document will be changed inside the style tags.
Coding For Internal Cascading Style Sheets(CSS)
You want to open Notepad , it is a default software in your system.
After typing the code , you want to save the file as ".html" (eg: 1.html like this you want to save your file).
.html File
<html>
<head>
<title> Internal Cascading Style Sheets(CSS) </title>
</head>
<body bgcolor ="white">
<p style = "font-size:20pt; text-align: center">
<b> India's Fastest Online Shopping Places</b></p>
<ul style = "font-family: Chiller; font-size:30pt">
<li>Amazon</li>
<li>ClubFactory</li>
<li>Snapdeal</li>
</ul>
<p><h1> Thank you For Visiting </h1></p>
</body>
</html>
Result
You can view your result in the web browser like Internet explorer , Chrome , Firefox etc.,.
 |
| Internal CSS Result |
Embedded Cascading Style Sheets(CSS)
Embedded Cascading Style Sheets(CSS) is also written in our HTML document.
Style of the Content in the body of the HTML document will be changed inside the <style>......</style> tags.
Coding For Embedded Cascading Style Sheets(CSS)
You want to open Notepad , it is a default software in your system.
After typing the code , you want to save the file as ".html" (eg: 1.html like this you want to save your file).
.html File
<html>
<head>
<title>Embedded Cascading Style Sheets(CSS) </title>
<style>
h3 {
font-family:arial;
font-size:10pt;
color:white; }
p {
font-family : sans-serif;
font-size : 20pt;
color: red; }
</style>
</head>
<body bgcolor = "sky-blue">
<p> Online Shopping </p>
<h3> Some Type of Product in shopping </h3>
<ol>
<li> Grocery </li>
<li> Mobile Categories </li>
<li> Men and Women's Cosmetics </li>
</ol>
</body>
</html>
Result
You can view your result in the web browser like Internet explorer , Chrome , Firefox etc.,.
 |
| Embedded CSS Result |
External Cascading Style Sheet(CSS)
Only any text editor and edit the style code according to the syntax. Save this file with .css extension . The ".css" extension can be referred by ".html" extension document using <link> tags.
Coding For External Cascading Style Sheets(CSS)
You want to open Notepad , it is a default software in your system.
After typing the code , you want to save the file as ".html" (eg: 1.html like this you want to save your file) and also you want to save another file as ".css" is style file (open another notepad editor ,type stylesheet and save as eg:"styles.css" )
.html File
Coding For Embedded Cascading Style Sheets(CSS)
You want to open Notepad , it is a default software in your system.
After typing the code , you want to save the file as ".html" (eg: 1.html like this you want to save your file).
.html File
<html>
<head>
<title>External Cascading Style Sheet</title>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper"
<div id="header">
<div class="container">
<div id="subheader">
<h1><p>India's Fastest Online Shopping Places</p></h1>
<a href="#">Guest</a><a href="#">Consumer</a>
</div>
<div id="main-header">
<div id="logo">
<span id="list">MY</span><span id="ist">Shop.com</span>
</div>
</div>
</div>
</body>
</html>
.css File
body{
background:white;}
#wrapper{
font-family:arial;}
.container
{ width:90%;
margin:0 auto;
}
#subheader
{ width:100%;
height:90px;
background:darkgreen;
margin-top:2px;}
#subheader p{
float:left;
margin-top:20px;}
#subheader a{
float:right;
text-decoration:none;
color: white;
line-height:50px;
margin-left:50px;}
#main-header
{ width:100%;
height:100px;
background:green;
float:left;
margin-top:-2px;}
#logo{
width:250px;
margin-top:10px;
float:left;
}
#ist{
color: black;
margin-left:15px;
font-family: cursive;
font-size:35px;
font-weight: bold;
}
#list{
color: black;
font-size:45px;
font-family: cursive;
font-weight: bold;
margin-left:15px;
}
Result
You can view your result in the web browser like Internet explorer , Chrome , Firefox etc.,.
 |
| External CSS Result |
"Cascading Style Sheet(CSS)" easy for beginners to learn .
I hope you will like and enjoy this Blog . If you have any queries you can comment in the comment box .
If you like this blog you can share with your friends.
Thank you
For spending your valuable time to read my Blog.
No comments:
Post a Comment