CSS: Cascading Stylesheets
We have Three types of Stylesheets
1. Inline stylesheet (1%)
2. Internal Stylesheet (0%)
3. External Stylesheet (99%)
In our project, we are using 99% External Stylesheet only
Inline Style sheet:
In this, we can write styles in html opening tag.
Syntax: <htmltag style="property:value;">
eg: <p style="color:red;">
Disadvantage: For same tag, We can apply single Style at a time.
Internal Style sheet: In this, we can write styles in the head section of html page
Syntax:
<html>
<head>
<title>----------</title>
<style type="text/css">
Selector
{
Property:Value;
}
</style>
</head>
<body>
________
</body>
</html>
eg:
<html>
<head>
<title>----------</title>
<style type="text/css">
p
{
color:red;
}
</style>
</head>
<body>
<p>welcome to hyd</p>
</body>
</html>
External stylesheet: In this, we can write all styles in a separate document, link that document path to every html.
We can save stylesheet with ".css"
Syntax: We can declare the following syntax in each HTML Document in Header Part after title tag.
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
CSS Syntax:
selector
{
property:value;
}
CSS Units: em, px, %,
Selectors:
1. Tag Selector: here we can apply styles to the html tag.
Disadvantage: By using these, only we can apply single Property to all elements
2. Class Selector: we can apply styles to the class of the html tag.
class selectors are called by using "." operator
Properties:
color: This Property is used to set the font color
eg: color:red;
background-color: is used to set background color
eg: background-color:green;
letter-spacing: is used to adjust space b/w letters.
eg: letter-spacing:2em;
word-spacing: is used to adjust space b/w words.
eg: word-spacing:2em;
margin-left: is used to give left side margin
eg: margin-left:2em;
margin-top: is used to give top side margin
eg: margin-top:2em;
margin-bottom: is used to give bottom side margin
eg: margin-bottom:2em;
margin-right: is used to give right side margin
eg: margin-right:2em;
text-indent: is used to give indent nature to the para.
eg: text-indent:1.5em;
text-decoration:underline is used to give underline effect
eg: text-decoration:underline;
text-decoration:overline is used to give overline to the text.
eg: text-decoration:overline;
text-decoration:line-through is used to give striking effect.
eg:
text-decoration:line-through;
text-decoration:none is used to remove link underline.
eg:
a
{
text-decoration:none;
}
a:link
{
color:green;
}
a:hover
{
color:black;
}
text-align:center is used to give center alignment to the data.
eg: text-align:center;
text-align:right is used to give right alignment to the data.
eg: text-align:right;
text-align:justify is used to give justify alignment to the data.
eg: text-align:justify;
font-size: is used to incerease/decrease the font-size
eg: font-size:200%;
font-weight:bold is used to give bold nature to the text.
eg: font-weight:bold;
font-style:italic is used to give italic nature to the text.
eg: font-style:italic;
border: is used to give box model to the text.
syntax: border:border-width border-style border-color;
eg: border:1px solid black;
Different border-styles are
1. dotted
2. dashed
3. double
4. solid
border-left: is used to give left side border only.
eg: border-left:border-width border-style border-color;
eg: border-left:1px solid black;
border-right: is used to give right side border only.
eg: border-right:1px solid black;
border-top: is used to give top side border only.
eg: border-top:1px solid black;
border-bottom is used to give bottom side border only.
border-bottom:1px solid black;
padding-left: is used to adjust space b/w left side border to the text.
eg: padding-left:2em;
padding-top: is used to adjust space b/w top side border to the text.
eg: padding-top:2em;
padding-right: is used to adjust space b/w right side border to the text.
eg: padding-right:2em;
padding-bottom: is used to adjust space b/w bottom side border to the text.
eg: padding-bottom:2em;
Short-hand property:
padding:1em 3em 2em 4em;
Here 1em represents padding-top
3em represents padding-right
2em represents padding-bottom
4em represents padding-left
Note: short-end property always follow clock-wise direction.
border-radius: is used to give radius to the border
eg: border-radius:2em;
Span: is used to differentiate some data of para to the remaining para.
eg: <p>Welcome to <span class="red">epub Tutorial</span></p>
line-height: is used to adjust space b/w lines of the para.
eg: line-height:2em;
Tips:
For Getting list/Hanging format, you can use following two properties
text-indent:-ve value;
margin-left:+ve value;
eg:
list
{
text-indent:-2em;
margin-left:2em;
}
We have Three types of Stylesheets
1. Inline stylesheet (1%)
2. Internal Stylesheet (0%)
3. External Stylesheet (99%)
In our project, we are using 99% External Stylesheet only
Inline Style sheet:
In this, we can write styles in html opening tag.
Syntax: <htmltag style="property:value;">
eg: <p style="color:red;">
Disadvantage: For same tag, We can apply single Style at a time.
Internal Style sheet: In this, we can write styles in the head section of html page
Syntax:
<html>
<head>
<title>----------</title>
<style type="text/css">
Selector
{
Property:Value;
}
</style>
</head>
<body>
________
</body>
</html>
eg:
<html>
<head>
<title>----------</title>
<style type="text/css">
p
{
color:red;
}
</style>
</head>
<body>
<p>welcome to hyd</p>
</body>
</html>
External stylesheet: In this, we can write all styles in a separate document, link that document path to every html.
We can save stylesheet with ".css"
Syntax: We can declare the following syntax in each HTML Document in Header Part after title tag.
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
CSS Syntax:
selector
{
property:value;
}
CSS Units: em, px, %,
Selectors:
1. Tag Selector: here we can apply styles to the html tag.
Disadvantage: By using these, only we can apply single Property to all elements
2. Class Selector: we can apply styles to the class of the html tag.
class selectors are called by using "." operator
Properties:
color: This Property is used to set the font color
eg: color:red;
background-color: is used to set background color
eg: background-color:green;
letter-spacing: is used to adjust space b/w letters.
eg: letter-spacing:2em;
word-spacing: is used to adjust space b/w words.
eg: word-spacing:2em;
margin-left: is used to give left side margin
eg: margin-left:2em;
margin-top: is used to give top side margin
eg: margin-top:2em;
margin-bottom: is used to give bottom side margin
eg: margin-bottom:2em;
margin-right: is used to give right side margin
eg: margin-right:2em;
text-indent: is used to give indent nature to the para.
eg: text-indent:1.5em;
text-decoration:underline is used to give underline effect
eg: text-decoration:underline;
text-decoration:overline is used to give overline to the text.
eg: text-decoration:overline;
text-decoration:line-through is used to give striking effect.
eg:
text-decoration:line-through;
text-decoration:none is used to remove link underline.
eg:
a
{
text-decoration:none;
}
a:link
{
color:green;
}
a:hover
{
color:black;
}
text-align:center is used to give center alignment to the data.
eg: text-align:center;
text-align:right is used to give right alignment to the data.
eg: text-align:right;
text-align:justify is used to give justify alignment to the data.
eg: text-align:justify;
font-size: is used to incerease/decrease the font-size
eg: font-size:200%;
font-weight:bold is used to give bold nature to the text.
eg: font-weight:bold;
font-style:italic is used to give italic nature to the text.
eg: font-style:italic;
border: is used to give box model to the text.
syntax: border:border-width border-style border-color;
eg: border:1px solid black;
Different border-styles are
1. dotted
2. dashed
3. double
4. solid
border-left: is used to give left side border only.
eg: border-left:border-width border-style border-color;
eg: border-left:1px solid black;
border-right: is used to give right side border only.
eg: border-right:1px solid black;
border-top: is used to give top side border only.
eg: border-top:1px solid black;
border-bottom is used to give bottom side border only.
border-bottom:1px solid black;
padding-left: is used to adjust space b/w left side border to the text.
eg: padding-left:2em;
padding-top: is used to adjust space b/w top side border to the text.
eg: padding-top:2em;
padding-right: is used to adjust space b/w right side border to the text.
eg: padding-right:2em;
padding-bottom: is used to adjust space b/w bottom side border to the text.
eg: padding-bottom:2em;
Short-hand property:
padding:1em 3em 2em 4em;
Here 1em represents padding-top
3em represents padding-right
2em represents padding-bottom
4em represents padding-left
Note: short-end property always follow clock-wise direction.
border-radius: is used to give radius to the border
eg: border-radius:2em;
Span: is used to differentiate some data of para to the remaining para.
eg: <p>Welcome to <span class="red">epub Tutorial</span></p>
line-height: is used to adjust space b/w lines of the para.
eg: line-height:2em;
Tips:
For Getting list/Hanging format, you can use following two properties
text-indent:-ve value;
margin-left:+ve value;
eg:
list
{
text-indent:-2em;
margin-left:2em;
}
No comments:
Post a Comment