CSS Styling Examples

I wanted to show a couple examples in this CSS example:

1. How to use Google Fonts
2. How to use Font Awesome icons
3. How to style Active, Hover, Focus links and input boxes.

First, in order to use Google Fonts and Font Awesome you need to embed the fonts and the Font Awesome CSS file. (See line 7 and 9 highlighted below)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Lorem Ipsum Styling</title>

	<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

	<link rel="stylesheet" href="fa/css/font-awesome.min.css">

<style>

.container{
	text-align: center;
	padding:4%;
	width: 92%;
}
.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}
.top-para {
	font-size: 58px;
	font-family: 'Prata', serif;
	font-weight: 100;
	line-height: 125%;
	letter-spacing: 2px;
	color: #a08131;
}


p.top-para::first-letter {
    color: #424219;
    font-size:200%;
}  


.mid-para {
font-size: 28px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 900;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para {
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para2 {
	font-size: 30px;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 1px;
	color: #a08131;
}
.foot-para {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #3f3c35;
}
.fa-address-card {
	font-size: 80px;
	color: #a08131;
}
.fa-rocket {
	font-size: 45px;
	color: #3f3c35;
}
.fa-plus {
	font-size: 25px;
	color: #898768;
	margin-right: 15px;
	margin-top: -15px;
	position: relative;
	top: -10px;
}
.fa-male {
	font-size: 45px;
	color: #3f3c35;
	position: relative;
	top: -3px;
	margin-right: 15px;
}
.fa-sitemap, .fa-beer{
	font-size: 45px;
	color: #3f3c35;
	margin-right: 15px;
}

a {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	color:#545441;
}

a:hover {
	background-color: #a08131;
	font-size: 25px;
}

a:focus {
	background-color: #6d6a34;
	font-size: 40px;
}

a:active {
	background-color: #777775;
	font-size: 80px;
}




.boxy {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	border:1px solid #c1c1b0;
}

.boxy:hover {
	background-color: #a08131;
	font-size: 26px;
}

.boxy:focus {
	background-color: #6d6a34;
	font-size: 30px;
}

.boxy:active {
	background-color: #777775;
	font-size: 30px;
}



</style>	
</head>
<body>
	
<div class="container">
		<i class="fa fa-address-card" aria-hidden="true"></i>
	<p class="top-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


		<input class="boxy" placeholder="Name">
		<input class="boxy" placeholder="Email">
	<br>
		<input class="boxy" placeholder="Address">
		<input class="boxy" placeholder="City, State">

	<p>
		<i class="fa fa-beer" aria-hidden="true"></i><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-male" aria-hidden="true"></i>
	</p>

	<p class="mid-para">Nunc rhoncus mollis nisi id mollis. Nulla facilisi. Aenean dapibus quis urna ut ullamcorper. Nam pellentesque neque congue iaculis sodales. Etiam et augue id lorem pulvinar fermentum eget consequat metus.</p>

	<i class="fa fa-rocket" aria-hidden="true"></i>

	<p>
		<a href="#">Click here to blastoff!!</a>
	</p>

	<p class="bot-para">Fusce vel erat justo. Sed volutpat justo quis arcu vehicula convallis eu ut lectus. Etiam ac odio nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget mi viverra, vulputate nisi vitae, sodales purus. Sed bibendum leo sed cursus lobortis. Nulla faucibus venenatis malesuada. Fusce ac est non massa pharetra blandit ut ut ipsum. Sed at tellus eu lectus volutpat gravida. Sed ut nisi a nisl mollis laoreet non in magna. Nullam aliquam neque sit amet commodo suscipit. Vestibulum interdum ornare ante nec tempor. Sed lobortis finibus dui ac consequat. Fusce tincidunt quam imperdiet arcu pulvinar mollis. Fusce eget nibh in diam varius tincidunt. Vivamus bibendum enim in ullamcorper viverra.</p>

		<i class="fa fa-sitemap" aria-hidden="true"></i>

	<p class="bot-para2">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>

	<div style="footer">
	<p class="foot-para">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>
	</div>
</div>

</body>
</html>

If you see here I embedded some Google fonts then I just used .font-sel to show how to use the different font in your CSS styling of a class.


<head>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

</head>

<style>

.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}