Website Development & Coding Tips, Tutorials & Techniques

CSS3 has introduced many really neat features to the playing field, many of which were once (and still are) handled by image editors or JavaScript. And after toying with much of what CSS is now capable of, I have to say, the lines are getting fairly blurred. It’s almost like “coding” an image editor, if that makes any sense.

In this post, we’re going to take a look at some of these features, many of which relate to text, borders, boxes, fonts, media queries and gradients.

Text Shadows

In order to take a first look at text shadows in CSS, I’ll give a code example below and then I’ll discuss what’s happening beneath that.

.text-shadow {
    text-shadow: 5px 5px 2px #CCC;
}

Basically, as the name implies, the text shadow property applies shadows to text. The coding of this property in CSS is actually quite similar to giving text shadow values in Photoshop. In both cases, a few things need to be defined.

In the example above, I created a class called, “text-shadow” and applied the text-shadow property to it. I also defined four values of the property. The first two specified properties are required. They define the “X” offset and the “Y” offset, meaning, how far the shadow will appear away from the text in both directions (X is left right and Y is up down).

The next two values are optional. The first is “blur radius,” meaning how soft the shadow will appear. The second is “color,” meaning what color the shadow will display. Like I said, these two values are optional. If the blur radius is not defined, it will default to a zero length value and if the shadow color is not defined, it will inherit the text color value.

So again, in the code example above, the order of the values are x-offset, y-offset, blur radius and shadow color. The first three values are length values and the last one is a color value.

Below, you can find some resources that cover the text-shadow property in CSS:

CSS3 text-shadow Property – W3Schools

CSS3 Text Shadows Generator (Text-Shadow) – Webestools

12 Fun CSS Text Shadows You Can Copy and Paste

text-shadow | CSS-Tricks

Box Shadows

Box shadows in CSS are similar to text shadows in that they add shadows to elements. In this case though, the shadow will appear around a box, as opposed to around text.

Again, I’ll give a code example to get started and then I’ll discuss what’s going on beneath that.

.box-shadow {
    box-shadow: 10px 10px 15px 20px rgba(0, 0, 0, 0.5);
}

In the example above, the first two values are required. They are, again, the X offset and the Y offset. Both use length values and determine the horizontal and vertical distance of the shadow from the element it’s shadowing.

The third length value is blur-radius and is optional. Just like the text-shadow property, if no blur-radius is defined, it will be set to zero by default.

The fourth value is new to these examples and is called, “spread-radius.” This length value determines how large the shadow can grow or shrink in relation to its element. If this value is left out, it will be set to zero by default.

The fifth value in this example specifies the color of the shadow and is slightly different than the color value of the text-shadow in the first example. In this case, we’re using the rgba color value instead of the hex color value. If you’re interested in how the rgba color value works in CSS, please visit my previous post. Simply scroll down to the “Color Data Types” section.

There is one other value that I didn’t mention in the above example. That value is called, “inset” and must be placed in either the first or last position in the rule. The inset value puts the shadow “inside” and in front of the element, as opposed to “outside” and behind.

Lastly, in my recent post on layout methods using CSS, I remember mentioning that padding and borders add to the actual calculated size of a box. In order to deal with this, the team that manages CSS created a new value called, “box-sizing.” Well, I’m please to tell you that adding a shadow to an element does not affect that element’s width or height. The shadow is actually separate from the element itself, so it won’t push your layout in any direction.

If you’re interested in learning more about or taking advantage of the box-shadow property, please take a look at these resources:

Box Shadow CSS Generator | CSSmatic

CSS3 box-shadow Property – W3Schools

CSS Box Shadow | CSS-Tricks

CSS Box Shadows Effects – Paulund

CSS Shadow Experiments | Playground from ZURB

Border Radius

If you’re interested in applying rounded borders to boxes and images, then the “border-radius” property is what you want to use. When using the border-radius property, authors can either write out each rule long-handed or take advantage of the short-handed method.

In the example that follows, I’ll show you what the long-hand method looks like:

.box {
    border-top-left-radius:     5px;
    border-top-right-radius:    10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius:  10px;
}

In the above example, our box will enjoy rounded corners of 5, 10, 5 and 10 pixels respectively. And if you’ll notice, the modification of the corners rotates around the element in a clockwise manner, as I discussed in my post on the CSS box model.

Now, if we wanted to save our fingers from typing so much, we can use the short-hand method to accomplish the same thing:

.box {
    border-radius: 5px 10px 5px 10px;
}

Again, notice how each value will affect the element in a clockwise fashion. And since we’ve got some duplicate values in this rule, we can shorten it even further:

.box {
    border-radius: 5px 10px;
}

The above code will give the same rounded borders as our very first example did.

If we wanted to apply the same rounded measurement to each corner, we could simply use one value:

.box {
    border-radius: 10px;
}

As you can see, when calculating each corner radius, I used a length unit of pixels (I could have also used ems). If we wanted something more dynamic, we could also use percentage.

.box {
    border-radius: 10%;
}

The percentage radius value is calculated based off the dimensions of the element it’s affecting. So if the element is shrinking and growing dynamically on a page, so are the rounded corners.

Are you curious about how designers code image elements to they appear circular on a page? Well, all they do is make sure their element is perfectly square and then apply a 50% border radius to that element. Their code might look something like this:

.box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

If you’d like to look into the border-radius property even further, feel free to browse through these following resources:

CSS3 border-radius property – W3Schools

border-radius and -moz-border-radius < CSS | The Art of Web

CSS Rounded Corners – border-radius – David Walsh

How to Enable CSS3 Border Radius in Internet Explorer 8 and Below

CSS3 Border-Radius & Rounded Avatars | Trent Walton

Gradients

Linear Gradients

Gradients are relatively new to CSS and while some folks may not find them entirely useful, others might need to implement them in something or other.

In the most basic sense, gradients allow us to blend two colors on our web pages, beginning with one color and ending with another. The linear-gradient() function accepts many keywords and values, so looking into it further than what I’m about to post below is suggested, if you’re interested in using this feature on your pages to any great extent.

Like I’ve done before, I’ll post a code example and then go over it below.

.box {
    background: linear-gradient(red, blue);
}

In the example above, our element with the class of “box” will display a gradient of red to blue, with red being at the top and blue being at the bottom. By default, linear gradients begin at the top.

If we wanted to reverse the direction of the gradient, we could do so like this:

.box {
    background: linear-gradient(to top, red, blue);
}

If you’ll notice, I added the “to top” keywords right before the color values, followed by a comma. Other directions include “to left” and “to right.” If you were interested in creating a diagonal gradient, you can use the keywords “left top” and “bottom right.”

What’s probably the most flexible method of angling your gradients is using degrees. I’ll show you some code that would create a 45 degree gradient.

.box {
    background: linear-gradient(45deg, red, blue);
}

If you imagine the gradient beginning at the bottom left of your element, it’s easier to get a handle on where you would be pointing it when using degrees. If you created a 0 degree gradient, it would go straight up, beginning at the bottom left. If you created a 45 degree gradient, like the one in my example above, it would point to the upper right corner. Remember, degrees move clockwise, so the more degrees, the further around the clock you go.

Look learn more about the linear-gradient function, please visit the MDN page on the topic.

Radial Gradients

Radial gradients begin at the center of the element you’re applying them to and spread outward. Here is an example of a radial gradient:

.box {
    background: radial-gradient(red, blue);
}

Looks just like a linear gradient, doesn’t it?

In this case, the red color would be in the center of the element and it would blend into blue as it travels to the outward edges.

To give a gradient a perfect circular shape, as opposed to its default ellipse shape, we can add the “circle” keyword. Here’s an example of what that looks like:

.box {
    background: radial-gradient(circle, red, blue);
}

If we were interested in moving the center of the circle to the top of our page, we could use the “at top” keywords to do so. This is what that looks like:

.box {
    background: radial-gradient(circle at top, red, blue);
}

We could also switch out the “top” keyword with bottom, left or right or even add keywords after the “top” keyword. For instance, we could add “right” after “top” and have the center of our circle reside at the top right corner of our element.

If you’re interested in learning more about what the radial-gradient function can do, please visit the MDN page on the topic.

Color Stops

Think of color stops as the colors and positions of those colors that you’ve included in your gradient. If you’ve included only two colors, you have two color stops. If you’ve included three, then you have three – and so forth. Below, I’ll give you an example of a linear gradient with three color stops.

.box {
    background: linear-gradient(red, blue, yellow);
}

In the above example, we have a gradient beginning with red and then transitioning to blue and then yellow. The gradient would begin at the top and end at the bottom. It would also display all color stops equally.

If we wanted to alter the center positions of our colors, we could do so be adding a percentage value after each color value. So instead of our red color center having a position of 0% and our blue color center having a position of 50% and our yellow color having a center position of 100%, we can move those positions to anything we want. I’ll show you what I’m talking about.

.box {
    background: linear-gradient(red 0%, blue 15%, yellow 100%);
}

In the above example, the center of the blue color will now reside at the 15% mark of the entire gradient. I’m sure you can see the potential here. Adjusting all the values and keywords in this section of this post is really the only way to become familiar with gradients, so I encourage you to have at it.

If you’re interested in learning more about gradients in CSS, please take a look at the following resources:

CSS3 Gradients – W3Schools

CSS Gradients | CSS-Tricks

CSS3 Linear Gradients [CSS3 Tips] – Hongkiat

——

If you have any questions or comments, please leave them below. Also, if you’d like to learn more about CSS, please be sure to take a look at my CSS category. I write almost every day, so you’re sure to find something you’re interested in.

If something is all the rage these days, it’s got to be website layout. I suppose layout has always been popular, but with Google’s recent “Mobile Friendly Update,” the topic of layout has increased in importance exponentially. I wish I had ridden that wave, because there was, and still is, tons of work to be done bringing the world’s websites up to snuff.

In this post, I’m going to go over some basic principles of website layout using CSS. The whole idea isn’t terribly complicated. It’s just that there are a few areas that you need to keep in your head when positioning elements on a page. If you’re interested in making a website mobile friendly, don’t despair – I’ll be writing a whole bunch of posts on that topic in the future.

Setting Box Dimensions

Let’s say we’ve got a paragraph of text that’s held inside a div element. The sizing for that div element would be relative to the text that’s held inside. As the page shrinks and expands, so does the width and height of the div element. This is the default way boxes are sized in CSS.

If we wanted to add some more control to the sizing of our box, we can take advantage of two properties. These are:

width: The width property tells the browser what we want the width of our element’s content area to be. Remember, the content area is the innermost area of a box, minus the padding, border and margin.

height: The height property acts the same way as the width property does, but controls the height of the element’s content area. All the same rules apply.

The initial value of both of these properties is auto, meaning (like I discussed above), the width and height will adjust as the browser sees fit, based on the size of the browser window and the content the element is encapsulating.

Both of these properties use length and percentage values to complete the CSS rule. These values would include pixels (for precise measurement), percentage or ems (for more flexibility). Here’s an example of what width and height properties look like:

div {
    width: 100%;
    height: 850px;
}

When laying out a web page, designers often run into an issue when establishing width and height properties for an element. I’ll tell you what I’m talking about.

Let’s say you’ve got a container div with the width of 1000 pixels. That CSS code might look like this:

.container {
    width: 1000px;
}

Now, let’s say you’ve got two boxes inside that container that you want to use as columns on your page. This means that the intended use will be boxes sitting side by side. Take a look at this code:

.container {
    width: 1000px;
}

.box-one {
    width: 200px;
}

.box-two {
    width: 800px;
}

As you can see, these boxes fit perfectly inside their container element. The problem is that if we fill these two column boxes with content, that content will be touching the very edges of the boxes, making the page look awkward and tightly stuffed. This is exactly what the padding property was created to alleviate.

So, like any good designer, we add some padding properties to our boxes.

.container {
    width: 1000px;
}

.box-one {
    width: 200px;
    padding-right: 10px;
}

.box-two {
    width: 800px;
    padding-left: 10px;
}

That should fix things, right? Well, if you refer back to what I wrote in my previous post, you’ll see that we’ve actually pushed our boxes out of their intended areas and have left ourselves with stacked elements, instead of elements that sit side by side. Why did this happen? Instead of creating two boxes that total 1000 pixels (800 + 200), we’ve created two boxes that total 1020 pixels (800 + 10 + 200 + 10). This is annoying, to say the least. And padding isn’t the only culprit for messing up our design – borders and margins have the same effect. Remember, padding, borders and margins occur outside the content area of a box, therefore those values get added to the total width or height of our box.

Using Box Sizing and Max Values

To deal with the oddities that adding padding and borders to a box can cause, the fine folks who created and released CSS3 have included a nice new property for us to use with our designs. This new property is called, “box-sizing” and essentially keeps our boxes sized according to the widths and heights we declare, adding any padding and border values to the inside of the boxes, instead of the outside. So instead of our example above resulting in a box width total of 1020 pixels, the total would remain at its initial 1000, just the way we intended it to. But just as a reminder, any padding and borders you add to your box will decrease the size of your content area.

The most usable values for the box sizing property are:

padding-box: Our initial box size dimensions include the padding values we declare, but don’t include border or margin values.

border-box: Our initial box size dimensions include the padding and border values we declare, but don’t include margin values.

For more background and information on the box sizing property, check out these resources:

Box Sizing | CSS-Tricks

CSS3 Box Sizing Property – W3Schools

Box Sizing – CSS | MDN

If you take a look at the CSS Tricks page, the author offers a tip that can help us throughout an entire design. He uses the HTML and universal selectors to apply box sizing. Here’s that code:

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

By implementing the above code in our stylesheets, we don’t have to concern ourselves with utilizing the box sizing property for every element we’d like to size this way, causing very redundant code.

Max Width

I’d like to take a moment to talk about two really great tips that will assist you with creating a responsive design for your websites. The first one has to do with the use of the “max-width” property.

Let’s say you set your container element to a width of 95%. That works fine until you see someone browsing your website with one of those enormous monitors. Of course, seeing your beloved site design stretched out three feet wide causes a bit of dismay, so you decide to take advantage of max width and adjust your code to look like this:

.container {
    width: 95%;
    max-width: 1000px;
}

Now, when your site is viewed on a larger monitor, the width grows no larger than a maximum of 1000 pixels. So, what is max-width? Well, the max-width property is used to set a maximum width for an element. It’s value overrides the width element’s value and keeps designs looking great.

The second tip I’d like to share is one that allows your images to become fluid in your layout. If you’ve ever seen a site design with images that shrink and grow, relative to the size of the browser window the site is being viewed on, you’ve seen the max-width property in action. For images though, things are a bit different. In order to make the fluid sizing work correctly, you’ll need to set the image type selector to a max width of 100%. Here’s what that looks like:

img {
    max-width: 100%;
}

Backgrounds

Color

Many elements in our HTML pages can hold background properties. I’ll talk about some of them in the next few sections, but the one I’d like to go over first is the “background-color” property. The idea behind the background-color property is pretty easy to grasp. Yes, you guessed it – this property sets the color of an element’s background and uses many of the color data types I discussed in one of my previous posts (scroll down to the “Color Data Types” section). I’ll give you some examples of what types of values you can use below. These are the most popular:

background-color: blue;
background-color: rgb(128, 255, 64);
background-color: #bbff00;

As you can see, the typical background color values used are color keywords, rgb values and hex values.

Image

If you wanted to go one step further, you can easily utilize an image as an element’s background, instead of a color, by using the “background-image” property. The syntax is slightly different, but it’s still straightforward. Here is an example of the code you would use to apply an image as a background:

background-image: url(https://www.mywebsite.com/background.png);
background-image: url(../img/background.png);

I gave two different examples above. They both use the “URL function” to direct the website visitor’s browser to the specified image to be used as the background. In the first example above, I specified the image using an absolute URL and in the second example, I specified the image using a relative URL. If you aren’t familiar with the difference between absolute and relative URLs, please review this resource.

Image Size

When setting a background image, the image may not display exactly the size you’d like. Most likely, you’ll either find that you’re image is too small and tiling (by default) or too large and overflowing the element’s bounds. This is where the “background-size” property comes into play. By using the background-size property, we’re able to vary our image size in a variety of ways – actually, quite a few ways. I’ll only go over a small number of them below, but if you’re interested in studying this topic in further detail, please visit the reference I just linked to above.

Here’s some example code for the size property:

background-size: 95%;
background-size: 12em;
background-size: 850px;
background-size: cover;

Now, there is something you need to keep in mind when setting a background image size. When using percentages, our background image size will be relative to its parent container. This isn’t new, I know, because I discussed this idea earlier in this post. I just felt as though it needed coverage.

If your image is too large for your element’s area, you can use the “cover” value to proportionally adjust the image’s size in relation to the element’s size. This means that the background image will shrink to fit the element.

Repeat

As I just mentioned, the default value for a background image is “repeat.” What that means is that if an image is too small to completely fill in an element’s area, it will repeat both horizontally as well as vertically. Now, this may not be ideal for many designers, so it might be wise to take advantage of CSS’ “background-repeat” property. To discuss this property, I’ll give some code examples below and then talk about them after that.

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

Like the background-size property, there are many more background-repeat values available for use. This is a sample of them. If you’re interested in learning more about the others, please visit the resource I linked to above.

In the previous code example, the “repeat-x” value limits a repeating background to only the horizontal axis, meaning, the image will only repeat left and right. Not up and down as well. If you’d like to limit the image repeating to the vertical axis, you would use the “repeat-y” value and if you’d like to stop your image from repeating all together, you would use the “no-repeat” value. By using no-repeat, you’ll be left with your single image that’s most likely not filling the entire element’s area.

Position

Let’s say you decided to use the no-repeat value for your background image. If you did this, you’d notice that the image is hanging out up in the upper left corner of your element’s content area. That’s the default position of the image. Again, this location might not be ideal for many designers and if it isn’t, they can take advantage of the “background-position” property, which allows for changing the position of the image in relation to the parent element’s area. I’ll give some examples of this property below and go over what each means below:

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;

Actually, I’m not sure I even need to clarify what the above values accomplish. They’re fairly self explanatory. The only one that may be a challenge is the last one that uses percentages. In that case, the 25% simply moves the upper left corner of the image over to the right by 25% of the parent element’s content area and the 75% moves the same part of the image down 75% of the content area.

Shorthand

Wow, we went over quite a few background properties in this post so far. If we were to write all these out like I displayed them above, that would certainly be a lot of writing. Luckily, there’s a shorthand property available that cuts out a lot of writing. I’ll give an example of what that shorthand might look like:

background: blue url(../img/background.png) no-repeat center / cover;

This one background property applies all the values we discussed above to a single rule. Now that’s efficient.

Floats

One of the most popular layout methods available in CSS has to do with “floats,” or floating elements. This method has been around as long as I can remember and I’ve used it in numerous projects. While it does have a few drawbacks, it’s quite effective in what it’s meant to do – and that’s position elements where a designer would like them.

If you remember back to my previous post on the CSS box model, you’ll recall that I discussed inline elements and block-level elements. Basically, inline elements follow each other all the way down the flow of the page, sort of like a snake. These types of elements, if small enough, can travel like words in a paragraph, side by side, until they reach the end of the line. Once that happens, they begin a new line and start all over again.

Block-level elements are totally different. With these types of elements, it’s as though someone hits the enter key every time they type a word. They don’t travel down the page like a snake – they stack on top of one another and create a column, no matter how small the “box” is. That’s the difference between inline elements and block-level elements. Both have their place in page layout.

Sometimes, when positioning elements on a page, a designer wants to place block-level elements next to each other, as opposed to on top of one another. Without the use of floats, this can be a challenge.

Let me give you a code example and when I’m finished with that, I’ll tell you what’s going on:

.left-column {
    width: 48%;
}

.right-column {
    width: 48%;
}

Let’s pretend that the two classes above are applied to two div elements. Under normal circumstance, written like this, these two elements would stack above and below one another, even though they only consume less than half of the width of the entire parent element. This is because div elements are block-level elements. Remember, block-level elements take up the entire width of their parent element, no matter the stated width of the element themselves.

In order to work around this issue, we can use what’s called a “float.” By using a float, we can circumvent the traditional block-level challenges and essentially turn our block-level element into an inline one.

So, if we took advantage of the float property, our new code would look like this:

.left-column {
    width: 48%;
    float: left;
}

.right-column {
    width: 48%;
    float: right;
}

With this code in place, our layout would be as we would like it – two columns of equal width.

If you’re interested in learning more about floats in CSS, please take a look at these resources:

CSS Float – W3Schools

All About Floats | CSS-Tricks

CSS Floats 101 · An A List Apart Article

Clearing Floats

As I mentioned above, using floats as a layout technique has its drawbacks. One of those drawbacks is that once you float an element, you take it out of the normal flow of your page. While a floated element will remain situated inside a block-level element, code-wise, the element it’s inside, may “collapse,” meaning the floor of the surrounding element may rise and occupy the same space as the floated element. Its content will likely overlap, hide behind or wrap the floated element. Any way you look at it, it’s not good. It’s sort of like playing with blocks as a kid. Imagine trying to stack blocks on top of each other and instead of stacking, they kept melting into one another.

There is a technique that’s used to, what we like to call, “clear a float.” Basically, we can use the “clear” property to put things back where they’re supposed to be. Take a look at this code:

<div style="clear: both;"></div>

In order to clear a float and allow the parent element to surround the floated elements the way it’s supposed to, all we need to do is add this bit of code after our last floated element. It’s that easy.

There is another method that the pros like to use. Take a look at this code:

.group:after {
    content: "";
    display: table;
    clear: both;
}

Instead of adding an new element to your HTML code like the method I first described, all you would need to do is to add the “.group” class to any parent element that you’d like cleared. This will have the same effect as the first method. So basically, the parent div in our HTML code would look like this:

<div class="parent-element group">
    <div class="left-column">
        // CONTENT
    </div>
    <div class="right-column">
        // CONTENT
    </div>
</div>

——

If you’re interested in more CSS related posts, please be sure to visit my CSS category. I write almost every day, so you’ll be sure to find something you’re interested in.

In CSS, the box model is where we start to have fun. It’s the basis of page layout, so it sort of constitutes the building blocks of what our pages will look like. The box model isn’t difficult to understand either, once we grasp a few key concepts.

In the most basic sense, the box model applies to each and every element on an HTML web page. Included in the box model are both inline and block-level elements. An inline element occupies only the space bounded by the tags that define the inline element, while a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

Here are some great examples of inline and block-level HTML elements:

Inline

<span></span>
<b></b>
<td></td>
<a></a>
<img>

Block

<div></div>
<h1></h1> //ALL HEADING TAGS
<p></p>
<ul></ul>
<table></table>

To explain this a bit better, inline elements can reside inside an HTML document similar to how a word resides inside a paragraph. It only takes up the space of the element (or word) itself. “The boy has red hair.” Think of the word, “boy” as an inline element. It goes with the flow of what’s around it.

A block-level element takes up the entire line, or space, from side to side, within its parent container. Take a look at the paragraph before this one. Now take a look at this paragraph. Notice how they both consume the entire row, from side to side. Block-level elements stack upon one another. It’s as if there is a line break in between each of them.

All in all, each element on a page is considered a box. To start with, if a box is empty on a page, it’s invisible to the eye, meaning a user won’t be able to see it. The empty box would be considered the content area. If we put something inside the content area, such as a sentence or an image, we’d have a visible box. No spacing or formatting would be applied to it.

Before reading the sections below, I suggest you take a quick look at this MDN page because it displays a nice example of what a block looks like and it separates out each level of the formatting I’m going to discuss next.

Padding

If we wanted to adjust the spacing of our box, we can apply a bit of formatting to it by way of padding. What’s padding? Well, padding inside a box is the space that’s between the content area and the edge of the box itself. It’s a buffer area, that allows the content of a box to distance itself from what’s outside the box.

I’ll give an example of some code below. This is the basic syntax for padding and it will be applied to a div element.

div {
    padding: 10px;
}

In the example above, the content inside the div element would be padded by ten pixels on every side. Next up, I’ll show you how to pad something side by side.

div {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

The code above would pad the content of the box exactly the same way as the first example. You can see though, if you wanted to adjust the distance of each side, you could easily do that by giving different values for each property. If you have identical values for the top and bottom of the box and two different identical values for the left and right sides of the box, you could write some shorthand code like this:

div {
    padding: 10px 15px;
}

The first value would pad the top and bottom and the second value would pad the left and right.

div {
    padding: 10px 15px 20px;
}

In the example above, the first value would pad the top of the box, the second value would pad the left and right sides of the box and the third value would pad the bottom of the box. If we wanted to continue our shorthand method of padding with unique values for each side, we could do it like this (a shorthand way to accomplish what the second example did):

div {
    padding: 10px 15px 20px 25px;
}

The way this works is like this: each value in the rule above rotates around the block in a clockwise fashion. So, 10px would be the top, 15px would be on the right, 20px would be at the bottom and 25px would be on the left.

Borders

When it comes to adding borders to our boxes, much of what I covered above applies. The majority of what changes has to do with the additional rules we are about to take advantage of. Let me show you some code below:

div {
    border-width: 5px;
    border-style: solid;
    border-color: #cccccc;
}

As you can see, instead of simply adding a border width, which would be comparable to the rule for padding, we’re able to designate a style as well as color. For lots of great details on these properties and values, please take a look at this page.

What I’d like to show here is not so much about the micro details of all the possible values we’re able to give our properties, but more about how to go about writing the rules themselves. For instance, let’s say we’d like to vary what’s displayed, regarding borders, for each side of our box.

div {
    border-width: 5px 10px 15px 20px;
    border-style: solid dotted dashed double;
    border-color: #cccccc #dddddd #eeeeee #ffffff;
}

Now, as you can see from the code above, we can give each side of our box a unique border property. And just like the padding examples above, the application of these properties flows around the box in a clockwise fashion.

If we were interested in sticking with the same border values all the way around our box, we could skip writing out three rules and simply write one rule in shorthand. It would look something like this:

div {
    border: 5px solid #cccccc;
}

In the above example, I created a border with a width of 5px, a style of solid and a color of grey.

Now, let’s pretend that we only wanted to have a top border. We can accomplish this by using the same shorthand as I just showed, but by adding a few keywords in the property:

div {
    border-top-style: 5px solid #cccccc;
}

Now the box would only have a top border with the values I discussed previously.

Margins

The wonderful thing about margins is that they are strikingly similar to padding. But instead of padding the content inside our box (squeezing our content area), we’re buffering space outside our box, pushing it away, (or drawing it closer with negative values) from other elements on the page. So, to recap: padding inserts spacing inside the box edges and margin adds spacing outside the box edges.

Let me give you some code examples so you know how to write margin properties:

div {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

I think you see where I’m going with this. If you re-read the padding section above and replace all instances of “padding” with “margin,” you’d be all set. There is one thing I’d like to fill you in on though. With margins, if you wanted to center a block-level element on the page, you could do it with a value of “auto.” So take a look at this:

div {
    width: 50%;
    margin auto;
}

In the above example, we have a div element that only takes up half the width of the page. To center it, or give the same margin value on all sides, we use the “auto” value.

Display

For the final section of this post, I’d like to discuss display values. While I won’t go into minute details here, I will cover a few of the more popular values you may find or might want to use in your own designs. For a full immersion into the CSS display property, please take a look at these resources:

MDN Display

W3Schools Display Property

CSS Tricks Display

Learn CSS Layout: The Display Property

The four values I’d like to go over are “none,” “inline,” “block” and “inline-block.” These are the most prevalent on the web as well as the most useful. In order to keep things simple, I think I’m merely going to give a definition of each value below.

None – When using the none value with the display property for an element, that element will become invisible. All descendant elements will become invisible as well.

Inline – If you apply an inline value to an element that comes with a block-level value by default, you essentially switch the block-level attribute to inline. So, if you were to use an inline value for an H1 element, that heading would fall into the flow of the document, as opposed to following the standards for block-level elements.

Block – The display block value is the opposite of the inline value. This value switches an inline element to a block-level element, giving it the properties of that.

Inline-block – This value changes an element’s default value to an inline-block value. In essence, this value displays an element as an inline-level block container. It maintains the characteristics of a block-level element, but flows with the document like an inline element does.

——

If you have any questions or comments regarding this post, please leave them below. If you would like to read more about CSS, be sure to check out my CSS category. I write almost every day and it’s growing by leaps and bounds.

If there’s one area of CSS that confuses me, it’s got to do with values and units. Especially since the onset of responsive web design (mobile), varying screen resolution, the plethora of screen sizes, etc… What once was a pixel displaying on a desktop has taken on new life. There are considerations today that we once hadn’t contemplated. But, I suppose, like everything else, we’ll adapt.

Values

If you remember back to my previous post on CSS selectors, you remember the layout of a CSS rule. If you don’t, then just take a look below:

selector {
    property: value;
}

In the above example, we have a selector followed by a property and a value. In this post, I’m going to be talking about what’s inside the declaration, or what’s inside the curly braces. More specifically, the value that comes after the property.

In order to make things a bit more clear, I’m going to use an example to help understand the rule above. Pretend our web page is a neighborhood with a whole bunch of houses in it. In the code above, our selector is a house. We could have selected a tree or a car, but we chose a house. Now that we’ve selected something, we can style it. So, say we’d like to paint the house. In the code above, we would use the property inside our declaration block (curly braces) to identify that we’d like to target a color. Since we’ve chosen the property to be color, we are limited to what we can use as values for that color. Obviously, we can’t say that we want to color to be “5.” We also can’t say that we want the color to be “center.” What I’m trying to say here is that once we choose a property, we’re limited to values that pertain to that specific property. We can’t willy nilly throw anything at it. If we chose to align the house on a piece of land somewhere, we certainly couldn’t identify the alignment as being blue. For every CSS property, there are a specific number of values that can be associated with it. Those values are categorized into data types. And in this case, it would make perfect sense to paint our house in the example a color of red.

To learn about CSS data types, check out the MDN page on exactly that.

Pixel Units

Sometimes in CSS, two datatypes are combined to create a value. In the example below, I think we’d agree that there’s something wrong.

.container {
    width: 1000;
}

What’s missing? That’s right – we have no idea what “1000” is. Is it miles? Feet? Inches? Or perhaps pixels? in this case, it’s 1000 pixels, which is a “fixed” length unit. To learn about length data types, check out this resource:

MDN Length Data Type

To learn about relative units and fixed units, simply scroll down the page.

To correct the code example above and allow it to function correctly, we’ll add the length data type to the number data type.

.container {
    width: 1000px;
}

To learn about number data types, take a look at this resource:

MDN Number Data Type

As I mentioned above, pixels are a fixed length unit. This means that when you use one in your CSS rule, there’s no flexibility. If you make a box a specific pixel height or width, that’s what it’s going to be across all devices. Sometimes, especially today, you’ll see scroll bars appear in the browser window because of this. We’ll talk about relative units later and the length data type’s impact on responsive web design, but for now, just be aware that designers have been using fixed pixels for years and for some areas of your design, they’re perfectly suitable.

Percentage Values

If you’ve ever seen a fluid layout, or an object held within a layout, shrink and grow on a screen, depending on the size of that screen, you may have been viewing a layout that uses percentage values as a length property. There are quite a few CSS properties that will accept percentage values and the way it works is this: whatever the percentage value is, it’s relative to its parent’s width. If you have a container in your layout that measures 1000 pixels wide and a box inside that container that measures 90%, then the box measures 900 pixels wide.

In order to use percentages as values, you’ll need to define a number and then put the % symbol directly after it. As with all combined data types of this nature, you can not have a space between the two. To learn more about percentages, please review this reference:

MDN Percentage Data Types

For an example of what a percentage value look like, check out the code example below:

.container {
    width: 90%;
}

Em Units

Em units are primarily used when sizing fonts and are great when you need to make those font sizes scalable in your layout. They way they work are like this: If you were to not size a font at all, the font would be sized according to the browser’s default size, which is normally 16 pixels. In ems, the 16 pixels are equal to 1. So:

1 em = 16 pixels
2 em = 32 pixels
3 em = 48 pixels

etc…

To learn about these relative length units in more detail, take a look at this resource:

MDN Length Data Types – Relative Length Units

Just scroll down to the “Units” heading.

Like I described above, ems are relative to their parent element. And if we work off the premise that the most parent element is the document itself, we’re working off the premise that 1 em equals 16 pixels. Take a look at the following code example:

p {
    font-size: 1em;
}

In the code above, the paragraph’s font size will be 16 pixels tall. Here’s the thing – what if we adjusted the font size for the entire body?

body {
    font-size: 2em;
}

p {
    font-size: 1em;
}

This is going to get a bit confusing, but stay with me.

If we adjust the font size for the body element to equal 2 ems, this becomes the new base for everything else in our document to work from. So when the body element text size equals 2 ems and the paragraph font size equals 1 em, they both equal font sizes of 32 pixels tall. 2 ems is 32 pixels and the paragraph size equals one of those 2 em units, so that’s also 32 pixels.

Let’s say that we want to make our paragraph text really big, so we change the em size of it to:

body {
    font-size: 2em;
}

p {
    font-size: 3em;
}

Can you guess how many pixels tall the paragraph text will be now? Well, since we’re still working from the premise that we have a base value of 32 pixels, all we need to do is multiply our paragraph em size by that for our result. So, 32 pixels multiplied by 3 ems equals 96 pixels.

32 pixels * 3 ems = 96 pixels

What if we had an existing stylesheet that was created without the use of these relative em units? What if all font sizes were sized in fixed pixel units and we wanted to change that? Well, what we’d need to do is a bit of math. Here’s what our code might look like:

p {
    font-size: 100px;
}

If we wanted to change this pixel sized font to ems, we’d need to do some division.

100 pixels / 16 pixels = 6.25 ems

This is what our new code would look like:

p {
    font-size: 6.25em;
}

If we changed our code to look like this, our text size would be exactly the same. Let’s do another example:

body {
    font-size: 2em;
}

p {
    font-size: 100px;
}

Since our base is now 2 ems, which is double the previous start point of 1 em (the default browser size), we need to alter the values of our equation:

100 pixels / 32 pixels = 3.125 ems

Our new code would look like this:

body {
    font-size: 2em;
}

p {
    font-size: 3.125em;
}

Again, our paragraph font size would be identical to what it was before we switched to using em units.

Here’s the thing: there’s a rabbit hole associated with relative em units. Let’s say that we add some code to our example:

body {
    font-size: 2em;
}

.container {
    font-size: 3em;
}

p {
    font-size: 3.125em;
}

Since ems are relative to their parent element, they can “compound,” the further down they go. And since our paragraph is now inside a container class, our text is going to get large, fast. Let’s do the math.

If our baseline is 2 ems (body element), which equals 32 pixels, that means that the text inside our container class (inside the body element) will be three times that, or 96 pixels.

32 pixels * 3 ems = 96 pixels

Since our paragraph is nested within the element with the container class, our paragraph text will be 3.125 times larger than it. So:

96 pixels * 3.125 ems = 300 pixels

As you can imagine, this can get out of control if you have lots of nested elements with a variety of relative font sizes. This is where Rem units come into play.

Rem Units

Rem (or “root” em) units are scalable like em units, but they don’t follow the same compounding rules as em units do, thus, no rabbit hole. The html element is the parent of all rem units, so you won’t get stuck trying to figure out what’s a parent and what’s not, as well as what font sizes are across your document. If you know that the html element has a font size of 1 em, or 16 pixels, you can rest assured that your paragraph element with a font size of 2 rems is actually 32 pixels tall. Here’s what this code looks like:

body {
    font-size: 2rem;
}

.container {
    font-size: 3rem;
}

p {
    font-size: 3.125rem;
}

The code above is equivalent to this code:

body {
    font-size: 32px;
}

.container {
    font-size: 48px;
}

p {
    font-size: 50px;
}

Rem units offer some beautiful scaling as well. If we added another rule to our code, we can change the font sizes that utilize rem units across our entire document. Take a look at this:

html {
    font-size: 2rem;
}

body {
    font-size: 2rem;
}

.container {
    font-size: 3rem;
}

p {
    font-size: 3.125rem;
}

Now, the pixel dimensions would change and the new sizes would be the equivalent of this:

html {
    font-size: 2rem;
}

body {
    font-size: 64px;
}

.container {
    font-size: 96px;
}

p {
    font-size: 100px;
}

Since we changed the parent element (html) font size to 2 ems, all child elements that use rem units doubled.

To chime in on some of the discussion out there on em and rem units, check out these posts:

Font Sizing With Rem – Snook.ca

Confused About REM and EM? | Jeremy Church

Relative is the New Absolute: the Rem Unit

Web Design Basics: Rem vs. Em vs. Px — Sizing Elements In CSS

Font Size Idea: Px at the Root, Rem for Components, Em For Text Elements

Color Data Types

The world of color is a very deep one. University courses have been taught on the topic. Every time I think about color, my head spins because what begins as something simple, quickly turns into a project.

CSS once handled aspects of color in a narrow way. As time marches on though, more and more options and features get added to CSS, making color a significant part of coding in this language. For our purposes though, it makes no difference how complex things get, because we’re going to stay on the straight and narrow. In this post, we’re going to keep it simple.

The three values of color we’re going to look at here are color keywords, hexadecimal (RGB hex) and RGB. If you’re interested in learning about more color values when it comes to CSS, feel free to check out this reference:

MDN Color Data Types

Let’s say that we want to make our primary page heading blue. We can do this in a number of ways. The first way being through the use of a color keyword. This is the fastest and most simple method of adding a color value to a CSS rule.

h1 {
    color: blue;
}

By using this code in our CSS file, our H1 will be blue. We can also use many other keywords. Let’s say we wanted our H1 element to be corn flower blue instead. We can simply update our code to look like this:

h1 {
    color: cornflowerblue;
}

This seems easy, but it begs the question – where in the heck do I find the names of these color keywords? I mean sure, red, blue, green and yellow are the easy ones, but I would never have thought of corn flower blue. If you browse the link I shared with you above, you’ll see the color keywords that CSS accepts. You can also use a handy tool, such as:

RGB.to

This will help take some of the pain away from searching through many, many colors. It also converts keywords to their respective hex and RGB values.

Color keywords are straightforward. What if we wanted to get away from using keywords and start using hex values instead? Many designers prefer to take advantage of hex values because they are easier to write and can be abbreviated. There are also many more hex value combinations than color keywords. Next, we’re going to convert our color keywords to hex values.

h1 {
    color: #0000ff;
}

h1 {
    color: #6495ed;
}

The above colors are blue and cornflowerblue, respectively. How did I get those hex values? There are a number of ways. Two being the sites I listed above. If you visit this page on the RGB site, and then click blue and cornflowerblue, you’ll see everything you need.

Notice the hash in front of the six character code. Hexadecimal codes always begin with a hash.

I’m going to give you a hint here and you can choose whether or not you want to use it. I don’t. I always write my hex values out long hand, but if you wanted to, you could shorten certain hex values. Let’s take a look at some examples here:

#0000ff = #00f

#006699 = #069

#000000 = #000

The way hex values work is that the first two characters equal the red value, the second two characters equal the green value and the third two characters equal the blue value. So if you have two identical characters for each color value in your hex code, CSS only makes you write one of those characters.

Quite honestly, the way I choose my hex values is to open Photoshop and use the color picker. If you don’t have Photoshop, you can use a similar tool like something found here.

The last color value I’m going to talk about is RGB. To make things easy, I’m going to convert our blue and cornflowerblue keywords and hex values into RGB values in this next example:

h1 {
    color: rgb(0, 0, 255);
}

h1 {
    color: rgb(100, 149, 237);
}

The previously covered color keywords and hex values are equivalent to these RGB values you see directly above. I used the tools I spoke of to convert the colors the same way I did previously. Again, if you want a really easy to use tool to help out with this, check out:

W3Schools HTML Color Picker

There is one last thing I want to cover, though, and that’s how to use the RGB opacity value to add some transparency to your chosen colors. Take a look at this code:

h1 {
    color: rgba(0, 0, 255, .8);
}

h1 {
    color: rgba(100, 149, 237, .3);
}

By adding an “a” after the RGB in the code above, I told the browser that I want to make my color somewhat transparent. The only other task that needs completing is to tell the browser how transparent I’d like to make it. That’s where the final fourth value comes in, inside the parenthesis. In the first color above (blue), I added an 80% transparency to our fully saturated color. Remember from math class? 1 equals 100%, so .8 would equal 80%.

In the next block of code (cornflowerblue), I added a 30% transparency value to our color. Now, both colors will be shown at a level of transparency, meaning, they will appear lighter when on white backgrounds or whatever is behind them will show through at the set degree on textured or colored backgrounds.

Formatting Text

Formatting text with CSS is fairly straightforward. Later on, we’ll get into some more creative and involved formatting options, but for now, we’ll just focus on the easy stuff – making text look presentable on a web page.

I think I’m going to give code examples and then explain what’s going to happen to our text because of that code. I’ll also link to resources when relevant.

h1 {
    text-align: center;
}

The “text-align” property describes how inline content, like text, is aligned in its parent block element. The above code will center our heading text. There are further options available with the text-align property, such as left, right, justify, justify-all, start, end, match-parent and inherit. For more information on the text-align property, please look at this page.

h1 {
    text-transform: uppercase;
}

The “text-transform” property tells the browser how to display our text with regards to its capitalization. In the code example above, our heading text will be capitalized – every letter of it. There are more options available for this property, such as capitalize, lowercase, none, full-width, and inherit. For more on this property, you may browse this page.

h1 {
    text-decoration: underline;
}

The “text-decoration” property tells the browser what type of formatting to give the text in regards to underline, overline, line-through or blink. In the example above, our specified text would be underlined. For more information in this property, take a look at this page.

h1 {
    font-weight: normal;
}

The “font-weight” property is what we use to set the weight of our specified text. Since heading tags are normally set to bold by the browser, in the example above, I set the weight to normal. There are many other weights to choose from with this property, but you need to concern yourself with their availability regarding the fonts you choose to use. Not all fonts support all weights. The available weights for this property are normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit, with 100 being the lightest and 900 being the heaviest. If you would like to choose a font weight for text that’s relative to its parent’s font weight, you could go with lighter and bolder. To learn more about font weights, take a look at this page.

body {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

The “font-family” property lets us tell the browser what our prioritized list of font family names and/or generic family names for the selected element is going to be. In the previous sentence, notice the word, “prioritized.” If you take a look at the above code example, you can see that I set the font family “font stack” for the body element. This means that, if no other fonts are specified for any other element on the page, all fonts will be set to Arial. If Arial isn’t available on the user’s computer for some reason, the next font, “Helvetica Neue” will be used. If not that one, Helvetica, etc… Each font in the list is a fall back for the previous one.

Also, notice how the ‘Helvetica Neue’ is in quotes. These can be either single or double quotes. The reason quotes are used is because it’s a font that has two or more words in it. Single word fonts don’t need quotes and multiple word fonts do. To learn more about the font-family property, take a look at the MDN page on the topic.

body {
    font-style: italic;
}

The “font-style” property allows us to select whether we want our font to take on italic or oblique faces within a font-family. This is fairly straightforward. In the above code example, all the text on our page would be in italics. To learn more about this, check out this page.

body {
    line-height: 1.5;
}

The “line-height” property specifies the minimum height of line boxes within an element. This is actually a fairly deep topic and I’ll be talking about line height at length in future posts, but I wanted to give you a taste of it here. Basically, line height spaces text lines vertically from one another. Be default, lines can be cramped. By adjusting line height, you can easily make things more readable.

In the code example above, I set all the text in our document to a line height of 1.5. This is a unit-less value and is in direct relation to the font size it’s adjusting. For many of my personal projects, I set the line height to 175%, because that gives some nice spacing as well.

When adjusting line height, we’re able to take advantage of a few data types. We can use numbers, such at the 1.5 I used above. We can also use lengths, such as ems as we discussed previously in this post. An example of that would be 1.8em. We can also use percentages like I just talked about. Remember though, many of these data types are relative, so that compounding effect can creep in when you aren’t expecting it. Lastly, if you’d like to delve into the line height arena, be sure to read up on the topic over at the MDN page.

——

Wow, this was a long post. I think I’m going to stop here. If you have any questions or comments, please leave them below and if you’d like to read some of my other posts on CSS, please check out my CSS category.