VIMALA GURUKUL
CSS stand for Cascading Style Sheet.
Describe how HTML elements are to be displayed on screen.
CSS covers multiple layouts at once.
Inline CSS
Internal CSS
External CSS
Inline CSS allows you to apply a unique style to one HTML element at a time.
Example-
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
An internal stylesheet holds CSS rules for the page in the head section of the HTML file.
Example-
<!DOCTYPE html>
<html>
<head>
<title>Internal</title>
<style>
body {background-color: green; }
h1 {color: maroon;
margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet is a file containing only CSS file.
It is used to define the style for many html pages.
To use an external style sheet, add a link to it in <head> section of the html page.
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Example -
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
Comments are used to explain the code may help and when you edit the source code at a later date.
Comments are ignore by browser.
Example -
/* use heading tag*/
h1 {background:pink;
color:red;
font-size:30px;}
CSS selector are used to find (or select) the html elements you want to style.
There are many types of CSS Selector:-
CSS element selector
CSS id selector (#)
CSS class selector (.)
CSS universal selector (*) [apply to all]
CSS grouping selector
Example -
<!DOCTYPE html>
<html>
<head>
<title>Types of CSS Selector</title>
<style>
/*Element selector*/
h1 {color: blue;
font-size: 40px; }
/*ID selector*/
#text1 {color:green;}
/*Class selector*/
.text2 {color:yellow;}
/*Universal selector*/
* {background:skyblue;
text-align:center;}
/*Grouping selector*/
h1,h1,p {font-style:italic;}
</style>
</head>
<body>
<h1>Vimala Gurukul</h1>
<h2 id="text1">A world class computer education.</h2>
<div class="text2">Email:-vimalagurukul.com</div>
<p>Phone no.:- 7705887778</p>
</body>
</html>
CSS border to set up a border around the html elements.
You can specify types of borders for your elements using border-style, border-color, border-width, border-image, and border-radius.
Syntax -
border : border-width border-style border-color;
This border-style property is used to set the style of the borders.
The default value is none.
It includes the following style for the border:
dotted – dotted border-color
dashed – dash-line border
solid – normal thickness of border-color
double – thickness of the border twice the normal thickness
inset – border look like that it is merged into the page
outset – creating an illusion that the inside of the element is raised above the page
groove – the border style gets doubled
ridge – the border style gets fold
hidden – the border style gets hidden
Example -
<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>
This properties are used to set the width of borders.
Individual width of the border can be controlled by border-top-width, border-right-width, border-left-width and border-bottom-width.
You can also set all four borders at once with border-width property.
Example-
<body>
<h2>The border-width property</h2>
<p style="border-width:5px; border-style:solid;">Solid border whose width is 5px.</p>
<p style="border-width:15px; border-style:double;">Double border whose width is 15px.</p>
<p style="border-bottom-width:5px; border-top-width:10px; border-left-width:2px; border-right-width:15px; border-style:solid;">This is a border with four different.</p>
</body>
CSS borders as individual sides
There are also properties for specifies each of the borders (top, right, bottom, left).
Example-
<style>
p {border-top-style:dashed;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;}
</style>
CSS border shorthand properties
Example -
<style>
p {border:2px solid blue;}
</style>
The border-color property is used to set the color of the four bordered.
The color can be shade by -
name - specify a color name like ‘red’.
HEX - specify a color HEX value like “ff0000”.
RGB – specify a color RGB value like “rgb(255,0,0).
HSL – specify a color HSL value like “hsl(0,100%,50%)”.
Example -
<style>
p.one {border-style:solid;
border-color:red green blue yellow;}
</style>
CSS Property -
width: gives width to the html element in pixel or percentage.
height: gives height to the html element in pixel or percentage.
Background-color: gives background color to the html element in color-name or color-code.
Float: gives direction to the html element in left or right.
Font-size: it is used to define the size of text in pixel, or percentage are use.
Color: it is used define color of text in color name or code are used.
Font-weight: it is used to define of the boldness of the text in bold or in bolder are user.
Font-style: it is used to change the style of the text in normal, italic or oblique.
Font–family: it is used to change the font face of text in a “Times New Roman, Calibri, Arial”, etc.
By default font face is “Times New Roman”.
Text-align: it is used to align the text in left/right/justify are used.
Text-decoration: it is used to decorate the text in underline or none to used.
Text-transform: it is used to define the case of the text in uppercase, lowercase, capitalize are used.
Word-spacing: it is used to define the space between two words in pixel, percentage are used.
Letter-spacing: it is used to define the space between letters or characters in pixel or percentage are used.
Text-indent: it is used to define the indentation of the first line of the text in pixel or percentage are used.
Line-height: it is used to specify the space between lines.
e.g. p{line-height:1.2}
CSS Margin –
The CSS margin properties are used to create space around elements outside of any define borders with CSS you have full control over the margin. There are properties for setting the margin for each side of an element (top, right, bottom and left).
Margin individual side -
margin-top
margin-bottom
margin-right
margin-left
Note – negative values are allows.
Margin-shorthand property -
e.g. p {margin:25px 30px 45px 75px;}
CSS padding –
The CSS padding properties are used to generate space around and elements contain inside of any define border.
There are properties for setting the padding for each side of an element (top, right, bottom, and left).
Padding – Individual sides
padding-top
padding-bottom
padding-right
padding-left
Padding-shorthand property -
p {padding:25px 30px 45px 75px;}
Box-shadow -
box-shadow: x-axis/y-axis/blur/range/color
box-shadow: 2px/10px/10px/5px/grey
note – negative values are allowed.
Text-shadow -
text-shadow: x-axis/y-axis/blur/color
text-shadow: 5px/4px/2px/green
CSS background properties –
The CSS background properties are used to define the background effects for elements .
These are five types of CSS background properties that html elements.
Background-color
background-image
background-attachment
background-repeat
background-position
Background-color – It specifies the background color of an element.
Syntax – background-color:colorname;
or background-color:red;
Background-image – It specifies an image to use a background of a element you can also set height and width a background-image.
Syntax – background-image:url(“photo.jpg”);
Background-repeat – By default, the background image property repeats an image both horizontally (x-axis) and vertically (y-axis).To control whether the background image should repeat or not, you can use the background repeat property.
Syntax – background-image:url(“photo.jpg”);
background-repeat: repeat-x/repeat-y/no-repeat
Background-attachment – The background set whether the background image will be fixed scroll when the page will scroll or scroll when the content is scroll.
Syntax – background-attachment: fixed/scroll;
note – scroll is default.
Background-position – It is used to control the position of the background image.
Syntax – background-image:url(“photo.jpg”);
background-position:center/left/right;
background-position:bottom center/left/right;
or background-size:cover;
background-size:700px(width) 250px(height);
A block element always start on a new line. And fill up the horizontal space left and right on the web page the block value of the display property courses and element to be behave like block level element, like a <div> or <p> element.
The display property decides how the browser will display an element.
Example –
<!DOCTYPE html>
<html>
<head>
<title>Display properties</title>
<style>
.main {color:blue;
display:block/inline/none;}
</style>
</head>
<body>
A block line always <span class=”main”> start with a </span> new line, and fills up the horizontal space left or right on the web page.
</body>
</html>
Example – Inline-block, flex, float, list-item
Syntax -
display:flex;
display:inline-block;
float:left;
Example -
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS display</title>
<style>
p {display:inline;
background:skyblue;
padding:10px;}
ul li {display:inline;
margin:10px;}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu</p>
<ul>
<li>HTML
<li>CSS
<li>Java
<li>JavaScript</li>
</ul>
</body>
</html>
The positioning property set or element position to display on web page.
These are five important types of positioning method use for an element.
Static
Fixed
Relative
Absolute
Sticky
Example -
<!DOCTYPE html>
<html>
<head>
<title>Static</title>
<style>
div.static {position:static;
border:3px solid blue;}
</style>
</head>
<body>
<h2>Position:static;</h2>
<p>An element with position:static; is not positioned in any special way: it is always normal flow of the page.</p>
<div class=”static”>
This div element has position:static;
</div>
</body>
</html>
Static - Static position is the default position
Syntax – position:static;
Fixed - To set element is fixed even if window scroll vertically or horizontally is fixed place.
Syntax – position:fixed;
Relative – An element with position:relative is position with relative to its normal position and will leave a gape at its normal position.
Syntax- position:relative;
top:20px;
Absolute – Position the element relative to the position of its first parent.
Syntax – position:absolute;
Sticky – It enables an elements to scroll down if the page can be scrolled up to a fixed point and then it gets fixed at a certain position after you have scroll a fixed area.
Syntax – position:sticky;
i. Center text on the image
Example -
<!DOCTYPE html>
<html>
<head>
<title>Center text on the image</title>
<style>
.container {position: relative;}
.center {position: absolute;
top:50%;
width:100%;
text-align:center;
font-size:18px;}
img {width:100%;
height:auto;
opacity:0.3;}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in an image</p>
<div class=”container”>
<img src=”photo.jpg” width=”100px” height=”300px”>
<div class=”center”>Centered</div>
</div>
</body>
</html>
ii. Top left text on the image
Example -
.top left {position:absoulte;
top:8px;
left:16px;
font-size:18px;}
iii. Top right text on the image
Example -
.top right {position:absoulte;
top:8px;
right:16px;
font-size:18px;}
iv. Bottom left text on the image
Example -
.bottom left {position:absoulte;
bottom:8px;
left:16px;
font-size:18px;}
v. Bottom right text on the image
Example -
.bottom right {position:absoulte;
bottom:8px;
right:16px;
font-size:18px;}
There are two types of CSS list-
Ordered list (ol)
Unordered list (ul)
There are three important style property or ordered and unordered list-
list-style-type
list-style-position
list-style-image
List-style-type
Example -
<!DOCTYPE html>
<html>
<title>list-style-type</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:uppercase roman;}
ol.d {list-style-type:lowercase roman;}
</style>
</head>
<body>
<h2>The list-style-type property</h2>
<p>Example of Unordered list</p>
<ul class=”a”>
<li>Coffee
<li>Tea</li>
</ul>
<ul class=”b”>
<li>Coffee
<li>Tea</li>
</ul>
<p>Example of Unordered list</p>
<ol class=”c”>
<li>Coffee
<li>Tea</li>
</ol>
<ol class=”d”>
<li>Coffee
<li>Tea</li>
</ol>
</body>
</html>
List-style-position
Example -
<!DOCTYPE html>
<html>
<head>
<title>list-style-position</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;
list-style-position:inside;}
ol.c {list-style-type:upperroman;}
ol.d {list-style-type:outside;}
</style>
</head>
<body>
<h2>The list-style-type property</h2>
<p>Example of Unordered list</p>
<ul class=”a”>
<li>Coffee
<li>Tea</li>
</ul>
<ul class=”b”>
<li>Coffee
<li>Tea</li>
</ul>
<p>Example of ordered list</p>
<ol class=”c”>
<li>Coffee
<li>Tea</li>
</ol>
<ol class=”d”>
<li>Coffee
<li>Tea</li>
</ol>
</body>
</html>
List-type-image
Example -
<!DOCTYPE html>
<html>
<head>
<title>list-type-image</title>
<style>
ul {list-style-image:url(“photo.jpg”);}
</style>
</head>
<body>
<h2>The list-style-image property</h2>
<p>The list-style-image property specifies an image as the item marker:</p>
<ul>
<li>Coffee
<li>Tea</li>
</ul>
</body>
</html>
Table border -
table, th, td {border:2px solid blue;}
Full-width table -
table {width:100%;}
Collapse table border -
table {border-collapse:collapse;}
table width and height -
table {width:100%;
th {height:70px;}
CSS table alignment -
Horizontal alignment
td {text-alignment:left/center/right;}
Vertical alignment
td {height:70px;
text-align:top/middle/bottom;}
6. Table padding -
th, td {padding:15px;
text-align:center;}
td {border-bottom:1px;}
tr:hover {background-color:green;}
8. Stripped table - For zebra stripped tables use the nth child selector and add a background color to all even or odd table rows.
tr:nth-child(even/odd) {background-color:blue;}
9. Controling the table layout – The CSS table layout define the alogorithem to be used to layout the table cells, rows, and column. This property takes one of two values.
Auto – The width of the table and it cells are adjusted to fit the content. This is default.
Fixed – The horizontal layout of the table does not depend on the content of the cells, it depends on the table’s width, the width of the columns, and borders or cell spacing.
Example -
<!DOCTYPE>
<html>
<head>
<title>Controlling the table layout</title>
<style>
table {width:250px;
border-collapse:collapse;}
table,tr,th,td {border:1px solid black;}
.auto {table-layout:auto;}
.fixed {table-layout:fixed;}
td {width:50%;}
</style>
</head>
<body>
<h3>Different table layout</h3>
<table class=”auto”>
<caption>Auto layout</caption>
<tr>
<th>Name</th>
<td>Ram Sharma</td>
</tr>
<tr>
<th<E-mail</th>
<td>ramsharma55@gmail.com</td>
</tr>
</table>
<table>
<table class=”fixed”>
<caption>Fixed layout</caption>
<tr>
<th>Name</th>
<td>Vivek sharma</td>
</tr>
<tr>
<th>E-mail</th>
<td>viveksharma34@gmail.com</td>
</tr>
</table>
</body>
</html>
9. Empty cells – The empty-cells CSS property controls the borders and background of cells that have no visible content in a table using separate borders model. The empty cells property contains three values: show. Hide or inherit.
Example -
<!DOCTYPE html>
<html>
<head>
<title>Empty cells</title>
<style>
table {width:350px;
border-collapse:separate:}
table, th, td {border:1px solid black;}
table.empty-show {empty-cells:show;}
table.empty-hide {empty-cells:hide;}
</style>
</head>
<body>
<h3>Table with Empty cells</h3>
<table class=”empty-show”>
<tr>
<th>Name</th>
<td>Shyam Yadav</td>
</tr>
<tr>
<th>E-mail</th>
<td></td>
</tr>
</table>
<br>
<h3>Table with Hidden Empty cells</h3>
<table class=”empty-hide”>
<tr>
<th>Name</th>
<td>John Peter</td>
</tr>
<tr>
<th>E-mail</th>
<td></td>
</tr>
</table>
</body>
</html>
11. Caption for table – The caption property sets the caption for the table. It is the name of the table.
Syntax -
Caption-side: Bottom – To set the caption at the bottom of the table.
Caption-side: Top – To set the caption at the top of the table.
Caption-side: Inherit
Example -
<!DOCTYPE>
<html>
<head>
<title>Caption of the table</title>
<style>
table, td,th {border:2px solid grey;}
caption {caption-side:bottom;}
</style>
</head>
<body>
<table>
<caption><strong>Table 1:</strong>Students Marks List</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<th>1</th>
<th>Akash</th>
<th>Rai</th>
</tr>
<tr>
<th>2</th>
<th>Naman</th>
<th>Singh</th>
</tr>
<tr>
<th>3</th>
<th>Neha</th>
<th>Sharma</th>
</tr>
</table>
</body>
</html>
Set font-size with pixel
e.g. p {font-size:20px;}
Set font-size with em
e.g. p {font-size:1.20em;}
To allow users to resize the text (in the browser menu), many developers use em instead of pixel.
First 1em is equal to the current font-size. The default text size in browsers in 16px. So the default size 1em=16px.
The size can be calculated from px to em using this formula -
pixels/16=em
e.g. - h1 {font-size:2.5em;}
16 x 2.5 = 4px
The text size can be set with a vw unit, which means the viewport width.
That way the text size will follow the size of the browser window.
Resize the browser window size in 1vw=1% of the viewport width. If the viewport is 50cm wide. 1vw=0.5cm.
Example -
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Gallery</title>
<style>
div.gallery {margin:5px;
border:1px solid black;
float:left;
width:280px;}
div.gallery:hover {border:2px solid blue;}
div.gallery-image {width:100%;
height:auto;231
div.disc {padding:15px;
text-align:center;}
</style>
</head>
<body>
<div class=”gallery”>
<a href=”URL” target=”_blank”>
<img src=”URL” width=”600px” height=”600px”}
</a>
<div class=”disc”>
Add a discription of the image here.
</div>
<a href=”URL” target=”_blank”>
<img src=”URL” width=”600px” height=”600px”>
</a>
<div class=”disc”>
Add a description of the image here.
</div>
</div>
</body>
</html>