CSS Examples
File Name: inlinecss.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
</head>
<body>
<h1 style ="color: blue;">Hello World!</h1>
</body>
</html>
Notes: Inline style rules are applied in html opening tag. These rules are applied to single element only. Using the inline styles are generally considered as a bad practice.
File Name: internalcss.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
h1{
background-color: blue;
color: yellow;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Notes: Internal style rules are applied in html head section, using <style> tag. These rules are applied to single web page.
File Name: externalcss.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
stylesheet.css
h1{
background-color: blue;
color: yellow;
}
Notes: An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.
File Name: universalSelector.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
*{
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Paragraph element</p>
</body>
</html>
Notes: The universal selector is denoted by an asterisk (*). It matches all the elements on the HTML page. This selector is generally used to remove the default margins and padding etc.
File Name: elemetTypeSelector.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
h1{
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: An element type selector matches all the element type in the document and applies the style rules inside the selector.
File Name: id.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
#info{
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1 id= "info">Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: The id selector is used to apply style rules for a single or unique element in the web page. It is denoted by hash sign(#) followed by the id value.
File Name: class.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
.info{
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1 class = "info">Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: The class selectors can be used to select any HTML element that has a class attribute. All the elements having that class will be formatted according to the defined rule. The class selector is defined with a period sign (.) immediately followed by the class value.
File Name: color.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
h1{
color: blue;
font-size: 24px;
}
h2{
color: rgb(50,50,200);
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
</body>
</html>
Notes: The color property defines the text color of an element.
File Name: bgcolor.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
h1{
color: blue;
background-color:yellow;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: The color of an element’s background is set with the background-color property. By default, its value is set to transparent.
File Name: bgimage.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
body{
background-image: url("gradient.jpg");
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: Background-image specifies an image to use as a background with the url function.
File Name: htmlbgcolor.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-color:rgb(11,176,222);
}
body{
background-color:rgb(187,228,224);
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
File Name: htmlbgimage.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-image:url(gradient.jpg);
}
body{
background-image:url(water.jpg);
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
File Name: padding.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-image:url(gradient.jpg);
}
body{
background-image:url(water.jpg);
padding:30px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: Padding is the space between an element’s content and its border.
File Name: margin.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-image:url(gradient.jpg);
}
body{
background-image:url(water.jpg);
padding:30px;
margin:50px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: The margin is the space around an element’s border and is set using the margin properties.
File Name: border.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-image:url(gradient.jpg);
}
body{
background-image:url(water.jpg);
padding:30px;
margin:50px;
border:5px solid yellow;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: The HTML border attribute is used to set visible border to most HTML elements.
File Name: radius.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-image:url(gradient.jpg);
}
body{
background-image:url(water.jpg);
padding:30px;
margin:50px;
border:5px solid yellow;
border-radius: 25px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag.
File Name: gradient.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
html{
background-image: linear-gradient(white, yellow, black);
}
body{
background-image:url(water.jpg);
padding:30px;
margin:50px;
border:5px solid yellow;
border-radius: 25px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: A gradient is a color fill that blends smoothly from one color to another.
File Name: font.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
h1{
font-family: "Times New Roman", times, serif;
font-size: 34px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: The font properties can be used for styling the font of the text, font size and boldness, managing variant, and so on.
File Name: text.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
h1{
text-align:center;
color:red;
text-shadow: 2px 2px 2px black;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively.
File Name: link.html View
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Examples </title>
<style>
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited { /* visited link */
color: #ff00ff;
}
a:hover { /* mouse over link */
color: #00ff00;
border-bottom: none;
}
a:active { /* active link */
color: #00ffff;
}
</style>
</head>
<body>
<h1><a href="#">Hello World!</a></h1>
<h2>Hello World!</h2>
<p>Paragraph element</p>
</body>
</html>
Notes: a:link — define styles for normal or unvisited links.
a:visited — define styles for links that the user has already visited.
a:hover — define styles for a link when the user place the mouse pointer over it.
a:active — define styles for links when they are being clicked.