Hope you did well on your exam!

If this site helped, please leave feedback, check out the project on GitHub, or follow me on GitHub.

F4: CSS code examples

Code examples from the course Google Drive for the CSS lecture. View the source and run live previews where available.

Back

Element selector — styling paragraphs

css_1.html

HTML18 lines

<!DOCTYPE html>

<html>

<head>

<style>

p {

text-align: center;

color: green;

}

</style>

</head>

<body>

<h1> This is my header</h1>

<p id="para1">Hello World! This is a paragraph</p>

<p id="para2">This is a paragraph</p>

</body>

</html>

Class selector — .center

css_2.html

HTML25 lines

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="myclass">Red and center-aligned heading</h1>

<h1 id="h1blue" class="center"> This will not be red </h1>

<h1>This is the third h1</h1>

<h1 class="center">This is the third h1</h1>

<p class="center">Red and center-aligned paragraph.</p>

<div class="blue">This is a division</div>

</body>

</html>

Specificity — p.center vs .center

css_3.html

HTML24 lines

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

color:red;

text-align:center;

}

.center {

color: blue;

text-align:right;

}

</style>

</head>

<body>

<p>This is the first paragraph</p>

<p class="center">This is the second paragraph</p>

<h1 class="center"> This is a heading</h1>

</body>

</html>

Multiple classes — .center and .large

css_4.html

HTML25 lines

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

.large {

font-size: 300%;

}

</style>

</head>

<body>

<h1 class="center">This is a heading</h1>

<p class="large">This is the first paragaraph</p>

<p class="center large">This is the second paragraph</p>

</body>

</html>

Universal and ID selectors

css_5.html

HTML24 lines

<!DOCTYPE html>

<html>

<head>

<style>

* {

text-align: center;

background-color: white;

color: green;

}

#para1{

color:blue;

}

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Grouped selectors — h1, h2, p

css_6.html

HTML25 lines

<!DOCTYPE html>

<html>

<head>

<style>

h1{

text-align:left;

background-color: blue;

}

h1, h2, p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<h3> This shouldn't be styled </h3>

<p>This is a paragraph.</p>

</body>

</html>

General sibling combinator (div ~ p)

css_7.html

HTML32 lines

<!DOCTYPE html>

<html>

<head>

<style>

div~p{

background-color: yellow;

}

</style>

</head>

<body>

<h2>Descendant Selector</h2>

<p>Paragraph 0 - The descendant selector matches all elements that are descendants of a specified element.</p>

<div>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<section>

<p>Paragraph 3</p>

</section>

</div>

<p>Paragraph 4</p>

<p>Paragraph 5</p>

<h1>this is the heading</h1>

New heading

<div>mydiv</div>

<p>Paragraph 6</p>

<p>Paragraph 7</p>

</body>

</html>

Link pseudo-classes (:link, :visited, :hover, :active)

css_8.html

HTML39 lines

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

}

/* visited link */

a:visited {

color: green;

}

/* mouse over link */

a:hover {

color: yellow;

}

/* selected link */

a:active {

color: blue;

}

p::first-line{

color: rgb(255, 55, 0);

font-weight: bold;

}

</style>

</head>

<body>

<h2>CSS Links</h2>

<p><b><a href="#" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

<a href="#">Testing anchor </a>

</body>

</html>

:hover pseudo-class

css_9.html

HTML28 lines

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: green;

color: white;

padding: 25px;

text-align: center;

}

div:hover {

background-color: blue;

}

div.myclass:hover{

background-color:brown;

}

</style>

</head>

<body>

<p>Mouse over the div element below to change its background color:</p>

<div class="myclass">This is a new div</div>

 

<div>Mouse Over Me</div>

</body>

</html>

Reveal child on parent hover

css_10.html

HTML24 lines

<!DOCTYPE html>

<html>

<head>

<style>

p {

display: none;

background-color: yellow;

padding: 20px;

}

div:hover p {

display: block;

}

</style>

</head>

<body>

<div>Hover over me to show the p element

<p>Tada! Here I am!</p>

</div>

<div>hello this is another div</div>

</body>

</html>

::first-line pseudo-element

css_11.html

HTML19 lines

<!DOCTYPE html>

<html>

<head>

<style>

p::first-line {

color: rgb(72, 0, 255);

font-variant: small-caps;

}

</style>

</head>

<body>

<p>You can use the ::first-line pseudo-element to add a special

effect to the first line of a text. Some more text.

And even more, and more, and more, and more, and more,

and more, and more, and more, and more, and more, and more, and more.</p>

</body>

</html>

Attribute selector and box model

css_12.html

HTML51 lines

<!DOCTYPE html>

<html>

<head>

<style>

a[target] {

background-color: yellow;

color:red;

}

h1{

border:2px solid Tomato;

width:50%;

}

h2{

border:5px dotted Tomato;

margin-top:50px;

margin-right:50px;

margin-left:50px;

}

h3{

border:10px dashed Tomato;

margin-top:20px;

padding-top:20px;

padding-bottom: 100px;

}

p[title*=fl]{

background-color: red;

}

</style>

</head>

<body>

<h2>CSS [attribute] Selector</h2>

<p title="flower dd .. sdf">The links with a target attribute gets a yellow background:</p>

<a href="https://www.google.com">google.com</a>

<a href="http://www.disney.com" target="_blank">disney.com</a>

<a href="http://www..wikipedia.org" target="_top">wikipedia.org</a>

<h1>Hello World</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

</body>

</html>

Responsive column layout

css_13.html

HTML141 lines

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: table;

}

[class*="col-"] {

float: left;

padding: 15px;

}

html {

font-family: "Lucida Sans", sans-serif;

}

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.menu li:hover {

background-color: #0099cc;

}

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

}

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) {

/* For tablets: */

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

</style>

</head>

<body>

<div class="header">

<h1>Chania</h1>

</div>

<div class="row">

<div class="col-3 col-s-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-6 col-s-9">

<h1>The City</h1>

    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

</div>

<div class="col-3 col-s-12">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

<div class="footer">

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

Multi-stylesheet demo (W3Schools)

css_demo.html

HTML445 lines

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style>/* Stylesheet 1: */

body {

font: 100% Lucida Sans, Verdana;

margin: 20px;

line-height: 26px;

}

.container {

xmin-width: 900px;

}

.wrapper {

position: relative;

overflow: auto;

}

#top, #sidebar, #bottom, .menuitem {

border-radius: 4px;

margin: 4px;

}

#top {

background-color: #4CAF50;

color: #ffffff;

padding: 15px;

}

#menubar {

width: 200px;

float: left

}

#main {

padding: 10px;

margin: 0 210px;

}

#sidebar {

background-color: #32a4e7;

color: #ffffff;

padding: 10px;

width: 180px;

bottom: 0;

top: 0;

right: 0;

position: absolute;

}

#bottom {

border: 1px solid #d4d4d4;

background-color: #f1f1f1;

text-align: center;

padding: 10px;

font-size: 70%;

line-height: 14px;

}

#top h1, #top p, #menulist {

margin: 0;

padding: 0;

}

.menuitem {

background-color: #f1f1f1;

border: 1px solid #d4d4d4;

list-style-type: none;

padding: 2px;

cursor: pointer;

}

.menuitem:hover {

background-color: #ffffff;

}

.menuitem:first-child {

background-color:#4CAF50;

color: white;

font-weight:bold;

}

a {

color: #000000;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

@media (max-width: 800px) {

#sidebar {

width: auto;

position: relative;

}

#main {

margin-right: 0;

}

@media (max-width: 600px) {

#menubar {

width: auto;

float: none;

}

#main {

margin: 0;

}

</style>

<style>/* Stylesheet 2: */

body {

font-family: Arial;

background-color: #d14836;

line-height: 20px;

}

.container {

xmin-width: 900px;

}

.wrapper {

position: relative;

overflow: auto;

}

#top {

color: #ffffff;

padding: 15px;

font-size: 30px;

line-height: 26px;

}

#top h1 {

margin:0;

line-height: 50px;

}

#menubar {

width: 190px;

float: right;

}

#main {

padding: 10px;

background-color: #ffffff;

font: 80% Verdana;

}

#main h1, #main h2 {

color: #d14836;

}

#sidebar {

background-color: #F6DAD7;

color: #d14836;

padding: 10px;

}

#bottom {

text-align: center;

padding: 10px;

font-size: 70%;

color: #ffffff;

}

#menulist {

padding:0;

font: 16px verdana;

}

.menuitem {

width: 155px;

background-color: #d14836;

border: 1px solid #d14836;

border-radius: 40px;

color: #ffffff;

list-style-type: none;

margin: 10px;

padding: 5px;

text-align: center;

cursor: pointer;

}

.menuitem:nth-child(2) {

background-color:white;

color: #d14836;

font-weight:bold;

}

.menuitem:hover {

background-color: #ffffff;

color: #d14836;

}

a {

color: #d14836;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

</style>

<style>/* Stylesheet 3: */

body {

font: 100% Verdana;

margin: 20px;

line-height: 26px;

}

.container {

xmin-width: 900px;

}

.wrapper {

position: relative;

overflow: auto;

}

#sidebar {

background-color: #f1f1f1;

border: 1px solid #d4d4d4;

padding-left: 10px;

}

#bottom {

text-align: center;

padding: 10px;

font-size: 70%;

line-height: 14px;

}

h1, h2, h3 {

color: #4CAF50;

}

#menulist {

padding: 0;

position: relative;

overflow: auto;

}

.menuitem {

width: 165px;

float: left;

background-color: #555555;

color: #ffffff;

list-style-type: none;

margin: 4px;

padding: 2px;

text-align: center;

cursor: pointer;

}

.menuitem:nth-child(3) {

background-color:#4CAF50;

}

.menuitem:hover {

background-color: #999999;

}

a {

color: #000000;

}

a:hover {

color: #84c754;

}

</style>

<style>/* Stylesheet 4: */

body {

font: 100% Courier New;

margin: 20px;

line-height: 26px;

background-color: #000000;

}

.container {

xmin-width: 900px;

}

.wrapper {

position: relative;

overflow: auto;

}

#top {

color: #84c754;

padding: 15px;

}

#main {

padding: 10px;

color: #84c754;

}

#sidebar {

color: #ffffff;

border: 1px solid #ffffff;

border-radius: 4px;

padding: 10px;

width: 320px;

top: 0;

right: 0;

position: absolute;

font-size: 80%;

line-height: 20px;

}

#bottom {

border: 1px solid #ffffff;

border-radius: 4px;

color: #ffffff;

text-align: center;

padding: 10px;

font-size: 70%;

line-height: 14px;

}

#top h1,#top p {

margin: 0;

}

.menuitem {

color: #84c754;

cursor: pointer;

}

.menuitem:nth-child(4) {

color:white;

font-weight:bold;

}

.menuitem:hover {

color: #ffffff;

}

a {

color: #ffffff;

}

a:hover {

color: #84c754;

}

@media (max-width: 600px) {

#sidebar {

width: auto;

margin-bottom:10px;

position: relative;

}

</style>

</head>

<body>

<div class="container wrapper">

<div id="top">

<h1>Welcome to My Homepage</h1>

<p>Use the menu to select different Stylesheets</p>

</div>

<div class="wrapper">

<div id="menubar">

<ul id="menulist">

<li class="menuitem" onclick="reStyle(0)">Stylesheet 1

</li><li class="menuitem" onclick="reStyle(1)">Stylesheet 2

</li><li class="menuitem" onclick="reStyle(2)">Stylesheet 3

</li><li class="menuitem" onclick="reStyle(3)">Stylesheet 4

</li><li class="menuitem" onclick="noStyles()">No Stylesheet

</li></ul>

</div>

<div id="main">

<h1>Same Page Different Stylesheets</h1>

        <p>This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:<br>

<a href="https://www.w3schools.com/css/demo_default.htm#" onclick="reStyle(0);return false">Stylesheet1</a>,

<a href="https://www.w3schools.com/css/demo_default.htm#" onclick="reStyle(1);return false">Stylesheet2</a>,

<a href="https://www.w3schools.com/css/demo_default.htm#" onclick="reStyle(2);return false">Stylesheet3</a>,

<a href="https://www.w3schools.com/css/demo_default.htm#" onclick="reStyle(3);return false">Stylesheet4</a>.

</p>

<h2>No Styles</h2>

        <p>This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:<br><a href="https://www.w3schools.com/css/demo_default.htm#" onclick="noStyles();return false">No Stylesheet</a>.</p>

</div>

<div id="sidebar">

<h3>Side-Bar</h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<div id="bottom">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

</div>

<script>

function noStyles() {

document.styleSheets[0].disabled = true;

document.styleSheets[1].disabled = true;

document.styleSheets[2].disabled = true;

document.styleSheets[3].disabled = true;

}

function reStyle(n) {

noStyles()

document.styleSheets[n].disabled = false;

}

function closeBlackdiv() {

var blackdiv, stylediv;

blackdiv = document.getElementById("blackdiv")

blackdiv.parentNode.removeChild(blackdiv);

stylediv = document.getElementById("stylediv")

stylediv.parentNode.removeChild(stylediv);

}

function showStyle(n) {

var div, text, blackdiv;

blackdiv = document.createElement("DIV");

blackdiv.setAttribute("style","background-color:#000000;position:absolute;width:100%;height:100%;top:0;opacity:0.5;margin-left:-20px;");

blackdiv.setAttribute("id","blackdiv");

blackdiv.setAttribute("onclick","closeBlackdiv()");

document.body.appendChild(blackdiv);

div = document.createElement("DIV");

div.setAttribute("id","stylediv");

div.setAttribute("style","background-color:#ffffff;padding-left:5px;position:absolute;width:auto;height:auto;top:100px;bottom:50px;left:200px;right:200px;overflow:auto;font-family: monospace; white-space: pre;line-height:16px;");

text = document.createTextNode(document.getElementsByTagName("STYLE")[n].innerHTML);

div.appendChild(text);

document.body.appendChild(div);

//alert(document.getElementsByTagName("STYLE")[n].innerHTML);

}

reStyle(0);

</script>

</body></html>

F4: CSS code examples

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation

Explanation