Add indent to the <body> and <head> tags within <html> for readability
This commit is contained in:
parent
d147377ce4
commit
ab92ffab14
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue