Month: April 2019

Basic CSS: Adjust the Margin of an Element

<style>.injected-text {margin-bottom: -25px;text-align: center;}.box {border-style: solid;border-color: black;border-width: 5px;text-align: center;}.yellow-box {background-color: yellow;padding: 10px;}.red-box {background-color: crimson;color: #fff;padding:…

Basic CSS: Adjust the Padding of an Element

<style>.injected-text {margin-bottom: -25px;text-align: center;}.box {border-style: solid;border-color: black;border-width: 5px;text-align: center;}.yellow-box {background-color: yellow;padding: 10px;}.red-box {background-color: crimson;color: #fff;padding:…

Basic CSS: Use an id Attribute to Style an Element

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}p {font-size: 16px;font-family: monospace;}.thick-green-border {border-color: green;border-width: 10px;border-style:…

Basic CSS: Set the id of an Element

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style> .red-text { color: red; } h2 { font-family: Lobster, monospace; }…

Basic CSS: Give a Background Color to a div Element

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}p {font-size: 16px;font-family: monospace;}.thick-green-border {border-color: green;border-width: 10px;border-style:…

Basic CSS: Add Rounded Corners with border-radius

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}p {font-size: 16px;font-family: monospace;}.thick-green-border {border-color: green;border-width: 10px;border-style:…

Basic CSS: Add Borders Around Your Elements

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}p {font-size: 16px;font-family: monospace;}.smaller-image {width: 100px;}</style><h2 class="red-text">CatPhotoApp</h2><main><p…

Basic CSS: Size Your Images

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster, monospace;}p {font-size: 16px;font-family: monospace;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here…

Basic CSS: Specify How Fonts Should Degrade

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster;}p {font-size: 16px;font-family: monospace;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here to…

Basic CSS: Import a Google Font

<style>.red-text {color: red;}p {font-size: 16px;font-family: monospace;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here to view more <a href="#">cat photos</a>.</p><a…

Basic CSS: Set the Font Family of an Element

<style>.red-text {color: red;}p {font-size: 16px;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img…

Basic CSS: Change the Font Size of an Element

<style>.red-text {color: red;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A…

Basic CSS: Style Multiple Elements with a CSS Class

<style>.red-text {color: red;}</style><h2 class="red-text">CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute…

Basic CSS: Use a CSS Class to Style an Element

<style>h2 {color: blue;}</style><h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange…

Basic CSS: Use CSS Selectors to Style Elements

<h2 style="color: red">CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange…

Basic HTML and HTML5: Nest Many Elements within a Single div Element

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Create a Set of Checkboxes

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Use HTML5 to Require a Field

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Add a Submit Button to a Form

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Create a Form Element

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…