• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ROBS WEB DESIGN

Create A Successful Website And Blog

  • About
  • Blog
  • My Toolbox
  • Contact
You are here: Home / Coding / Learning CSS Code Part 3-Coding Size With CSS

Learning CSS Code Part 3-Coding Size With CSS

July 12, 2015 By Robin McDonald Leave a Comment

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

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

example-of-using-px-in-css-coding

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:

example-of-using-ems-in-css-coding

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:

inner-wrap-sizing

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.

inner-wrap-ems

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.

The following two tabs change content below.
  • Bio
  • Latest Posts
My Twitter profileMy Facebook profileMy Google+ profile

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.
My Twitter profileMy Facebook profileMy Google+ profile

Latest posts by Robin McDonald (see all)

  • Optimize Your WordPress Images With ShortPixel - January 15, 2018
  • How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
  • Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017

Related

Filed Under: Coding, Learning CSS, Web Design, WordPress Tagged With: Blog Design, coding, Web Design, WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published.

CommentLuv badgeShow more posts

Primary Sidebar

start-building-website-robswebdesign

Sign Up for Free Tips!

Free-WordPress-Blog-Setup

ABOUT ME

My name is Rob McDonald and I am here to help you start your own Blog or Website. Read More…

siteground-banner-larger
WPEdge-Cloud-Hosting-promo-ad-opt

MY MOST POPLAR POSTS

  • How Fast Is Your Web Host? 360 views
  • How To Increase Your Traffic And Build Relationships Using Triberr 326 views
  • How To Increase Your Website Speed With 5 Easy Steps 314 views
  • 10 Of My Favorite WordPress Plugins 235 views
  • 4 Of My Social Media Networks 209 views
  • 11 Things You Must Do Before Re-Designing Your WordPress Website 568 views

SEARCH MY SITE

Buy Me A Coffee

If you like the content of my blog, or if it has helped you in any way, please consider donating any amount.

Footer

Learning WordPress

  • Optimized-Your-WordPress-Images-With-ShortPixel-featureOptimize Your WordPress Images With ShortPixel
  • Keywords-and-Meta-Descriptions-featureHow To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages
  • Uninstall-a-plugin-featureUninstalling a WordPress Plugin And Why Its Important

Learning CSS

  • Coding-Spacing-In-CSS-featureLearning CSS Code Part 8-Coding Spacing with CSS
  • Coding-Fonts-in-CSSLearning CSS Code Part 7-Coding Fonts with CSS
  • Styling-Backgrounds-feature-Learning CSS Code Part 6-Coding Backgrounds with CSS

Twitter Feed

Tweets by @RobsWebDesign

Follow Me

  • Home
  • Blog
  • Subscribe
  • About
  • Contact

Site Designed By Rob McDonald @Robs Web Design! RobsWebDesign · Privacy Policy ·Disclosure Policy