size your images

size your images

Size Your Images

CSS has a property called widththat controls an element’s width. Just like with fonts, we’ll use px(pixels) to specify the image’s width.

For example, if we wanted to create a CSS class called larger-imagethat gave HTML elements a width of 500 pixels, we’d use:

<style>
.larger-image {
width: 500px;
}
</style>


Create a class called smaller-imageand use it to resize the image so that it’s only 100 pixels wide.

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

<pclass="red-text">Click here to view more <ahref="#">cat photos</a>.</p>




<ahref="#"><imgsrc="https://bit.ly/fcc-relaxing-cat"alt="A cute orange cat lying on its back."></a>




<div>

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




<formaction="/submit-cat-photo">

<label><inputtype="radio"name="indoor-outdoor"checked> Indoor</label>

<label><inputtype="radio"name="indoor-outdoor"> Outdoor</label><br>

<label><inputtype="checkbox"name="personality"checked> Loving</label>

<label><inputtype="checkbox"name="personality"> Lazy</label>

<label><inputtype="checkbox"name="personality"> Energetic</label><br>

<inputtype="text"placeholder="cat photo URL"required>

<buttontype="submit">Submit</button>

</form>

</main>

Leave a Reply

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