Author: kimconnect

blog.KimConnect.com >>

April 4, 2019 kimconnect

Basic CSS: Use Clockwise Notation to Specify 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: 20px 40px 20px 40px;}.red-box…

0 Comments

April 4, 2019 kimconnect

Basic CSS: Add Different Margins to Each Side 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;margin-top:…

0 Comments

April 4, 2019 kimconnect

Basic CSS: Add Different Padding to Each Side 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-top:…

0 Comments

April 4, 2019 kimconnect

Basic CSS: Add a Negative Margin to 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:…

0 Comments

April 4, 2019 kimconnect

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:…

0 Comments

April 4, 2019 kimconnect

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:…

0 Comments

April 4, 2019 kimconnect

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:…

0 Comments

April 4, 2019 kimconnect

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; }…

0 Comments

April 4, 2019 kimconnect

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:…

0 Comments

April 4, 2019 kimconnect

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:…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments

April 4, 2019 kimconnect

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…

0 Comments