CSS : Cascading Style Sheet
<style> </style>
Syntax:
<style type=”text/css”>
Tag for example <h1> <p> <bold> <div> <table>
{
Attribute : value;
Attribute : value;
}
</style>
Font-family: Times new roman, vardanana, sans serif;
Font-style:bold;
Color : red;
Font-weight : bold;
Font-size : 12pt;
In css id defined by #
And class defined by .
The Class Selector
<!DOCTYPE html>
<html>
<head>
<title>Class selector</title>
<style type="text/css">
h1.c1
background-color: red;
text-align: center;
h1.c2
background-color: cyan;
text-align: right;
</style>
</head>
<body>
<h1 class="c1">I love html</h1>
<h1 class="c2">I love CSS</h1>
<h2>I love web designing too</h2>
</body>
</html>
CSS – Inclusion
There are three ways to associate styles with your HTML document. Most
commonly used methods are inline CSS and External CSS.
Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style type="text/css">
p{
background-color: lightblue;
text-align: center;
text-color: yellow;
</style>
</head>
<body>
<p>There are three ways to associate styles with your HTML document. Most commonly used
methods are inline
CSS and External CSS.
</p>
</body>
</html>
Inline CSS
Inline stylesheet is used to apply unique style for single element by adding
style attribute with the element.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="background-color: orange; text-align: center;">
There are three ways to associate styles with your HTML document. Most commonly used
methods are inline CSS and External CSS.
</p>
</body>
</html>
External CSS
CSS file is stored separately than html document and in <head> section using
<link> tag CSS file can be included with html document.
CSS File – Named – External.css
HTML document to attach to CSS file:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<p>There are three ways to associate styles with your HTML<br>
document. Most commonly used methods are inline CSS and <br>
external CSS.
</p>
</body>
</html>
CSS Colors
CSS uses color values to specify a color. Typically, these are used to set a color
either for the foreground of an element (i.e., its text) or else for the
background of the element. They can also be used to affect the color of
borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the
possible formats –
Format Syntax Example
Hex code #RRGGBB p{color: #FF0000;}
Short Hex code #RGB p{color:#6A7;}
RGB% rgb(rrr%, ggg%, bbb%) p{color:rgb(50%, 50%, 50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
Keyword aqua, black, etc. p{color:teal;}
<!DOCTYPE html>
<html>
<head>
<title>CSS Colors</title>
<style type="text/css">
h1 {background-color: blue;}
h2 {background-color: rgb(150,150,0);}
h3 {background-color: #ff0000;}
</style>
</head>
<body>
<h1>I love HTML</h1>
<h2>I love HTML</h2>
<h3>I love HTML</h3>
</body>
</html>
CSS – Background
Following are background properties of an element –
• Background-color
• Background-image
• Background-repeat
<!DOCTYPE html>
<html>
<head>
<title>CSS background</title>
<style type="text/css">
body {
background-image: url(bpccs.jpg);
background-color: cyan;
d-repeat: no-repeat;
</style>
</head>
<body>
</body>
</html>
CSS Fonts
• The font-family property is used to change the face of a font.
• The font-style property is used to make a font italic.
• The font-weight property is used to increase or decrease how bold or
light a font appears.
• The font-size property is used to increase or decrease the size of a font.
• The color property is used to specify color of the text.
<!DOCTYPE html>
<html>
<head>
<title>CSS Fonts</title>
</head>
<body>
<p style="font-family: verdana, garamond, serif;">
This text is rendered in either georgia, garamond, or the default serif font<br>
depending on which font you have at your system.<br>
</p>
<p style="font-style: italic;">
This text will be rendered in italic style.
</p>
<p style="font-weight: bold;"> This font is bold.</p>
<p style="font-weight: bolder;">This font is bolder.</p>
<p style="font-weight: 500;"> This font is 500 weight.</p>
</body>
</html>
CSS Text
• The color property is used to set the color of a text.
• The letter-spacing property is used to add or subtract space between
the letters that make up a word.
• The word-spacing property is used to add or subtract space between the
words of a sentence.
• The text-align property is used to align the text of a document.
• The text-decoration property is used to underline, overline, and
strikethrough text.
• The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
• The vertical-align property is used to align the text vertically.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text</title>
</head>
<body>
<p style="color: red;">
This text will be written in red.
</p>
<p style="letter-spacing: 5px">
This text will have space between letters.
</p>
<p style="word-spacing: 10px">
This text will have space between words.
</p>
<p style="text-align: right;">
This will be right aligned.
</p>
<p style="text-decoration: underline;">
This text will be underlined.
</p>
<p style="text-transform: capitalize;">
This will be capitalized.
</p>
</body>
</html>
CSS – Working with images
• The border property is used to set the width of an image border.
• The height property is used to set the height of an image.
• The width property is used to set the width of an image.
<!DOCTYPE html>
<html>
<head>
<title>CSS Images</title>
</head>
<body>
<img src="C:\Users\Aditya Upadhyay\Pictures\bpccs.jpg" style="border:0px;"><br>
<img src="C:\Users\Aditya Upadhyay\Pictures\bpccs.jpg" style="border:3px dashed
red;"><br>
<img src="C:\Users\Aditya Upadhyay\Pictures\bpccs.jpg" style="height: 10%; width:
10%;"><br>
</body>
</html>
CSS - Links
• The :link signifies unvisited hyperlinks
• The :visited signifies visited hyperlinks
• The :hover signifies an element that currently has the user’s
mouse pointer hovering over it.
• The :active signifies an element on which the used is currently
clicking.
<!DOCTYPE html>
<html>
<head>
<title>CSS Links</title>
<style type="text/css">
a:link {color: black;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: gray;}
</style>
</head>
<body>
<a
href="https://www.google.com/webhp?hl=en&sa=X&ved=0ahUKEwj6zdSisZTrAhV54HMBHdaLDv4Q
PAgH">Link to google search engine.</a>
</body>
</html>
CSS - Tables
• The border-collapse specifies whether the browser should control
the appearance of the adjacent borders that touch each other or
whether each cell should maintain its style.
• The border-spacing specifies the width that should appear between
table cells.
• The caption-side captions are presented in the <caption> element. By
default, these are rendered above the table in the document. You use
the caption-side property to control the placement of the table
caption.
• The empty-cells specifies whether the border should be shown if a
cell is empty.
• The table-layout allows browsers to speed up layout of a table by
using the first width properties it comes across for the rest of a
column rather than having to load the whole table before rendering
it.
<!DOCTYPE html>
<html>
<head>
<title>CSS tables</title>
<style type="text/css">
table.one {border-collapse: collapse;}
table.two {border-collapse: separate;}
td.a {
border-style: dotted;
border-width: 3px;
border-color: pink;
padding: 10px;
td.b {
border-style: solid;
border-width: 3px;
border-color: green;
padding:10px;
</style>
</head>
<body>
<table class="one">
<caption>Collapse border example</caption>
<tr><td class="a"> Cell A Collapse Example</td>
<td class="a"> Cell C Collapse Example</td>
</tr>
<tr><td class="b"> Cell B Collapse Example</td>
<td class="b"> Cell D Collapse Example</td>
</tr>
</table><br>
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td>
<td class="a"> Cell A Separate Example</td>
</tr>
<tr><td class="b"> Cell B Separate Example</td>
<td class="b"> Cell B Separate Example</td>
</tr>
</table>
</body>
</html>
CSS - Borders
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be solid, dashed
line, double line, or one of the other possible values.
• The border-width specifies the width of a border.
<!DOCTYPE html>
<html>
<head>
<title>CSS borders</title>
<style type="text/css">
p{
border: 1 px solid;
border-color: blue;
border-style: groove;
border-width: 100;
border-bottom-color: red;
border-left-color: cyan;
}
</style>
</head>
<body>
<p class="example1">
This example is showing all borders in different colors.
</p>
</body>
</html>
CSS Lists
• The list-style-type allows you to control the shape or appearance of
the marker.
• The list-style-position specifies whether a long point that wraps to a
second line should align with the first line or start underneath the
start of the marker.
• The list-style-image specifies an image for the marker rather than a
bullet point or number.
• The list-style serves as shorthand for the preceding properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
</head>
<body>
<ul style="list-style-type: circle; list-style-position: inside;">
<li>Maths</li>
<li>Social Sciences</li>
<li>Physics</li>
</ul>
<ul style="list-style-type: square;">
<li>Maths</li>
<li>Social Sciences</li>
<li>Physics</li>
</ul>
<ol style="list-style-type: decimal; list-style-position: inside;">
<li>Maths</li>
<li>Social Sciences</li>
<li>Physics</li>
</ol>
</body>
</html>
CSS – Paddings
• The padding-bottom specifies the bottom padding of an element.
• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
• The padding serves as shorthand for the preceding properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
</head>
<body>
<p style="padding-bottom: 150px; border:3px solid black;">
This is a paragraph with a specified bottom padding.
</p>
<p style="padding-top: 5%; border: 1px solid black;">
This is another paragraph with a specified bottom padding in percent.
</p>
</body>
</html>
CSS - Margins
• The margin specifies a shorthand property for setting the margin
properties in one declaration.
• The margin-bottom specifies the bottom margin of an element.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.
<!DOCTYPE html>
<html>
<head>
<title>CSS margins</title>
</head>
<body>
<p style="margin: 15px; border:2px solid red;">
all four margins will be 15px.
</p>
<p style="margin: 10px 2%; border:3px solid pink;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style="margin: 10px 2% -10px; border: 1px solid green;">
Top margin will be 10px, left and right margin will be 2%
of the total width of the document, bottom margin will be -10px.
</p>
<p style="margin: 10px 2% -10px auto; border: 3px solid maroon;">
Top margin will be 10px, right margin will be 2% of the total width of the document,
bottom margin will be -10px, left margin
will be set by the browser.
</p>
<p style="margin-bottom: 100px; margin-top: 50px; margin-left: 20px; margin-right: 40px;
border: 1px solid yellow;">
The list-style-type allows you to control the shape or appearance of the marker.<br>
The list-style-position specifies whether a long point that wraps to a second line
should align with the first line<br>
or start underneath the start of the marker.<br>
The list-style-image specifies an image for the marker rather than a bullet point or
number.<br>
The list-style serves as shorthand for the preceding properties.<br>
The marker-offset specifies the distance between a marker and the text in the
list.<br>
Example<br>
CSS - Paddings<br>
The padding-bottom specifies the bottom padding of an element.<br>
The padding-top specifies the top padding of an element<br>
The padding-right specifies the right padding of an element<br>
The padding serves as shorthand for the preceding properties.
</p>
</body>
</html>
CSS3 Shadow Effects
With CSS3 you can add shadow to text and to elements.
CSS3 Text Shadow
The CSS3 text-shadow property applies shadow to text.
In it’s simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px).
<!DOCTYPE html>
<html>
<head>
<title>Text shadow</title>
<style type="text/css">
h1 {
text-shadow: 2px 2px;
</style>
</head>
<body>
<h1>Text Shadow effect!</h1>
</body>
</html>
CSS3 Text
• Text-overflow
• Word-wrap
• Word-break
CSS3 text overflow
The CSS3 text-overflow property specifies how overflowed content that is
not displayed should be signaled to the user.
It can be clipped:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 text</title>
<style type="text/css">
p.test1{
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
p.test2{
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
</style>
</head>
<body>
<p>The following two paragraphs contain a long text that will not fit in the box</p>
<p>text-overflow:clip</p>
<p class="test1"> This is some long text that will not fit in the box.</p>
<p>text-overflow: ellipsis</p>
<p class="test2"> This is some long text that will not fit in the box.</p>
</body>
</html>
CSS3 2D Transforms
CSS3 transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size and
position.
Mouse over the elements below to see the difference between 2D and 3D
transformation.
• Translate()
• Rotate()
• Scale()
• skewX()
• skewY()
• matrix()
<!DOCTYPE html>
<html>
<head>
<title>CSS 2D transforms</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
background-color: yellow;
border:1px solid black;
transform: translate(50px, 100px);
</style>
</head>
<body>
<div>
The translate() method moves an element from its current position. This div element is
moved 50 pixels to
the right, and 100 pixels down from its current position.
</div>
</body>
</html>
CSS3 3D Transforms
• rotateX()
• rotateY()
• rotateZ()
<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D transform</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
div#myDIV{
transform: rotateX(150deg);
</style>
</head>
<body>
<div>
This is a normal div element.
</div>
<div id="myDIV">
The rotateX() method rotates an element around its X-axis at a given degree.
This div element is rotated 150 degrees.
</div>
</body>
</html>
CSS3 Rounded Corners
With the CSS3 border-radius property, you can give any element “rounded corners”.
1. Rounded corners with specific background color.
2. Rounded corners with an element with a border.
3. Rounded corners for an element with a background image.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Rounded corners</title>
<style type="text/css">
#rcorners1{
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2{
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p id="rcorners1"> Rounded corners!</p>
<p id="rcorners2"> Rounded corners!</p>
</body>
</html>
CSS Box Sizing
The CSS3 box-sizing property allows us to include the padding and border in an element’s
total width and height.
Without the CSS3 box sizing property.
By default, the width and height of an element is calculated like this:
Width + padding + border = actual width of the element.
Height + padding + border = actual height of the element.
This means that when you set the width/height of an element, the
element often appears bigger than you have set (because the element’s
border and padding are added to the element’s specified width/ height).
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Box sizing</title>
<style type="text/css">
.div1{
width: 300px;
height: 100px;
border: 1px solid blue;
.div2{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
</style>
</head>
<body>
<div class="div1">This div is smaller (width is 300px and height is 100px)</div>
<br>
<div class="div2">This div is bigger (width is 300px and height is 100px)</div>
</body>
</html>
With the CSS3 box-sizing property
The CSS3 box-sizing property allows us to include the padding and
border in an element’s total width and height.
If you set box-sizing: border-box; on an element padding and border are
included in the width and height:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 boxsizing</title>
<style type="text/css">
.div1{
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
.div2{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
</style>
</head>
<body>
<div class="div1">Both divs are of the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
CSS Layout – The Position Property
The position property specifies the type of positioning method used for an
element (static, relative, fixed or absolute).
The position Property
Elements are then positioned using the top, bottom, left and right properties.
However, these properties will not work unless the position property is set
first.
They also work differently depending on the position value.
Position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page;
This <div> element has position; static;
<!DOCTYPE html>
<html>
<head>
<title>Position property</title>
<style type="text/css">
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way;<br>
it is always positioned according to the normal flow of the page.<br>
</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
Position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.
The <div> element has position: relative;
<!DOCTYPE html>
<html>
<head>
<title>Relative position</title>
<style type="text/css">
div.relative{
position: relative;
left: 30px;
border: 3px solid #73AD21;
</style>
</head>
<body>
<h2>position: relative</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
The div element has position: relative;
</div>
</body>
</html>
Position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it
uses the document body, and moves along with page scrolling.
Note: A “positioned” element is one whose position is anything except static.
<!DOCTYPE html>
<html>
<head>
<title>Absolute position</title>
<style type="text/css">
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
div.absolute
position: absolute;
top: 80px;
right: 0px;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
</style>
</head>
<body>
<h2>position: absolute</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned<br>
ancestor (instead of positioned relative to the viewport, like fixed)</p>
<div class="relative">This div element has position: relative;</div>
<div class="absolute">This div element has position: absolute;</div>
</body>
</html>
