Cascading Style Sheet
CSS
It is a computer language which describe the style of html.It describe how html elements work in web page.CSS stands for Cascading Style Sheets.To style an HTML element, you can add the style attribute directly to the opening tag.CSS can change the look of HTML elements.CSS can select HTML elements by tag,class or ID. Multiple CSS classes can be applied to one HTML elements. Classes can be reusable, while IDs can be only be used once.IDs are more specific than classes, and classes are specified with a space. Syntax
Inside the sector's body, we types color: blue;
This line is reffered to as a CSS declaration.
CSS declaration consist of a property and a value.
In the above example, the property is color and the value is blue. The property and value are separated by a colon (:), A semicolon (;) always used at the end of a declaration.
- Three ways to insert CSS
1.Inline style.
2.Internal style sheet.
3.external style sheet.
Internal style sheet
An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page
Inline style
An inline style may be used to apply a unique style for a single element.To use inline styles, add the style attribute to the relevant element.The style attribute can contain any CSS property.
External style sheet
It used by connecting external CSS files.
1.CSS colors
➢Background colors:<!DOCTYPE html>
<html>
<body><h1 style="background-color:Tomato;">Tomato</h1>
</body>
</html>
➢Font colors
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
- Border color:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">CSS border</h1>
<h1 style="border: 2px dotted DodgerBlue;">CSS border</h1>
</body>
</html>
➢Color Values:
⟹rgb, rgba, hsl, hsla
02)Background
➢Backgroun color:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightpink;
}
</style>
</head>
<body>
<h1>Flowers</h1>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>
➢Background image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/alstroemeria-1520220681.jpg?crop=1xw:1xh;center,top&resize=480:*");
background-repeat: no-repeat;
background-position: center top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>flowers</h1>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
➢If the border-style property has four values:
border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
➢If the border-style property has three values:
border-style: dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
➢If the border-style property has two values:
border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid
➢If the border-style property has one value:
border-style: dotted;
all four borders are dotted
➢ border-style property
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The flower</h2>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>
<html>
<head>
<style>
div {
border: 5px solid black;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px;
background-color: pink;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</div>
</body>
</html>
<html>
<head>
<style>
div {
border: 2px solid gray;
padding: 8px;
background-color: pink;
}
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div>
<h1>text formatting</h1>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</div>
</body>
</html>
7)CSS font
<!DOCTYPE html>
<html>
<head>
<style>
p.italic {
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<p class="italic">A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>
8)CSS icon
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
9)CSS tables
➢ type1:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
➢Type2:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
➢Type3:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Single Border Around The Table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
➢Type4:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
10)CSS align
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</div>
</body>
</html>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
➢If the border-style property has four values:
border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
➢If the border-style property has three values:
border-style: dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
➢If the border-style property has two values:
border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid
➢If the border-style property has one value:
border-style: dotted;
all four borders are dotted
➢ border-style property
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The flower</h2>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>
5)CSS margin
<!DOCTYPE html><html>
<head>
<style>
div {
border: 5px solid black;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px;
background-color: pink;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</div>
</body>
</html>
6)CSS text
<!DOCTYPE html><html>
<head>
<style>
div {
border: 2px solid gray;
padding: 8px;
background-color: pink;
}
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div>
<h1>text formatting</h1>
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</div>
</body>
</html>
7)CSS font
<!DOCTYPE html>
<html>
<head>
<style>
p.italic {
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<p class="italic">A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</body>
</html>
8)CSS icon
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
9)CSS tables
➢ type1:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
➢Type2:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
➢Type3:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Single Border Around The Table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
➢Type4:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
10)CSS align
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>A flower, sometimes known as a bloom or blossom, is the reproductive structure found in flowering plants. The biological function of a flower is to effect reproduction, usually by providing a mechanism for the union of sperm with eggs. Flowers may facilitate outcrossing or allow selfing.</p>
</div>
</body>
</html>
No comments:
Post a Comment