Add indent to the <body> and <head> tags within <html> for readability
This commit is contained in:
ZebraMilk
parent
d147377ce4
commit
ab92ffab14
12 changed files with 187 additions and 187 deletions
|
|
@ -1,14 +1,14 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Methods for Adding CSS</title>
|
<title>Methods for Adding CSS</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Style me via the external method!</div>
|
<div>Style me via the external method!</div>
|
||||||
<p>I would like to be styled with the internal method, please.</p>
|
<p>I would like to be styled with the internal method, please.</p>
|
||||||
<button>Inline Method</button>
|
<button>Inline Method</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Methods for Adding CSS</title>
|
<title>Methods for Adding CSS</title>
|
||||||
<link rel="stylesheet" href="solution.css">
|
<link rel="stylesheet" href="solution.css">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
p {
|
p {
|
||||||
background-color: green;
|
background-color: green;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>Style me via the external method!</div>
|
<div>Style me via the external method!</div>
|
||||||
<p>I would like to be styled with the internal method, please.</p>
|
<p>I would like to be styled with the internal method, please.</p>
|
||||||
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
|
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Class and ID Selectors</title>
|
<title>Class and ID Selectors</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Number 1 - I'm a class!</p>
|
<p>Number 1 - I'm a class!</p>
|
||||||
<div>Number 2 - I'm one ID.</div>
|
<div>Number 2 - I'm one ID.</div>
|
||||||
<p>Number 3 - I'm a class, but cooler!</p>
|
<p>Number 3 - I'm a class, but cooler!</p>
|
||||||
<div>Number 4 - I'm another ID.</div>
|
<div>Number 4 - I'm another ID.</div>
|
||||||
<p>Number 5 - I'm a class!</p>
|
<p>Number 5 - I'm a class!</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Class and ID Selectors</title>
|
<title>Class and ID Selectors</title>
|
||||||
<link rel="stylesheet" href="solution.css">
|
<link rel="stylesheet" href="solution.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p class="odd">Number 1 - I'm a class!</p>
|
<p class="odd">Number 1 - I'm a class!</p>
|
||||||
<div id="two">Number 2 - I'm one ID.</div>
|
<div id="two">Number 2 - I'm one ID.</div>
|
||||||
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
|
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
|
||||||
<div id="four">Number 4 - I'm another ID.</div>
|
<div id="four">Number 4 - I'm another ID.</div>
|
||||||
<p class="odd">Number 5 - I'm a class!</p>
|
<p class="odd">Number 5 - I'm a class!</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Grouping Selectors</title>
|
<title>Grouping Selectors</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<button>Click Me!</button>
|
<button>Click Me!</button>
|
||||||
<button>No, Click Me!</button>
|
<button>No, Click Me!</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Grouping Selectors</title>
|
<title>Grouping Selectors</title>
|
||||||
<link rel="stylesheet" href="solution.css">
|
<link rel="stylesheet" href="solution.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<button class="inverted">Click Me!</button>
|
<button class="inverted">Click Me!</button>
|
||||||
<button class="fancy">No, Click Me!</button>
|
<button class="fancy">No, Click Me!</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Chaining Selectors</title>
|
<title>Chaining Selectors</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Use the classes BELOW this line -->
|
<!-- Use the classes BELOW this line -->
|
||||||
<div>
|
<div>
|
||||||
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
||||||
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
<!-- Use the classes ABOVE this line -->
|
<!-- Use the classes ABOVE this line -->
|
||||||
<div>
|
<div>
|
||||||
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
||||||
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Chaining Selectors</title>
|
<title>Chaining Selectors</title>
|
||||||
<link rel="stylesheet" href="solution.css">
|
<link rel="stylesheet" href="solution.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
||||||
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
||||||
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Descendant Combinator</title>
|
<title>Descendant Combinator</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="text">This should be styled.</p>
|
<p class="text">This should be styled.</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="text">This should be unstyled.</p>
|
<p class="text">This should be unstyled.</p>
|
||||||
<p class="text">This should be unstyled.</p>
|
<p class="text">This should be unstyled.</p>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="text">This should be styled.</p>
|
<p class="text">This should be styled.</p>
|
||||||
<p class="text">This should be styled.</p>
|
<p class="text">This should be styled.</p>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Descendant Combinator</title>
|
<title>Descendant Combinator</title>
|
||||||
<link rel="stylesheet" href="solution.css">
|
<link rel="stylesheet" href="solution.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="text">This should be styled.</p>
|
<p class="text">This should be styled.</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="text">This should be unstyled.</p>
|
<p class="text">This should be unstyled.</p>
|
||||||
<p class="text">This should be unstyled.</p>
|
<p class="text">This should be unstyled.</p>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p class="text">This should be styled.</p>
|
<p class="text">This should be styled.</p>
|
||||||
<p class="text">This should be styled.</p>
|
<p class="text">This should be styled.</p>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Fix the Cascade</title>
|
<title>Fix the Cascade</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p class="para">I'm just a simple paragraph!</p>
|
<p class="para">I'm just a simple paragraph!</p>
|
||||||
<p class="para small-para">I'm a smaller paragraph!</p>
|
<p class="para small-para">I'm a smaller paragraph!</p>
|
||||||
|
|
||||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||||
<button id="cancel-button" class="button cancel">Cancel</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'm not related to those divs down there.</div>
|
||||||
<div class="text">I have a child!
|
<div class="text">I have a child!
|
||||||
<div class="text child">My ancestor is so embarrassing.</div>
|
<div class="text child">My ancestor is so embarrassing.</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Fix the Cascade</title>
|
<title>Fix the Cascade</title>
|
||||||
<link rel="stylesheet" href="solution.css">
|
<link rel="stylesheet" href="solution.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p class="para">I'm just a simple paragraph!</p>
|
<p class="para">I'm just a simple paragraph!</p>
|
||||||
<p class="para small-para">I'm a smaller paragraph!</p>
|
<p class="para small-para">I'm a smaller paragraph!</p>
|
||||||
|
|
||||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||||
<button id="cancel-button" class="button cancel">Cancel</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'm not related to those divs down there.</div>
|
||||||
<div class="text">I have a child!
|
<div class="text">I have a child!
|
||||||
<div class="text child">My ancestor is so embarrassing.</div>
|
<div class="text child">My ancestor is so embarrassing.</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue