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