• CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Inline CSS

<!DOCTYPE html>
<html>
<head>
<!--- CSS file will be added here when inline css  -->
</head>
<body>
<p>This is a Paragraph.</p>
<p style="color:red;">Paragraph with Inline CSS</p>
</body>
</html>

This is a Paragraph.

Paragraph with Inline CSS

Internal CSS

<!DOCTYPE html>
<html>
<head>
<!-- Inline CSS has been added here -->
<style>
p
{
   color: red;
   background: yellow;
}
</style>
</head>
<body>
<h1>This is a H1 Heading</h1>
<p>Paragraph with Internal css</p>
</body>
</html>

This is a H1 Heading

Paragraph with Internal css

External CSS

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>This is a H1 Heading</h1>
<p>This is a Paragraph which has an external css </p>
</body>
</html>

Syntax & Selectors

  • A CSS rule-set consists of a selector and a declaration block
  • The selector points to the HTML element you want to style
  • The declaration block contains one or more declarations separated by semicolons
  • Each declaration includes a CSS property name and a value, separated by a colon

Background

body {
background-color: lightblue;
background-image : url("image.jpg");
background-repeat: repeat;
<!-- background-repeat: repeat/no-repeat/repeat-x/repeat-y; -->
background-attachment: fixed;
<!-- background-attachment: scroll|fixed|local|initial|inherit; -->
background-position:center top;
<!--
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:x% y%;
background-position:Xpx Ypx;
background-position:inherit;
-->
}

Background – Shorthand property Values order

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
body {
background: lightblue url("image.jpg") repeat center top;
}

Borders

border-style | border-width | border-color

<!DOCTYPE html>
<html>
<head>
<style>
p.dashed {border-style: dashed; border-width: 3px;}
p.solid {border-style: solid; border-color: green;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<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="mix">A mixed border.</p>
</body>
</html>

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A mixed border.

Class

<!DOCTYPE html>
<html>
<head>
<style>
.apple{color:red;}
.grape{color:blue;}
.orange{text-align:center;}
</style>
</head>
<body>
<p class="apple">Paragraph with .apple class</p>
<p class="grape">Paragraph with .grape class</p>
<p class="grape orange">Paragraph with .grape and .orange class</p>
<p>No class so default color</p>
</body>
</html>

Paragraph with .apple class

Paragraph with .grape class

Paragraph with .grape and .orange class

No class so default color

ID

<!DOCTYPE html>
<html>
<head>
<style>
#dhaka{color:green; text-transform : uppercase;}
#khulna{color:orange; text-align:center; }
</style>
</head>
<body>
<p id="dhaka">Paragraph with #dhaka ID</p>
<p id="khulna">Paragraph with #khulna ID</p>
</body>
</html>

Paragraph with #dhaka ID

Paragraph with #khulna ID

Margins

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1{
    border: 1px solid black;
    margin-top: 25px;
    margin-right: 50px;    
    margin-bottom: 75px;
    margin-left: 100px;
    background-color: yellow;
}
</style>
</head>
<body>
<div class="ex1">This div element has margins</div>
</body>
</html>

Margin – Shorthand Property Values Order

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Values of the property

  • auto – the browser calculates the margin
  • length – specifies a margin in px, pt, cm, etc.
  • % – specifies a margin in % of the width of the containing element
  • inherit – specifies that the margin should be inherited from the parent element
p {
    margin: 25px 50px 75px 100px;
}
This div element has margins

If the margin property has four values:

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

If the margin property has two values:

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

If the margin property has one value:

  • margin: 25px;
    • all four margins are 25px

Padding

<!DOCTYPE html>
<html>
<head>
<style>
div.ex2 {
    border: 1px solid black;
    padding: 25px 25px 25px 25px;
}
</style>
</head>
<body>
<div class="ex2">This div element has paddings</div><br>
</body>
</html>
This div element has paddings

Box Model

<!DOCTYPE html>
<html>
<head>
<style>
div.ex3{
    background-color: lightgrey;
    width: 400px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>
<div class="ex3">CSS BOX Model</div>
</body>
</html>
CSS BOX Model

Text

Text Color

h1 {
    color: green;
}

Text Alignment

h1 {
    text-align: center;
}
h2 {
    text-align: left;
}
h3 {
    text-align: right;
}
h4 {
    text-align: justify;
}

Text Decoration

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

h4 {
    text-decoration: none;
}

Text Transformation

h1 {
    text-transform: uppercase;
}

h2 {
    text-transform: lowercase;
}

h3 {
    text-transform: capitalize;
}

Text Identation

h1 {
    text-indent: 50px;
}

Letter Spacing

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

Line Height

h1 {
    line-height: 0.8;
}

h2 {
    line-height: 1.8;
}

Text Direction

h1 {
    direction: rtl;
}

Text Shadow

h1 {
    text-shadow: 3px 2px red;
}

Word Spacing

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Example

<!DOCTYPE html>
<html>
<head>
<style>
.ex4 {
	color: blue;
    text-align: center;
	text-decoration: overline;
	text-transform: uppercase;
	text-indent: 50px;
	letter-spacing: 3px;
	line-height: 0.8;
	direction: rtl;
	word-spacing: 10px;
}
</style>
</head>
<body>
<p class="ex4">Lots of properties in this class</p>
</body>
</html>

Lots of properties in this class

Fonts

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {font-family: "Times New Roman", Times, serif;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
h1 {font-size: 40px;}
p.light {font-weight: lighter;}
p.thick {font-weight: bold;}
p.thicker {font-weight: 900;}
p.small {font-variant: small-caps;}
</style>
</head>
<body>
<p class="serif">Paragraph with Times New Roman font.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
<h1>This is heading 1</h1>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
<p class="small">This is a paragraph.</p>
</body>
</html>

Paragraph with Times New Roman font.

This is a paragraph in italic style.

This is a paragraph in oblique style.

This is heading 1

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Icons

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#">
</head>
<body>
<p>Some Font Awesome icons:</p>
<i class="fa fa-user"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-phone"></i>
<i class="fa fa-map"></i>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fa fa-user" style="font-size:24px;"></i>
<i class="fa fa-phone" style="font-size:24px;color:lightblue;"></i>
</body>
</html>

Some Font Awesome icons:


Styled Font Awesome icons (size and color):

Font Awesome Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Bootstrap Icons

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Google Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Links

Styling Links

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
</style>
</head>
<body>
<a href="#" target="_blank">Linkk</a>
</body>
</html>

Text Decoration

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
</style>
</head>
<body>
<a href="#" target="_blank">Link</a>
</body>
</html>

Background Color

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 
</style>
</head>
<body>
<a href="#" target="_blank">Link</a>
</body>
</html>

List

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>
  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Table

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {border: 1px solid green}
table {border-collapse: collapse; width: 100%;}
th, td {padding: 15px; text-align: center;}
th {background-color: #4CAF50; color: white;}
</style>
</head>
<body>
<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>
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

Display

<!DOCTYPE html>
<html>
<head>
<style>
li {display: none;}
<!-- display: inline/block/none; -->
</style>
</head>
<body>
<ul>
  <li><a href="#" target="_blank">HTML</a></li>
  <li><a href="#" target="_blank">CSS</a></li>
  <li><a href="#" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>

Position

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 
div.absolute {
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
This div element has position: relative;
This div element has position: absolute;

Overflow

<!DOCTYPE html>
<html>
<head>
<style>
div.ex5 {
    background-color: lightblue;
    width: 500px;
    height: 50px;
    border: 1px dotted black;
    overflow-x: hidden;
    overflow-y: scroll;
<!-- overflow: hidden/scroll/auto; -->
}
</style>
</head>
<body>
<div class="ex5">overflow property for control of the layout.</div>
</body>
</html>
overflow property for control of the layout.