Add indent to the <body> and <head> tags within <html> for readability

This commit is contained in:
ZebraMilk 2022-01-30 11:56:35 -06:00
parent d147377ce4
commit ab92ffab14
12 changed files with 187 additions and 187 deletions

View File

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methods for Adding CSS</title>
</head>
<body>
<div>Style me via the external method!</div>
<p>I would like to be styled with the internal method, please.</p>
<button>Inline Method</button>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methods for Adding CSS</title>
</head>
<body>
<div>Style me via the external method!</div>
<p>I would like to be styled with the internal method, please.</p>
<button>Inline Method</button>
</body>
</html>

View File

@ -1,23 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methods for Adding CSS</title>
<link rel="stylesheet" href="solution.css">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methods for Adding CSS</title>
<link rel="stylesheet" href="solution.css">
<style>
p {
background-color: green;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div>Style me via the external method!</div>
<p>I would like to be styled with the internal method, please.</p>
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
</body>
<style>
p {
background-color: green;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div>Style me via the external method!</div>
<p>I would like to be styled with the internal method, please.</p>
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
</body>
</html>

View File

@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class and ID Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Number 1 - I'm a class!</p>
<div>Number 2 - I'm one ID.</div>
<p>Number 3 - I'm a class, but cooler!</p>
<div>Number 4 - I'm another ID.</div>
<p>Number 5 - I'm a class!</p>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class and ID Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Number 1 - I'm a class!</p>
<div>Number 2 - I'm one ID.</div>
<p>Number 3 - I'm a class, but cooler!</p>
<div>Number 4 - I'm another ID.</div>
<p>Number 5 - I'm a class!</p>
</body>
</html>

View File

@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class and ID Selectors</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<p class="odd">Number 1 - I'm a class!</p>
<div id="two">Number 2 - I'm one ID.</div>
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
<div id="four">Number 4 - I'm another ID.</div>
<p class="odd">Number 5 - I'm a class!</p>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class and ID Selectors</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<p class="odd">Number 1 - I'm a class!</p>
<div id="two">Number 2 - I'm one ID.</div>
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
<div id="four">Number 4 - I'm another ID.</div>
<p class="odd">Number 5 - I'm a class!</p>
</body>
</html>

View File

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Click Me!</button>
<button>No, Click Me!</button>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Click Me!</button>
<button>No, Click Me!</button>
</body>
</html>

View File

@ -1,14 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping Selectors</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<button class="inverted">Click Me!</button>
<button class="fancy">No, Click Me!</button>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping Selectors</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<button class="inverted">Click Me!</button>
<button class="fancy">No, Click Me!</button>
</body>
</html>

View File

@ -1,22 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaining Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Use the classes BELOW this line -->
<div>
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
<!-- Use the classes ABOVE this line -->
<div>
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaining Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Use the classes BELOW this line -->
<div>
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
<!-- Use the classes ABOVE this line -->
<div>
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
</body>
</html>

View File

@ -1,20 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaining Selectors</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div>
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
<div>
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaining Selectors</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div>
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
<div>
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
</div>
</body>
</html>

View File

@ -1,21 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p class="text">This should be styled.</p>
</div>
<p class="text">This should be unstyled.</p>
<p class="text">This should be unstyled.</p>
<div class="container">
<p class="text">This should be styled.</p>
<p class="text">This should be styled.</p>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p class="text">This should be styled.</p>
</div>
<p class="text">This should be unstyled.</p>
<p class="text">This should be unstyled.</p>
<div class="container">
<p class="text">This should be styled.</p>
<p class="text">This should be styled.</p>
</div>
</body>
</html>

View File

@ -1,21 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="container">
<p class="text">This should be styled.</p>
</div>
<p class="text">This should be unstyled.</p>
<p class="text">This should be unstyled.</p>
<div class="container">
<p class="text">This should be styled.</p>
<p class="text">This should be styled.</p>
</div>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="container">
<p class="text">This should be styled.</p>
</div>
<p class="text">This should be unstyled.</p>
<p class="text">This should be unstyled.</p>
<div class="container">
<p class="text">This should be styled.</p>
<p class="text">This should be styled.</p>
</div>
</body>
</html>

View File

@ -1,22 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fix the Cascade</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="para">I'm just a simple paragraph!</p>
<p class="para small-para">I'm a smaller paragraph!</p>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fix the Cascade</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="para">I'm just a simple paragraph!</p>
<p class="para small-para">I'm a smaller paragraph!</p>
<button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button>
<button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button>
<div class="text">I'm not related to those divs down there.</div>
<div class="text">I have a child!
<div class="text child">My ancestor is so embarrassing.</div>
</div>
</body>
<div class="text">I'm not related to those divs down there.</div>
<div class="text">I have a child!
<div class="text child">My ancestor is so embarrassing.</div>
</div>
</body>
</html>

View File

@ -1,22 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fix the Cascade</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<p class="para">I'm just a simple paragraph!</p>
<p class="para small-para">I'm a smaller paragraph!</p>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fix the Cascade</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<p class="para">I'm just a simple paragraph!</p>
<p class="para small-para">I'm a smaller paragraph!</p>
<button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button>
<button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button>
<div class="text">I'm not related to those divs down there.</div>
<div class="text">I have a child!
<div class="text child">My ancestor is so embarrassing.</div>
</div>
</body>
<div class="text">I'm not related to those divs down there.</div>
<div class="text">I have a child!
<div class="text child">My ancestor is so embarrassing.</div>
</div>
</body>
</html>