What is CSS?
• .CSS stands for Cascading Style Sheets.
• Styles define how to display Html elements.
• Cascading means dynamic,Style Sheet means combination of plain text.
• CSS provides 4 types of style sheets.
1)Internal Style Sheets
2)External Style Sheets
3)Inline Style Sheets
4)Embed Style Sheets
1)Internal Style Sheets:
In this type of style sheets we can include CSS within the <head> tag.
Syntax:
<head>
<style type="text/css”>
CSS Properties
</style>
</head>
2)External Style Sheet:
In this type of style sheet we can simply specify all the css properties in a separate and save that file with .css extension and we have to import the external css file into our program.
Syntax:
mystyle.css is the file which contains all the CSS properties
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3)Inline Style Sheet:
In this type of style sheet we can add the properties in each and every individual tag.
Syntax:
<p style="properties">
4)Embeded Style Sheet:
In this type of style sheets we can include CSS in b/w the <head> tag and <body> tag.
Syntax:
<head>
</head>
<style type="text/css">
CSS Properties
</style>
<body>
Advantage of CSS:
• By using css we can create web pages how we want.
• It will provide more different styles.
• Is also provide event actions.
• We can also create web layout designs.
Syntax of CSS properties:
The CSS syntax is made of three parts
Selector
{
property:value;
}
selector----It is nothing but the html tag.
property---- It is nothing but the attribute we want to change.
value-- It is the value given to the attribute.
Rules for declaring:
• If the value is multiple words, put quotes around the value
eg: p {font-family: "sans serif"}
• If you wish to specify more than one property, you must separate each property with a semicolon
eg:
p{
text-align:center;
color:red;
}
Grouping of Selectors:
You can group selectors. Separate each selector with a comma.
eg:
h1,h2,h3,h4,h5,h6
{
color: green
}
The class Selector:
With the class selector you can define different styles for the same type of HTML element.
p.one
{
text-align: right
}
p.two
{
text-align: center
}
• You can also define styles for HTML elements with the id selector. The id selector is defined as #.
eg: #green {color: green}
