Learning CSS Code Part 3-Coding Size With CSS

When it comes to website design, Yes … size DOES matter! Change up your sizing and make your design perfect. Learn the different types of sizing and how to code size with CSS!

Coding Size with CSS

We are going to be talking today about the size property and insuring that everything on your site sizes correctly. We are going to insure that everything fits nicely together and everything flows nicely together. So how do we code our size property in CSS?

Since we are setting the full design for our site in CSS, size is really important! We can control the size of every element. All body fonts, links and headings. Our header, menu bar and sidebars. All our borders and line dividers. There is so many different elements that we can control the sizing of with CSS.

Pixels and Ems in CSS

When we talk about how we do this, we are talking about two different sizing units. I use two different ones in my designs, each of them function a little bit differently and I will tell you a little bit about it and why I have my preferences.

Ems
Pixels

Ems: The ‘em’ is a scalable unit of size. An em is equal to the current font size, for instance, if the font-size of the document is 12pt, then 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular because of their scalability.

The other unit that I use a lot is Pixels. Pixels (px) are fixed units of size. One pixel is equal to one dot on the computer screen. I find that using pixels seems to keep things simpler in my designing. So I personally prefer using pixels rather than ems, but it is good to know about both anyway.

However, the problem with pixels is that it doesn’t scale upward for visually-impaired readers or downward to fit mobile devices like ems do, so I want you to know about both so you can decide which one you want to use.

All of the themes that I use in my designs will scale down to fit mobile devices, so I haven’t really had a problem with scalability with pixels.

So you can use either Ems or Pixels in your designs. Here is an example with pixels (px).

So, we have an h1, this is just for a heading. We have the opening bracket { and then on the next line we have the font-size property colon : and then 24px and then semi-colon ; We then close the coding with the closing bracket }.

NOTE: This is not a complete tag. For simplicity of this article, I am only showing the font-size styling here.

Obviously if this was going on our site, we would need to include our font-color and other properties, but for now we are just showing the font-size property.

Here is an example with Em:

Here we have our h1 with the opening bracket { followed on the next line with our font-size colon : and instead of 24px we have 2em and then the semicolon ; and then closed on the next line with }.

NOTE: This is not a complete tag. For simplicity of this article, I am only showing the font-size styling here.

And remember, it’s not only fonts that are controlled by size. Here’s another example:

Here we are talking about the inner-wrap. We are basically adding a border to our inner wrap, and you can see here that I am using pixels, so we have 4 pixels. And then solid, when you do a border you have to have to add in whether you want it solid or dashed, we will go into more detail about that later, I just wanted to show you that we have a border that is 4px and is solid, and we also have a border color that is #000000 and then the semicolon ; and then we close that all up.

Now let’s have a look at that with our Ems. Here you can see we have exactly the same thing. We have our inner-wrap, the border and its .3ems solid and then the color. And then we close it up again.

So you can see with the pixels or ems we can add a border to our inner-wrap. And that pretty much sums up how we can control our size property within CSS.

So just play around with it. Once you get into your CSS file you can play around with the size, you can make it bigger, you can make it smaller and just play around with it until you get something that suits you and works for you with the design you are going for.

To learn more about all the other pieces we are going to put into our CSS tags, come on back to robmcdonaldwebdeisgn.com, I will have more articles on learning CSS.

In our next article, Learning CSS Code Part 4-Understanding The Four Side Elements, we will be talking about the 4 side elements in CSS.

Bio
Latest Posts

Robin McDonald

WordPress Web Developer at Robs Web Design

My name is Rob McDonald and I am here to help you start your own Blog or Website. I want to teach you how to design and develop your site so that it is truly unique and awesome, just like you. Then I want to show you how to use SEO, Social Media Marketing and Branding, to make your site successful.