CSS Introduction Example

<!Doctype HTML>
<html>
<head>
<title>CSS Introduction</title>
</head>
<style>
/**
  *
  * DoM Classes ss0
  *
  *
  */
.ss0{background: #ffc2cd;padding: 10px;border: 5px solid #000;border-radius: 5px;}
.ssh0{font-family: 'Roboto', sans serif;font-size: 30px;margin: 20px 0px;color: #ffc2cd;background: #ff084a;border-radius: 5px;padding: 10px;}
.ssw0{display: flex;}
.sss0{width: 30%;padding: 10px;box-sizing: border-box;border-right: 1px solid #fff;}
.ss-button{border-radius: 50px;border: 2px solid #fff;background: #232323;color: #fff;cursor: pointer;outline: none;padding: 5px 20px;max-width: 80%;margin-bottom: 5px;}
.ss-button:first-child{margin-top: 10px;}
.ss-button:hover{opacity: 0.8;}
.ssb0{width: 70%;padding: 10px;margin-top: -20px;}
.ssp0{color: #f4f4fb;}
.ssf0{background: #ff084a;padding: 40px;color: #f4f4fb;text-align: center;margin-right: -15px;margin-left: -15px;margin-bottom: -15px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.ssc0{font-family: 'Jura', sans serif;font-size: 20px;text-transform: uppercase;color: #ffc2cd;border-top: 1px solid #000; background: #232323;}

/**
  *
  * DoM Classes ss1
  *
  *
  */
.ss1{background: blue; padding: 10px; border-radius: 5px;border: 5px solid #000;}
.ssh1{color: blue; background: #fff; font-size: 40px; padding: 40px; font-family: "Philosopher", sans serif; box-shadow: inset 0 0 10px 10px blue;}
.ssw1{display: flex;}
.ssb1{flex: 60%;}
.sss1{flex: 40%; margin-top: 30px;}
.ssp1{color: #fff; padding: 10px;}
.ssf1{color: #fff; text-align: center;border-top: 1px solid #fff; padding: 30px;background: #000066; margin: -10px;}
.ssc1{font-family: "Jura", sans serif; text-align: center; padding: 30px; border-top: 1px solid #fff;background: #000033; margin: -30px; margin-top: 30px;}

/**
  *
  * DoM Classes ss2
  *
  *
  */
.ss2{background: black; padding: 10px; border-radius: 5px;border: 5px solid #000;}
.ssh2{color: black; background: #fff; font-size: 30px; padding: 40px; }
.ssw2{display: block;}
.ssb2{display: block;}
.sss2{display: block;}
.ssp2{color: #fff; padding: 10px; font-size: 20px;}
.ssf2{color: #fff; text-align: center;border-top: 1px solid #fff; padding: 30px;background: #234567; margin: -10px;}
.ssc2{font-family: "Jura", sans serif; text-align: center; padding: 30px; border-top: 1px solid #fff;background: #999999; margin: -30px; margin-top: 30px;}
/**
  *
  * DoM Classess ss3
  *
  *
  */
.ss3{background: green; padding: 10px; border-radius: 5px;border: 5px solid #000;}
.ssh3{color: #fff; background: #232323; font-size: 50px; font-family: 'Roboto', sans serif; margin: -10px; padding: 40px; } h2.ssh3{margin-top: -15px; border-top-right-radius: 5px; border-top-left-radius: 5px;}
.ssw3{display: block;}
.ssb3{display: block;}
.sss3{display: block;}
.ssp3{color: #fff; padding: 10px; font-size: 20px;}
.ssf3{color: #fff; text-align: right;border-top: 0px solid #fff; padding: 30px;background: #003300; margin: -10px;}
.ssc3{font-family: "Jura", sans serif; text-align: right; padding: 50px;padding-bottom: 10px; border-top: 10px solid #999;background: #001900; margin: -30px; margin-top: 30px;}
</style>
<script>
function ss1Fun(){
	document.getElementById('idss').className = "ss1";
	document.getElementById('idssh').className = "ssh1";
	document.getElementById('idssw').className = "ssw1";
	document.getElementById('idssb').className = "ssb1";
	document.getElementById('idsss').className = "sss1";
	document.getElementById('idssp').className = "ssp1";
	document.getElementById('idssf').className = "ssf1";
	document.getElementById('idssc').className = "ssc1";
}
function ss2Fun(){
	document.getElementById('idss').className = "ss2";
	document.getElementById('idssh').className = "ssh2";
	document.getElementById('idssw').className = "ssw2";
	document.getElementById('idssb').className = "ssb2";
	document.getElementById('idsss').className = "sss2";
	document.getElementById('idssp').className = "ssp2";
	document.getElementById('idssf').className = "ssf2";
	document.getElementById('idssc').className = "ssc2";
}
function ss3Fun(){
	document.getElementById('idss').className = "ss3";
	document.getElementById('idssh').className = "ssh3";
	document.getElementById('idssw').className = "ssw3";
	document.getElementById('idssb').className = "ssb3";
	document.getElementById('idsss').className = "sss3";
	document.getElementById('idssp').className = "ssp3";
	document.getElementById('idssf').className = "ssf3";
	document.getElementById('idssc').className = "ssc3";
}
function ss4Fun(){
	document.getElementById('idss').className = "ss4";
	document.getElementById('idssh').className = "ssh4";
	document.getElementById('idssw').className = "ssw4";
	document.getElementById('idssb').className = "ssb4";
	document.getElementById('idsss').className = "sss4";
	document.getElementById('idssp').className = "ssp4";
	document.getElementById('idssf').className = "ssf4";
	document.getElementById('idssc').className = "ssc4";
}
function ss5Fun(){
	document.getElementById('idss').className = "ss0";
	document.getElementById('idssh').className = "ssh0";
	document.getElementById('idssw').className = "ssw0";
	document.getElementById('idssb').className = "ssb0";
	document.getElementById('idsss').className = "sss0";
	document.getElementById('idssp').className = "ssp0";
	document.getElementById('idssf').className = "ssf0";
	document.getElementById('idssc').className = "ssc0";
}
</script>
<body>
<div class="ss0" id="idss">
<h2 class="ssh0" id="idssh">Welcome to Tutspie | Code Wisely</h2>
<div class="ssw0" id="idssw">
<div class="sss0" id="idsss">
<button type="button" class="ss-button" onclick="ss1Fun()" id="idssbt">Stylesheet 1</button>
<button type="button" class="ss-button" onclick="ss2Fun()" id="idssbt">Stylesheet 2</button>
<button type="button" class="ss-button" onclick="ss3Fun()" id="idssbt">Stylesheet 3</button>
<button type="button" class="ss-button" onclick="ss4Fun()" id="idssbt">Stylesheet 4</button>
<button type="button" class="ss-button" onclick="ss5Fun()" id="idssbt">Stylesheet 5</button>
</div>
<div class="ssb0" id="idssb">
<p class="ssp0" id="idssp">This example demonstrate how an ordinary web page or html markup can be styled way beyond. This simple exampl can make you understand the key differences between simple HTML and HTML styled with CSS. Also CSS is a cascading style sheet, therefore we can formulate a variation of styles for a document using different style properties.</p>
</div>
</div>
<div class="ssf0" id="idssf">
Footer: Congratulations, you are at the best learning resources.
Tuts Insider is an Integrated Library of Learning.
<div class="ssc0" id="idssc">
Copy right 2019 | Tuts Insider.Com - Code Wisely | All rights are reserved
</div>
</div>
</div>
</body>
</html>