Posted On April 4, 2019

Basic CSS: Set the id of an Element

kimconnect 0 comments
blog.KimConnect.com >> Codes >> 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;
}

p {
font-size: 16px;
font-family: monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

.silver-background {
background-color: silver;
}
</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 class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post

PowerShell: Get NIC MTU’s of All Hyper-V Hosts in Domain/Forest

# listHyperVHostsInForests.ps1 # Version: 0.02 function listHyperVHostsInForests{ # Ensure that AD management module is available…

PowerShell: Converting Time Stamp from Int64 to DateTime and Vice Versa

Here are some quick conversion methods between time values represented by Integer and DateTime data…

How To Link Containers Using Docker Compose

This yields several advantages:1. Direct linking between containers is architectually efficient to direct traffic between…
Other project: DragonCoin.com