9 changed files with 107 additions and 0 deletions
@ -0,0 +1,33 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||||
|
<title>CSS Course</title> |
||||||
|
<link rel="stylesheet" href="main.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h1 id="assignment-instructions">Assignment - Selectors & Properties</h1> |
||||||
|
<ol> |
||||||
|
<li>Style the above <code><h1></code> tag to use any color of your choice and a <code>sans-serif</code> font.</li> |
||||||
|
<li>Style all <code><code></code> tags to use the <code>monospace</code> font-family and have red text.</li> |
||||||
|
<li>Use a class selector to ensure that the <code><code></code> elements in the second <code><li></code> element have a different color (e.g. green).</li> |
||||||
|
<li>Switch the order of the rules you created and use the dev tools of your browser to understand how specifity resolves conflicts (for the <code><code></code> elements).</li> |
||||||
|
<li>Set a default font (e.g. sans-serif) for the entire content of your page and use "Inheritance" to change the font of the <code><li></code> items, too.</li> |
||||||
|
<li>Use a combinator to give all <code><li></code> elements but the first one (!) a black background and white text color (don't worry if the numbers disappear).</li> |
||||||
|
<li>Use another combinator to now give all <code><li></code> inside an <code><ol></code> element a black background and white text color.</li> |
||||||
|
</ol> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,7 @@ |
|||||||
|
1. Style the above <h1> tag to use any color of your choice and a sans-serif font. |
||||||
|
2. Style all <code> tags to use the monospace font-family and have red text. |
||||||
|
3. Use a class selector to ensure that the <code> elements in the second <li> element have a different color (e.g. green). |
||||||
|
4. Switch the order of the rules you created and use the dev tools of your browser to understand how specifity resolves conflicts (for the <code> elements). |
||||||
|
5. Set a default font (e.g. sans-serif) for the entire content of your page and use "Inheritance" to change the font of the <li> items, too. |
||||||
|
6. Use a combinator to give all <li> elements but the first one (!) a black background and white text color (don't worry if the numbers disappear). |
||||||
|
7. Use another combinator to now give all <li> inside an <ol> element a black background and white text color. |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
h1 { |
||||||
|
color: blue; |
||||||
|
font-family: sans-serif; |
||||||
|
} |
||||||
|
code { |
||||||
|
color: red; |
||||||
|
font-family: monospace; |
||||||
|
} |
||||||
|
li + code { |
||||||
|
color: green; |
||||||
|
font-family: monospace; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,26 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||||
|
<title>uHost</title> |
||||||
|
<link rel="shortcut icon" href="favicon.png"> |
||||||
|
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> |
||||||
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> |
||||||
|
<link rel="stylesheet" href="main.css"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<main> |
||||||
|
<section id="product-overview"> |
||||||
|
<h1>Get the freedom you deserve.</h1> |
||||||
|
</section> |
||||||
|
<section id="plans"> |
||||||
|
<h1 class="section-title">Choose Your Plan</h1> |
||||||
|
<p>Make sure you get the most for your money!</p> |
||||||
|
</section> |
||||||
|
</main> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
body { |
||||||
|
font-family: 'Montserrat', sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
#product-overview { |
||||||
|
background: #ff1b68; |
||||||
|
} |
||||||
|
|
||||||
|
.section-title { |
||||||
|
color: #2ddf5c; |
||||||
|
} |
||||||
|
|
||||||
|
#product-overview h1 { |
||||||
|
color: white; |
||||||
|
font-family: 'Anton', sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
/* h1 { |
||||||
|
font-family: sans-serif; |
||||||
|
} */ |
||||||
|
After Width: | Height: | Size: 15 KiB |
Loading…
Reference in new issue