Learn some great CSS tips and techniques through recipes that clearly define the problem being solved with a working solution in this book that is not a blog.

You are free to copy, distribute, modify or display the book. However, I ask that you always attribute the book to me, Jamie Munro , and do not use it for commercial purposes. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Disabling text selection/highlighting

Problem

You want to prevent text from being selected/highlighted; whether to prevent copying and pasting or accidental text selection.

Solution

To solve this problem you will want to set the user-select CSS property to none.

Discussion

Because each browser is slightly different, the CSS is slightly convoluted because each browser has a slightly different prefixed version of the user-select. Let's take a look at the example:

See the Pen CSS - Disable text selection by Jamie Munro (@endyourif) on CodePen.

In the above example, try selecting the header Title. It is unselectable; however, you can click the button. The user-select property prevents (in this example) all text button being selectable.

If you only wish to apply it to specific elements, you could update the example replacing * with a class name.

Changing the color of an input's placeholder text

Problem

With HTML 5 there is a new option on <input> elements that you let set a placeholder text until the user clicks the input box and starts type. This is a useful tool to help avoid labels or provide examples and you want to be able to color the text a different color to make it stand out more.

Solution

In CSS to target the placeholder element you will want to use ::placeholder. Most browsers have adopted this styling attribute; however, like almost everything CSS related it is not 100% consistent and several browsers require their own previous before the targeted ::placeholder attribute.

Discussion

Let's immediately look at an example of how to accomplish this:

See the Pen CSS - Input placeholder styling by Jamie Munro (@endyourif) on CodePen.

As you can see in this example, the placeholder text for my input box is a nice bolded red text.

Unfortunately each browser specific implementation requires to be on its own, thus requiring some code duplication. The reason behind this is that any browser that doesn't recognize a rule is to ignore it, so when they are grouped together it will ignore the unknown selectors causing the whole group to be invalid.

This is a great opportunity to explore a pre-complied CSS library like SASS to use variables and functions to avoid repetition!

Apply two different colors to a single character

Problem

You have one or more characters in a word/logo that you want to apply multiple colors to (not a gradient).

Solution

To accomplish two unique colors inside one character, the content property of CSS will be used in conjunction with the :before pseudo element.

Discussion

The CSS content property allows you to insert generated content. This property can be used with the :before or :after pseudo element to insert content and style it appropriately.

Let's look at an example:

See the Pen CSS: One character, two colors by Jamie Munro (@endyourif) on CodePen.

In the above example, three different span tags are created with the letters CSS. Each tag contains the attribute data-char with the matching letter in the span tag.

Then in the CSS, the main span element is styled with a color (and a large font size to make it stand out). Then the pseudo element :before styles the value of the data-char attribute with a different color. To get the split color, it sets the width to half of the element.

For fun, I also added the full acronym CSS inside a span tag to demonstrate how the concent can be applied to full words.

Vertically align text inside an element

Problem

You have a piece of text and you want it vertically aligned in the middle of an element.

Solution

This problem is solved by setting a fixed height on the containing element and a matching line height. These two together will cause the text to be vertically centered.

Discussion

Let's take a look at an example where the height and line-height are set for the element with text inside.

See the Pen CSS - Vertical Alignment by Jamie Munro (@endyourif) on CodePen.

In the example above, I created a div element with an h1 tag inside of it. This is the text I want centered. In the CSS, I set an explicit height of 200px and an explicit line height of 200px. I've also horizontally centered the text, thus making both the horizontal and vertical alignment of the text centered.

Force a div to fill the full browser window

Problem

You have content that will not fill the full height of the browser window, but you want to ensure it always does. This would be common with a left/right split of content.

Solution

There are of course multiple solutions to this problem. However, the one I am choosing is to use the CSS unit of measurement called the viewport height, vh for short.

Discussion

In the following example, I will create a common left/right layout where the menu is on the left and the content on the right. The content on the right will take up more space, but I want to make the left-side background color fill the entire browser even though the content does not.

See the Pen CSS - Full height by Jamie Munro (@endyourif) on CodePen.

In the example above, the left side has a fixed width and a fixed height of 100vh. As described earlier, vh standards for viewport height. 1 vh is equal to 1% of the browser's height. So 100vh is the full viewport height.

Vertically align text beside an image

Problem

You have an image and text you wish to show beside it and you want that text to be vertically aligned to the middle of the image.

Solution

The most common thought process would be to use vertical-align: middle on the text that is beside the image. The solution is close, but contrary to what my first instinct would be, the vertical alignment is placed on the image instead.

Discussion

Let's take a look at an example. I will demonstrate first what my gut instinct was - that was wrong - followed by the correct solution.

See the Pen CSS - Vertically align text beside an image by Jamie Munro (@endyourif) on CodePen.

As demonstrated in the example, placing the vertical-align: middle on the text doesn't work as expected, given that you wish the text to be centered. Instead, place it on the img tag does the trick.

Disable resizing of a textarea

Problem

You have a textarea that you do not want to be resized.

Solution

There is a CSS property called resize that can be applied to a textarea that allows disabling, only horizontal, or only vertical resizing of a textarea.

Discussion

In the following example, three textarea are created. Each one will apply a different value to the resize attribute:

See the Pen CSS - Disable textarea resizing by Jamie Munro (@endyourif) on CodePen.

Each textarea was given a name: none, horizontal, and vertical. With the CSS, each textarea was targeted based on its name and was assigned a different value for the resize attribute.

In the example, you will see that the first textarea cannot be resized at all. The second and third can be resized horizontally and vertically, respectively.

Add a border to a div without increasing its width

Problem

You have a div that has a fixed width and height and you want to add a border to it, but you don't want to have the border make the div wider or taller than the fixed dimensions.

Solution

When you have a div with a fixed height that contains a border, you can apply the box-sizing element with the value of border-box. This will make the border go inside of the fixed width and height.

Discussion

To demonstrate the difference between the default box-sizing property and the border-box, I will create an example that contains two divs. The first will use the default setting and the second will use border-box.

See the Pen CSS - Border inside of fixed width and height by Jamie Munro (@endyourif) on CodePen.

Both divs have a fixed width and height of 150px. Both are set to have a green background and a blue border. As the example shows when box-sizing is set to border-box the div remains 150px wide and tall, whereas with the default setting, the border extends the width and height by the borders width - in this case 5px on each side.