Designing HTML websites through the use of CSS offers an amazing amount of control. You can add awesome colors, images, and text content that combines into wonderful artistic displays. However, those feats of design savvy also need to be formatted for functional use as well.
This is where some of the fine tuning properties of CSS can come into play for a designer. In this brief explainer, you will learn how to manipulate width and height. Together these two options work to get that perfect aspect for the visible HTML size.
Preparing to Set CSS Width Height
Setting the HTML width and height begins with the CSS styling. To provide a visual aid for this tutorial, a sample HTML document and CSS stylesheet will be used. You may choose to copy the code and follow along in your own text editor of choice.
This is the sample HTML code to be used for the tutorial. Note the single “div” tag within the body. This will be the target of our styling changes.
<!DOCTYPE html> <html> <head> <title>CSS Width Height</title> <link rel="stylesheet" href="CSSWidthHeight.css"> </head> <body> <div>Udacity HTML Example Box</div> </body> </html>
Once the sample HTML is set, the CSS stylesheet can be created. If you are not familiar with setting up and linking a CSS stylesheet, check out this tutorial that will help you out with that.
div {
}For ease of visibility, a second set of div styles were added as well. This is not required for the tutorial, but feel free to add them into your own code if you like to mimic the style. For more information on the styles applied please see the blog post on CSS borders and CSS colors.
div{
border-color: black;
border-style: solid;
border-spacing: 12px;
text-align: center;
}This will provide the following display on the HTML page:
With this example set up as a base to work on, the width height properties can now be manipulated.
The Width Height Properties
Using the CSS width and height properties are quite direct in the general syntax. You simply need to call the intended property by name and then provide a value for it. See the example below to see this in action.
div {
width: “Value to Add”;
height: “Value to Add”;
}You can see that the width height properties are set. However, there is no provided value as of yet. This will be covered in separate areas as you can set multiple types of values for these properties. While the example is aimed at an HTML “div” size it should be noted many elements can take the width height properties to alter the HTML content.
Note: The CSS width height properties can also use the “auto” value. If you do not set a specified value for either of these properties the browser will simply revert to the default value of “auto” to fill in the space.
Setting CSS Width Height Using Pixel Sizing
In this example, the width height properties will be defined by using pixels. The div below has been provided with equal values of 100 pixels in both the width and height properties. The word pixel is shortened to just the two letters of “px” when used in CSS. Also, notice that there is no spacing between the numerical value and the letters.
div {
width: 100px;
height: 100px;
}This will provide the following output on the HTML page.
You can see that the text located within the div element has been affected as the spacing constraints limit its working area. This is because the properties of height and width do not change the margin, padding, or border properties. What you see being altered are the CSS width height properties within the element.
If you are not familiar with the CSS box model, check out this post to get a great beginners’ understanding of how it works.
If the value of width is changed to accommodate the text, you can see it visually change on the HTML page directly.
div{
height: 100px;
width: 350px;
}This new code now provides the following output on the page.
Content Overflow
It is also important to understand that the size you apply to the element does not mean the content within is automatically set to fit as desired. In this next example, the width and height have been changed to the following values.
div{
height: 70px;
width: 170px;
}Extra text content was added to the div element to give an example of content overflow.
Setting CSS Width Height Using Percentages
Another option for applying values for the width and height properties, percentages can be used in place of the pixels. This is quite straightforward for the syntax as you add a numerical value followed by the percent sign. As with the “px” for pixels there is no spacing between the number and sign. See the example below where the CSS code was changed to use percentages.
div{
height: 100%;
width: 100%;
}If you remember the issue with the content overflow in the previous pixel values used, then the following output using percentages should prove interesting.
As you can see, the content overflow is not an issue with this form. Percentages are not static units like pixels and can offer the ability to adapt to screen size and other variables. In this next example, the values are not changed but the window for the HTML page is reduced to simulate a standard phone screen.
The content remains the same; however, you can see how it was altered to fit into the new screen size. That seems great for design needs, yet there are some finer points to using a percentage as a value that has to be noted.
When you set a percentage as the value, you are taking a percentage of the real-estate of wherever that element is. In the examples used here, the div is the only element on the HTML document. Setting the height and width to 100% within the body essentially advises the browser to simply use the entire screen as the reference for the percentage.
In this example, a paragraph element has been nested within the div tag.
<body> <div>I am a div element <p>I am a paragraph element</p> </div> </body>
In the stylesheet, the CSS width height for the paragraph element is set to be at 50%. Added styling was placed for viewing ease.
p{
background-color: blue;
color: white;
height: 50%;
width: 50%;
}This will give you the following output on the HTML page.
The is used to explain that the percentage used is resolved in relation to where the element is nested. In this case, the paragraph element is within the div element. That means the percentage is resolved as 50% of the div element, not the entire page.
Setting the Max Width Value
You can tell the browser to use a set maximum width for an element through the use of the “max-width” property. The value can be defined in pixels or percentages. It is important to note that you can set a width and a max-width property. The maximum width will inform the browser what the allowed width for the element is. Look at the following example where the div element has this property assigned.
div{
height: 400px;
width: 150px;
max-width: 300px;
}Note: In the example above, you can see a width and a max-width property have both been assigned. This is important because there is not an inheritance of values being passed. The width property was set and the browser takes that 150px as the set width. This means it will take priority over the max-width property set after it.
When a max-width has been set, you will notice an interesting effect that is applied to the browser window. With the content’s window reduced in size the browser will automatically add a scrollbar to allow the content to be accessed. See the image below for an example.
This can be useful for obvious reasons where spacing can be an issue.
Taking the Designs Even Farther
This brief tutorial covered just the basics of CSS width height properties. CSS is a wonderful toolbox of various options that are just waiting to be unleashed by your potential. Consider how combining the size of an element can help you style backgrounds or page buttons.
Other options such as changing the size of an entire image for a page background can take that effect even father. Other tools such as Flexbox and CSS Grid also work into the aspect of sizing and organization to tie those design concepts together.
If CSS and HTML are your first entry points into the world of creation through code, consider taking advantage of the path. Knowing how to understand code in various walks of life can lead to some very creative career options and set you apart from the crowd.
Keep learning and trying new things. Not just to enhance your career, but also to have fun in what you can come up with. Today it is learning how to control CSS width height properties. Tomorrow it is your own site with all the creative content you can muster.
_________________________
If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree program today to start the journey.
