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:

.larger-image {
width: 500px;

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

<link href="" rel="stylesheet" type="text/css">


.red-text {



h2 {

font-family:Lobster, monospace;


p {





<h2 class="red-text">CatPhotoApp</h2>


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

<ahref="#"><imgsrc=""alt="A cute orange cat lying on its back."></a>


<p>Things cats love:</p>


<li>cat nip</li>

<li>laser pointers</li>



<p>Top 3 things cats hate:</p>


<li>flea treatment</li>


<li>other cats</li>




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




Leave a Reply

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