In every phenomenon the beginning remains always the most notable moment – Thomas Carlyle

How true that is even in modern web design. When you are just starting out, even the most common and simplest task is difficult. I completely understand that and so, gathered a list of questions asked in forums, social networks and other places that I hope will be of much help to you. Some might consider this list as elementary stuff and if you are there, Hooray for you! At a later date, I’ll look into something more appropriate for you. Today’s post is one for the beginners who regularly remind me, we were all beginners at one point and still are in other areas.

1. Text Does Not Capitalize Even When You Type In Caps

There is a declaration in the stylesheets that is set to force the title to display in lower cases. Look for the selector that controls the title. It should have something like this:

text-transform: lowercase;

Remove it or replace with:

text-transform: none;

2. The Sidebar or Column is Pushed Down

There are two possible reasons. Either the content inside the column, usually images or frames are too wide or your columns are too wide so they don’t fit in the required space. If the content inside the column is too wide that is an easy fix. Just replace the content with something smaller. If the columns are too wide then you will have to adjust the column’s width. Depending on the design, you may have to adjust more than one column’s width. Keep in mind if the column has padding or margin on the sides, this will affect the total width as well. So if the padding or margin could ‘give’ some, you can take a couple of points here and there to make the overall width smaller.

3. Changed The Style But Nothing Happens

In all probability, there is another style that overrides the one you wrote. In CSS, certain rules will take priority over others. It is not always the last rule you make. It is also how the rule is written. Take a look at the example below.

This is the HTML

Title link

This is the style

h1 a {color: blue}
h1 a {color: red}

If you wanted to change the H1 color to black and you were not aware there are two rules in your design. You edit the first rule (blue). Nothing will change. That is because not only is there a second rule that does the same thing in place, but the second rule is also listed last. To change your H1 link color in this case, you will need to edit the 2nd (or last) rule. In a built up theme, this may not be so apparent. I suggest you open up each stylesheet and use a search function to locate each rule that controls the H1 hyperlink style or even better, use Firebug.

4. Changed The Color of Links But All Links Changed Too

This is actually the opposite problem of the one above. In the previous problem, you have more than one style rule for the same thing (H1 hyperlink). In this scenario, you only have one rule that controls all links, or most links. If you want to only change colors of the links in a specific area then you will need to add your own style rule. How to write it – takes a little CSS know how. Thankfully it is not too difficult. Here’s an example where all links are controlled by one rule:
The HTML

Title link
Link in a paragraph

And this is the style

a {color: green}

To change the paragraph links to blue, you would add this to the stylesheet

p a {color: blue}

Let’s reverse it. If you want the title link in blue and the paragraph link in the default color, you add this to the stylesheet instead.

h1 a {color: blue}

As you see, writing a new rule is not rocket science. You simply enter the HTML you want to control e.g. p a, or h1 a followed by the styles enclosed in curly brackets

5. Prevent Text From Wrapping Around Image

Many times, theme or template designers make all text wrap around images as the default behavior but fail to add CSS rules to cater for the times when you don’t want to wrap the image around text. If you want to ‘un-wrap’ certain images sometimes and not change or undo everything in the past and going forward, the best way is to create a new rule that you can use as and when you want. Let’s say this is the original HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue,
iaculis vel vehicula ut, dictum et sapien. Quisque lorem nunc, scelerisque id
congue viverra, pellentesque vitae ante.

And this is the original CSS

img {float: left}

First, you create your new style rule using a class selector and add it to your CSS like this

img.imagereset {float: none}

Then, add the class to the HTML like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, iaculis vel vehicula
ut, dictum et sapien. Quisque lorem nunc, scelerisque id congue viverra, pellentesque vitae ante.

You might also want to add other classes like align right or center to add more flexibility to your theme for future use. To make the image align right, add this to your CSS

img.imageright {float: right}

And when you want to align the image right do this to your HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, iaculis vel vehicula
ut, dictum et sapien. Quisque lorem nunc, scelerisque id congue viverra, pellentesque vitae ante.

To make the image center aligned, try adding this to your CSS

img.imagecenter {display: block; margin: 0 auto; float: none}

To your HTML, you’d change the class like this

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum augue, iaculis vel vehicula ut,
dictum et sapien. Quisque lorem nunc, scelerisque id congue viverra, pellentesque vitae ante.

6. New CSS Rule Is Ignored

Now you have had a taste of creating new rules, perhaps you have light bulbs going off in your head and you grasp how much more you can control or edit a design. You may be creating a lot of new rules and realize sometimes the new rules you create are totally ignored. How do you ‘promote’ your rule over the original rule so the browser will obey your style rule instead of the old one? This is related to what we discussed in the 2nd problem. In CSS, there is a hierarchy where certain rules will carry more weight than others depending where it is in the stylesheet and how the rule is written.

Besides the last rule being more important, different selectors also carry different different ‘weight’ in CSS. An ID selector carries more weight than a class and a class carries more weight than HTML selector so the priority would be:

1. ID
2. Class
3. HTML

That I know still won’t be too clear when you’re working in the trenches. I this excellent tutorial to help you figure out the weight of each of your style rules so you will know how to ‘promote’ or ‘demote’ certain rules that you write. Scroll down, read and pay attention to the Selector Order Priority segment.

7. New Header Image Is Cut Off

When editing an existing design, one of the first things you would do is to change out the logo or header. You find it and replace the original header with your own header image but the image appears cut off at the bottom. This happens when the header is set as a background image in the stylesheet but at the same time, the block element (perhaps DIV) that holds the header image also has a set height. For example:

#header {
height: 20px;
background: url('https://techbasedmarketing.com/images/twitter-48x48.png') no-repeat;
}

If you test those codes out you will see the image is cut in half or not displaying at all. What to do next will be a judgment call. First, consider if your image is too large in relation to the design. If yes, then it might be easier for you to re-size the image. But if no, the image size is good and altering the height won’t make the design too awkward, then you need to either remove the height property or change the value of the height to be as large or larger than the image.
Remove height property

#header {
background: url('https://techbasedmarketing.com/images/twitter-48x48.png') no-repeat;
}

Increase height

#header {
height: 50px;
background: url('https://techbasedmarketing.com/images/twitter-48x48.png') no-repeat;
}

If you want more help, here is a CSS Basics training you might be interested in.

Photo by Svilen Milev