CSS 3

CSS Layout: 
Flex Box: flexbox is designed for one-dimensional layout

<html>
<head> 
<link rel="stylesheet" href="style.css"> 
</head>
<body>

<div class="wrapper">
  <div class="box1">1 ஒன்று </div>
  <div class="box2">2 இரண்டு</div>
  <div class="box3">3 மூன்று</div>
</div>

</body>
</html>

style1.css
------------

.wrapper {
  display: flex;
}

முயன்று பாருங்கள்: 
.wrapper {
  display: flex;
flex-direction: column;
}
style1.css
-----------
.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}

மேல் உள்ளதில் flex: 0 என மாற்றிப் பாருங்கள்.  

Grid Layout - For Two Dimensional Layout

<html>
<head> 
<link rel="stylesheet" href="style.css"> 
</head>
<body>

<div class="wrapper">
    <div class="box1">ஒன்று </div>
    <div class="box2">இரண்டு</div>
    <div class="box3">மூன்று</div>
    <div class="box4">நான்கு</div>
    <div class="box5">ஐந்து</div>
    <div class="box6">ஆறு</div>
</div>

</body>
</html>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
}

நாம் விரும்பிய படி layout அமைக்க: 
<html>
<head> 
<link rel="stylesheet" href="style.css"> 
</head>
<body>

<div class="wrapper">
    <div class="box1">ஒன்று </div>
    <div class="box2">இரண்டு</div>
    <div class="box3">மூன்று</div>
    <div class="box4">நான்கு</div>
    <div class="box5">ஐந்து</div>
    <div class="box6">ஆறு</div>
</div>

</body>
</html>


.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}


Floats:

<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>

<p> கிரிக்கெட்டில், மட்டையை சும்மாவே வைத்திருந்தால், சச்சினாக இருந்தாலும் நமக்கு கோபம் வருகிறதே. தொடர்ந்து ரன் எடுக்கவும், அடிக்கடி 4, 6 என அடிக்க வேண்டும் என்று எதிர்பார்க்கிறோம். நீங்கள் மட்டும் கணிணியை வைத்துக் கொண்டு, மென்பொருள் எதுவும் உருவாக்காமல், பாட்டு கேட்டு, படம் பார்த்து, விளையாடிக் கொண்டு, சமூக வலைத்தளங்களில் அரட்டை அடிப்பீர்கள். என்ன நியாயம் இது?</p>


</body>
</html>

.box {
    float: left; /* right, none, inherit கொடுக்கலாம் */
    width: 150px;
    height: 150px;
    margin-right: 30px;
    border: dotted;
    background-color: lightgreen;
}


Positioning: 

Static Positioning: 
Default Behaviour:

<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>

<p class="positioned"> 
கிரிக்கெட்டில், மட்டையை சும்மாவே வைத்திருந்தால், சச்சினாக இருந்தாலும் நமக்கு கோபம் வருகிறதே. தொடர்ந்து ரன் எடுக்கவும், அடிக்கடி 4, 6 என அடிக்க வேண்டும் என்று எதிர்பார்க்கிறோம். நீங்கள் மட்டும் கணிணியை வைத்துக் கொண்டு, மென்பொருள் எதுவும் உருவாக்காமல், பாட்டு கேட்டு, படம் பார்த்து, விளையாடிக் கொண்டு, சமூக வலைத்தளங்களில் அரட்டை அடிப்பீர்கள். என்ன நியாயம் இது?</p>

</body>
</html>

style1.css: 
-------------
.positioned {
  position: static;
  background: skyblue;
}

Relative Positioning: 

<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>

<p class="positioned"> 
கிரிக்கெட்டில், மட்டையை சும்மாவே வைத்திருந்தால், சச்சினாக இருந்தாலும் நமக்கு கோபம் வருகிறதே. தொடர்ந்து ரன் எடுக்கவும், அடிக்கடி 4, 6 என அடிக்க வேண்டும் என்று எதிர்பார்க்கிறோம். நீங்கள் மட்டும் கணிணியை வைத்துக் கொண்டு, மென்பொருள் எதுவும் உருவாக்காமல், பாட்டு கேட்டு, படம் பார்த்து, விளையாடிக் கொண்டு, சமூக வலைத்தளங்களில் அரட்டை அடிப்பீர்கள். என்ன நியாயம் இது?</p>


</body>
</html>

style1.css: 
-----------
.positioned {
  position: relative;
  background: skyblue;
top: 30px;
left: 30px;
/*bottom: 30 px; 
right: 30 px;  */
}

Absolute Positioning: 

style1.css: 
-----------
.positioned {
  position: absolute;
  background: skyblue;
top: 30px;
left: 30px;
/*bottom: 30 px; 
right: 30 px;  */
}

z-index: 
<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>

<p class="positioned"> 
 பெரும்பாலான மாணவர்கள் சொல்வது என்ன? “எனக்கு ஒரு வேலை கொடுங்கள். பிறகு நான் தேவையானதைக் கற்றுக் கொள்கிறேன். அதற்குப் பிறகு, திறமையை வளர்த்துக் கொள்கிறேன்”. உண்மைதானே.</p>

<p> நீங்கள் உங்கள் குடும்பத்துடன் அடிக்கடி வெளியூர் செல்ல கார் வாங்குகிறீர்கள். நல்ல கார் ஓட்டுனர் தேட்கிறீர்கள். நான் உங்களிடம் நேர்முகத் தேர்விற்கு வந்துள்ளேன். கார் டிரைவிங் வகுப்பு சென்றுள்ளேன். ஆனால் கார் ஓட்டிய அனுபவம் இல்லை.</p>

<p>“நான் பயிற்சி முடித்துள்ளேன். சான்றிதழ் வைத்துள்ளேன். ஆனால் அனுபவம் இல்லை. என்னை வேலைக்கு சேர்த்துக் கொள்ளுங்கள். உங்கள் புது காரை என்னிடம் கொடுங்கள். முடிந்தால் சில மாதம் பயிற்சியும் கொடுங்கள். நன்கு கற்றுக் கொண்டு, பழகிய பின், பிறகு உங்கள் குடும்பத்தினரை எங்கு வேண்டுமானாலும் அழைத்துச் செல்கிறேன்.”</p>

</body>
</html>

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
z-index: -1; /* 1 கொடுத்தும் பாருங்கள் */
}


<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>
<h1> கணினி மாணவர்கள் வேலை தேடுவது எப்படி?  </h1>

<p> Tech குழுக்களில் சேர்க. ஊரில் உள்ள Tech குழுக்களில் சேர்க. குழு இல்லையென்றால் தொடங்குக. அடிக்கடி சந்தித்து புது விஷயஙுகளை கற்றுக் கொள்க.</p>

<p> உலகமே GNU/Linux ஐ விரும்பி வரவேற்கிறது. உங்களிடம் உள்ள விண்டோஸை அழித்துவிட்டு, உபுண்டு, டெபியன், ஃபெடோரா என ஏதாவது ஒரு லினக்ஸை நிறுவுங்கள். Commandline பயன்படுத்தும் போது எக்கச்சக்க புது விஷயங்கள் கற்றுக் கொள்வீர்கள்.</p>

<p>குனு/லினக்ஸில் எல்லா மென்பொருட்களுக்கும் source code கிடைக்கும். அவற்றை பதிவிறக்கம் செய்து சும்மாவேனும் திறந்து படித்துப் பாருங்கள்.</p>

<p>நீங்கள் செய்யும் எல்லாவற்றையும் உங்கள் வலைப்பதிவில் எழுதுங்கள். தினமும் விடாமல் எழுதுங்கள். உங்களின் மிகச்சிறந்த Visiting Card ஆக உங்கள் வலைப்பதிவு அமையும். </p>

</body>
</html>


style1.css
-----------

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}


/* கீழ் உள்ளத்தைக் கொடுக்காமல் முதலில் பாருங்கள். */ 
p:nth-of-type(1) {
  margin-top: 200px;
}


Sticky Positioning: 

<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>
<h1> கணினி மாணவர்கள் வேலை தேடுவது எப்படி?  </h1>
<h1>Sticky positioning</h1>

<dl>
    <dt>Highest Educational Qualification</dt>
    <dd>B.E., Civil Engineering</dd>
    <dd>Anna University</dd>
    <dd>2022</dd>
    <dd>6.4 CGPA</dd>
    <dt>Technical Skills</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>HTML, CSS</dd>
    <dd>JavaScript</dd>
    <dt>Hobbies</dt>
    <dd>Attending Tech Meetings</dd>
    <dd>Writing Blogs</dd>
    <dd>Designing</dd>
    <dd>Reading Books</dd>
    <dt>Extra Curricular</dt>
    <dd>Foot Ball Player</dd>
    <dd>ILUGC Volunteer</dd>
    <dt>About Me</dt>
    <dd>Fun Loving</dd>
    <dd>Cool</dd>
    <dd>Focused</dd>
</dl>


</body>
</html>


dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}


style1.css:
-----------
.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

z-index: 
<html>
<head> 
<link rel="stylesheet" href="style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>

<p class="positioned"> 
 பெரும்பாலான மாணவர்கள் சொல்வது என்ன? “எனக்கு ஒரு வேலை கொடுங்கள். பிறகு நான் தேவையானதைக் கற்றுக் கொள்கிறேன். அதற்குப் பிறகு, திறமையை வளர்த்துக் கொள்கிறேன்”. உண்மைதானே.</p>

<p> நீங்கள் உங்கள் குடும்பத்துடன் அடிக்கடி வெளியூர் செல்ல கார் வாங்குகிறீர்கள். நல்ல கார் ஓட்டுனர் தேட்கிறீர்கள். நான் உங்களிடம் நேர்முகத் தேர்விற்கு வந்துள்ளேன். கார் டிரைவிங் வகுப்பு சென்றுள்ளேன். ஆனால் கார் ஓட்டிய அனுபவம் இல்லை.</p>

<p>“நான் பயிற்சி முடித்துள்ளேன். சான்றிதழ் வைத்துள்ளேன். ஆனால் அனுபவம் இல்லை. என்னை வேலைக்கு சேர்த்துக் கொள்ளுங்கள். உங்கள் புது காரை என்னிடம் கொடுங்கள். முடிந்தால் சில மாதம் பயிற்சியும் கொடுங்கள். நன்கு கற்றுக் கொண்டு, பழகிய பின், பிறகு உங்கள் குடும்பத்தினரை எங்கு வேண்டுமானாலும் அழைத்துச் செல்கிறேன்.”</p>

</body>
</html>

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
z-index: -1; /* 1 கொடுத்தும் பாருங்கள் */
}


<html>
<head> 
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>
<h1> கணினி மாணவர்கள் வேலை தேடுவது எப்படி?  </h1>

<p> Tech குழுக்களில் சேர்க. ஊரில் உள்ள Tech குழுக்களில் சேர்க. குழு இல்லையென்றால் தொடங்குக. அடிக்கடி சந்தித்து புது விஷயஙுகளை கற்றுக் கொள்க.</p>

<p> உலகமே GNU/Linux ஐ விரும்பி வரவேற்கிறது. உங்களிடம் உள்ள விண்டோஸை அழித்துவிட்டு, உபுண்டு, டெபியன், ஃபெடோரா என ஏதாவது ஒரு லினக்ஸை நிறுவுங்கள். Commandline பயன்படுத்தும் போது எக்கச்சக்க புது விஷயங்கள் கற்றுக் கொள்வீர்கள்.</p>

<p>குனு/லினக்ஸில் எல்லா மென்பொருட்களுக்கும் source code கிடைக்கும். அவற்றை பதிவிறக்கம் செய்து சும்மாவேனும் திறந்து படித்துப் பாருங்கள்.</p>

<p>நீங்கள் செய்யும் எல்லாவற்றையும் உங்கள் வலைப்பதிவில் எழுதுங்கள். தினமும் விடாமல் எழுதுங்கள். உங்களின் மிகச்சிறந்த Visiting Card ஆக உங்கள் வலைப்பதிவு அமையும். </p>

</body>
</html>


style1.css
-----------

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}


/* கீழ் உள்ளத்தைக் கொடுக்காமல் முதலில் பாருங்கள். */ 
p:nth-of-type(1) {
  margin-top: 200px;
}


Sticky Positioning: 

<html>
<head> 
<link rel="stylesheet" href="style1.css"> 
</head>
<body>

<h1>Simple float example</h1>

<div class="box">Float</div>
<h1> கணினி மாணவர்கள் வேலை தேடுவது எப்படி?  </h1>
<h1>Sticky positioning</h1>

<dl>
    <dt>Highest Educational Qualification</dt>
    <dd>B.E., Civil Engineering</dd>
    <dd>Anna University</dd>
    <dd>2022</dd>
    <dd>6.4 CGPA</dd>
    <dt>Technical Skills</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>HTML, CSS</dd>
    <dd>JavaScript</dd>
    <dt>Hobbies</dt>
    <dd>Attending Tech Meetings</dd>
    <dd>Writing Blogs</dd>
    <dd>Designing</dd>
    <dd>Reading Books</dd>
    <dt>Extra Curricular</dt>
    <dd>Foot Ball Player</dd>
    <dd>ILUGC Volunteer</dd>
    <dt>About Me</dt>
    <dd>Fun Loving</dd>
    <dd>Cool</dd>
    <dd>Focused</dd>
</dl>


</body>
</html>


dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}


style1.css:
-----------
.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

CSS  TRANSITIONS:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css"> 
</head>
<body>
<h1>Transition Property</h1>
<p>சுட்டெலியைப் பச்சைப் பெட்டி மீது நகர்த்துங்கள் [hover]</p>
	<div><h1>பெரியார்</h1> </div>
</body>
</html>

style1.css: 
------------
div {
  width: 10px;
  height: 100px;
  background: green;
  transition: width 2s;
  /* transition-delay: 1s; */ முயன்று பாருங்கள்.  
}

div:hover {
  width: 200px;
}

மேல் உள்ளதை 
div:hover {
  width: 200px;
  height: 200px;
}
என்று மாற்றிப் பாருங்கள்.  

style1.css
----------
ddiv {
  width: 100px;
  height: 100px;
  background: black;
  transition: width 2s, height 2s, transform 2s;
}
h1 {
  color: #ff0000;
}


div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}


CSS Buttons: 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>
<h2>CSS Buttons</h2>

<button>Default Button</button>
<a href="https://payilagam.com" class="button">Visit Payilagam</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

</body>
</html>

style1.css: 
.button {
  background-color: brown;
  border: none;
  border-radius: 100%;/* 4px 8px 16px 32px வட்டமாக வேண்டுமெனில் 25% 50% 100% */
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
/* hover பண்பைச் சேருங்கள் */
.button:hover {
  background-color: blue;
  color: white;
}


CSS Media Queries: 


Multiple Column Layout: 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> 
</head>
<body>
<h1>Create Multiple Columns</h1>
<div class="newspaper">
உங்களுக்கு பிடித்தமான கட்டற்ற மென்பொருளுக்கு பங்களியுங்கள். ஒரு வரி நிரல் தந்தாலும் அது பெரிய விஷயமே. நிரல் மட்டுமின்றி ஆவணமாக்கம், படம், IRC, Forum, Mailing list ஆகியவற்றில் உதவி, Packaging, பரப்புரை செய்தல், மொழிமாற்றம் செய்தல் என ஏதாவது ஒரு வகையில் பங்களியுங்கள். “How to contribute to Open Source Software?” என்று தேடுங்கள். பிடித்த மொழியில், பிடித்த மென்பொருளுக்கு உதவுங்கள்.
</div>
</body>
</html>

style1.css
-----------
.newspaper {
  column-count: 3;
}

கீழ் உள்ளது போல, style1.cssஐ மாற்றிப் பாருங்கள். 

.newspaper {
  column-count: 3;
column-width: 300px;
}

style1.css கோப்பில் column-gap: 40px; சேர்த்துப் பாருங்கள்.  

style1.css கோப்பில் column-rule-style: solid;சேர்த்துப் பாருங்கள். 

style1.css கோப்பில் column-rule-color: lightblue; சேர்த்துப் பாருங்கள். 

style1.css கோப்பில் column-rule: 4px dotted rgb(79, 185, 227); சேர்த்துப் பாருங்கள். 


Multiple Column Layout: 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>
<h1>கணினி மாணவர்கள் வேலை தேடுவது எப்படி?</h1>
<div class="newspaper">
உங்களுக்கு பிடித்தமான கட்டற்ற மென்பொருளுக்கு பங்களியுங்கள். ஒரு வரி நிரல் தந்தாலும் அது பெரிய விஷயமே. நிரல் மட்டுமின்றி ஆவணமாக்கம், படம், IRC, Forum, Mailing list ஆகியவற்றில் உதவி, Packaging, பரப்புரை செய்தல், மொழிமாற்றம் செய்தல் என ஏதாவது ஒரு வகையில் பங்களியுங்கள். “How to contribute to Open Source Software?” என்று தேடுங்கள். பிடித்த மொழியில், பிடித்த மென்பொருளுக்கு உதவுங்கள்.
</div>
</body>
</html>

style1.css
----------
.newspaper {
  column-count: 3;
column-width: 200px;
column-rule-style: dotted;
column-rule-color: red;
}

h1 {
  column-span: all;
}

Columns and Fragmentation: 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>
<h1>கணினி மாணவர்கள் வேலை தேடுவது எப்படி?</h1>
<div class="container">
<div class="content">
உங்களுக்கு பிடித்தமான கட்டற்ற மென்பொருளுக்கு பங்களியுங்கள். ஒரு வரி நிரல் தந்தாலும் அது பெரிய விஷயமே. நிரல் மட்டுமின்றி ஆவணமாக்கம், படம், IRC, Forum, Mailing list ஆகியவற்றில் உதவி, Packaging, பரப்புரை செய்தல், மொழிமாற்றம் செய்தல் என ஏதாவது ஒரு வகையில் பங்களியுங்கள். “How to contribute to Open Source Software?” என்று தேடுங்கள். பிடித்த மொழியில், பிடித்த மென்பொருளுக்கு உதவுங்கள்.
</div>
<div class="content">
எனதருமை சச்சின்களே. 50களையும் 100களையும் சச்சின் குவித்தது போல, மென்பொருட்களை உருவாக்கி, கட்டற்ற மென்பொருட்களுக்கு பங்களித்து, உங்கள் திறமையால், சுடர்விடும் சூரியனாய் மிளிருங்கள்.
</div>
</div>
</body>
</html>

style1.css
----------
.container {
  column-width: 250px;
  column-gap: 20px;
}

.content {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

Chess Board:
-----------
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chess Board</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div board" class="chessboard">
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>

      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>

      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>

      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>

      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>

      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>

      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>

      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
      <div class="square blacksquare"></div>
      <div class="square whitesquare"></div>
    </div>
  </body>
</html>

style.css:
---------
.chessboard {
  height: 400px;
  width: 400px;

  border: 10px solid black;
}

.square {
  width: 50px;
  height: 50px;
  float: left; /* float: right */
}

.whitesquare {
  background: white;
}
.blacksquare {
  background: grey;
}


RESPONSIVE DESIGN: 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<h1>Demo of the ::after selector</h1>

<p>வணக்கம் இது முதல் வரி</p>
<p>வரிக்குப் பின்னால் நான் இருக்கிறேன்</p>

</body>
</html>

style1.css: 
---------
p::after { 
  content: " - ஒவ்வொரு வரிக்குப் பின்னேயும்";
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/style1.css"> 
</head>
<body>

<div class="header">
  <h1>சாவித்திரிபாய் புலே</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>இளமைக்காலம்</li>
      <li>கல்விப்பணி</li>
      <li>பிற பணிகள்</li>
      <li>சிறப்பு</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1> சாவித்திரிபாய் </h1>
    <h2>சாவித்திரிபாய் புலே (Savitribai Jyotirao Phule, 3 சனவரி 1831 – 10 மார்ச் 1897) ஒரு சமூக சீர்திருத்தவாதியும், கவிஞரும் ஆவார். இவர் இந்தியாவின் முதல் பெண் ஆசிரியர் என அழைக்கப்படுகிறார். </h2>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>பிறப்பு
      <p>சனவரி 3, 1831</p>
		  <h2>பெண்களுக்கான முதல் பள்ளி</h2> 
      <h3>பூனாவிற்கருகிலுள்ள பிடெ வாடாவில் 1848 ஆம் ஆண்டு </h3>
		  <h2>இறப்பு</h2> 
      <p>மார்ச்சு 10, 1897</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

style1.css
------------
* { /* Universal Selector: */ 
  box-sizing: border-box;
}
/* ஒரு elementஇற்கு அதன் width, heightஇல் padding, border சேர்க்க  box-sizing property உதவுகிறது.*/ 

.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%;}
}