# width & height
Objectives:
* To study width and height in CSS.
## File Location
You should be located in the following files:
```
javascript-library
└── 0-PreWork
...
└── 2-CSS-Basics
└── 06-width-height.css
└── 06-width-height.html
```
## Sample Code
Let's go ahead and set up our HTML and CSS files. Make sure your HTML file looks like below:
```markup
Width and Height
```
Here is the sample CSS Code:
```css
.wrapper{
margin: 5px;
}
h1{
text-align: center;
}
```
## Discussion
Let's start talking about width and height. This is how we can shape the size of our HTML elements. There are a couple of different ways we can size things, we can use percentages, or explicit sizes like pixels. There is also `auto` which is the default way to size things, this means that the browser calculates the size.
Let's add some notes to our HTML right underneath our wrapper div:
```markup
Width and Height
The width and height properties are used to set the width and height of an element.
The default setting for width and height is auto, which means the browser decides the width and height.
Other settings for width and height are:
specified length values such as px & em
percent of the containing div (ex: 50%, 100%)
```
## More Examples
Let's look at a few examples. Add the following underneath your notes in your `html`:
```markup
This element has a width of 50% and height of 200px.
```
So, let's style this div to give it a width of 50% and a height of 200px. See if you can do this yourself in CSS, then check below. Also, give the div a background color of something so you can really see the size.
Check and see if your CSS matches below!
```css
.example1{
height: 150px;
width: 50%;
background-color: cornflowerblue;
}
```
Let's do another example, starting with saving the picture from [here](https://www.oregonhikers.org/field_guide/File:Mt._Hood,_Timothy_Lake.jpg), save the image as lake.jpg for ease of reference in your HTML.
Add the following to your HTML, right before your closing wrapper div tag.
```markup
You can also manipulate width and height with images. This image was originally approx 400px x 200px, now it's 400px x 400px.
```
Let's style this image using width and height in our css. Again, see if you can figure out how to do it, and then check the CSS below.
```css
.example2 img{
width: 400px;
height: 400px;
}
```
Feel free to play with the values here, to see how these values affect the size of different elements.
Your files should look like the finished files below.
## Finished Code
HTML:
```markup
Width and Height
Width and Height
The width and height properties are used to set the width and height of an element.
The default setting for width and height is auto, which means the browser decides the width and height.
Other settings for width and height are:
specified length values such as px & em
percent of the containing div (ex: 50%, 100%)
This element has a width of 50% and height of 200px.
You can also manipulate width and height with images. This image was originally approx 400px x 200px, now it's 400px x 400px.
