15 Tips for Beginners to Get You Started Using CSS

The final section of our guide is to give you some great tips that will help you get started – especially now that you know the basics of CSS. By utilizing the tips that we will cover below, you will have an easier time overall with your CSS.

1. Your CSS Should be Readable

If your CSS is not readable, then it is going to be extremely difficult for you to track it and to make the necessary changes that you need. When using CSS to code, people usually use one of two approaches:

Add Everything on One Line: This approach is different from what we have utilized in the guide. Instead of having line after line, everything is on one line and it looks like this:

.someDiv { background: red; padding: 2em; border: 1px solid black; }

Group Style: The group style is what you see in the majority of this guide. Just to review, it looks like this:

.somDiv {
  background: red;
  padding: 2em;
  border: 1px solid black;
}

When it comes to these types of styles, one is not particularly better than the other. At the end of the day, it is best to pick a style and to stick with it. The more consistent you are, the more organized your CSS is, the easier it will be to navigate in the long run.

2. Consistency with CSS

As mentioned above, consistency is key to good CSS. As you start using CSS, you are going to start your own style that you use when naming things within your code. In addition, certain classes will have certain themes and by following a particular strategy, you can create your codes faster and much more easily.

Another advantage of consistency is that it leads to proficiency. Eventually, you will be able to call yourself a CSS expert – which is a point that you must truly want to get to.

3. Codes Should be Separated into Blocks

Unlike the two tips above, this is a bit of an advanced approach. Once you really figure out CSS and how to use it proficiently, you can start organizing your CSS into blocks that are your sections. Doing this makes CSS coding very easy and it also enables you to use your CSS in the long term without confusion and issues. A few examples of block codes include:

<Structure></Structure> and <typography></typography>

These are only two codes that you can use. There are many more that you can find online too.

4. How to Handle IDs, Selectors, Properties, and IDs

One tricky area for beginners is the concept of how to properly handle IDs, selectors, properties, and IDs. Newbies either use these too much, too little, or not at all. Here is a general overview how you should place these within your text:

  • Minimize Selectors. The fewer selectors you have, the less you will need to deal with the issue of overriding. Remember, you can only use one type of selector per text. In addition, the fewer selectors you have, the easier time you will have to troubleshoot if that issue does arise.
  • Minimize CSS Hacks. In this guide, we really have not covered CSS hacks; this is a beginner’s guide after all. However, once you start venturing deeper into CSS, you will figure out that there are hacks available – just do not get carried away by them. If your CSS is functional, then there is no point in adding something that can alter the set up – sometimes for the better and sometimes for the worst.
  • Minimize Containers. Notice a pattern here? Keep containers at a minimum too. There are many structural elements that you can use to achieve a certain layout. You do not need to inundate your text with too much information.
  • Minimize Properties. A final point for this tip is to keep your properties as a minimum. The more comfortable you get with CSS, the better you will get at working smarter, not harder. Properties should only be added when there is a purpose. If you have no purpose in adding the text, then avoid doing so altogether.

The point of this tip is to essentially keep your text as organized as possible. With organization, you will get better at managing your CSS.

5. Shorthand Exists – Use it

We have not really covered shorthand in this guide either, but eventually you will get to shorthand and wonder about whether it is necessary or not. First, no – shorthand is not necessary. However, it can make things a lot easier for you and it is another step in becoming more advanced at CSS.

You can use shorthand for codes like padding, margins, and font. In addition, the coding can be combined on one line as seen in the first tip, or you can do a per line approach.

6. Learn to Vertically Center Text

CSS provides you with numerous capabilities, including centering your text. While it seems like an odd thing to cover, the opportunity to vertically center your text is relatively new – which is why it is worth covering; not many people know about it. Because handing vertical centering on your own can be a challenge, many recommend using Flexbox. This approach makes alignment less stressful and you can achieve results much more quickly than if you were to handle the process yourself.

Keep in mind that vertical centering is an advanced capability, therefore it is best to first cover the basics and be familiar with them before attempting it.

7. Gradients in Unusual Ways

“Unusual” does not always mean bad, especially when it comes to CSS. Gradients alter how the background of your page appears and for the better. If you do decide to use gradients, then do so sparingly. As many advanced coders know, gradients can be heavy and hard on your processor. Here is an example of a gradient:

@mixin gradedBullet ($colour) {
background-image:
linear-gradient (left),
lighten ($colour, 15%) 10px,
$colour 11px,
$colour 20px,
darken ($colour, 15%) 21px,
darken ($colour, 15%) 30px
transparent 31px
);
}

8. You Can Add Comments into Your Code

Pretty neat, right? Adding comments into your code can be extremely useful. To add comments into your code so that you can follow it more easily, simply use the following:

/* Here's how you comment CSS */

 

9. Block and Inline – the Difference

This guide covered inline elements, but what we have not really touched upon are block elements. We already know t hat inline elements do not go beyond how much space they require. In addition, they will not create a new line just to take up more space. On the other hand, block elements clear the line below – thereby taking up more space.

Here is an example of both block and inline elements:

span, a, strong, em, img, br, input, abbr, acronym

Block elements:

div, h1…h6, p, ul, li, table, blockquote, pre, form

10. Programs like Firebug Help

You likely have not heard about Firebug if you are a beginner at the process. Well, we suggest that you certainly check it out because it can be useful to you during the CSS process. Firebug is a common tool used by web developers. The program comes equipped with Firefox extensions such as inspect HTML, find error, and debug JavaScript. You also inspect, modify, and alter your CSS code in real time.

11. Text-Transform

Text Transform is a CSS property that enables you to standardize the format of the text on your website. For instance, if you want to create only lowercase headers, then text-transform enables you to do so with ease. To transform the text, just add the following command:

text-transform: lowercase;

Once you add the command, all of your headers will transform to lowercase. You are not limited to lowercase transformations. You can also transform your text to all uppercase. This is a pretty neat capability if you want to get your CSS coding done quickly.

12. Margins and Padding for All

Margins and padding can significantly improve how your text appears on your webpage – for the better. You should keep in mind that how margins and padding are rendered can change, depending upon the browser version that you are using. A reset capability allows you to globally reset your margins and padding to zero, which can be helpful if you are worried about how the margin and padding will look on a particular browser. This type of change should be used with care since it can sometimes lead to more issues, if you do not know how to use it properly.

13. Fluid Images

Unlike regular images, fluid images are a pretty recent technique. Fluid images create a more responsive design and adding the fluid images is just one way to achieve the overall responsiveness. To create fluid images within your CSS, this is what you use:

 

img {max-width: 100%}

14. Rounded Corners

Rounded corners is another nifty tip that you can use to alter the appearance of your webpage. If you think that rounded corners is something fancier than it sounds though, it really is not. To round corners on your page, use the following code:

#rcorners1 {
border radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

15. Smaller Caps with a Font Variant

Finally, you can also create a font variant that leads to smaller caps.

 

p {front-variant: small-caps}

Keep in mind that not all fonts have smaller font variations. Also, this style does not look good on all webpages, so make sure that you are making the right decision.

Summary

Hopefully you have had as much fun reading and putting into practice this guide as we have had creating it. Now that you have a strong base for CSS coding, you can start the process of turning a mediocre webpage into a great one. Also, if you are anything like us, you are going to enjoy venturing into the ever-evolving and creative world of CSS and all of the interesting website altering capabilities that it has to offer.

We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)
Compare
0