Six Tips For Newbies To CSS

CSS (or Cascading Style Sheets to give it its long-winded name), is a computer programming language that is used for the presentation of a website. This language is the cornerstone of an engaging and beautiful looking website. While HTML forms the backbone of skeleton of a website, CSS makes it sparkle and look unique. A website without the application of CSS language would look plain and boring.

People who start up websites often assume that CSS is like rocket science and should be left to professional web designers to understand and implement along with the likes of HTML and Javascript. The great thing is though that CSS gives style to your website independent of the underlying HTML code and Javascript code that has been used to give it the basic functionality. What this means is that with basic understanding of CSS you can alter the styling of your website without changing the underlying code and making the whole thing go haywire.

This is why it is a good language to pick up rudimentary knowledge of. A little tweaking of the styling code on your website or blog can make a big difference to how it looks. You can change how images are displayed, the size of the header, how your sidebar appears and the colour of things like fonts and background. You may also want to learn CSS as part of a wider goal to create your own website from scratch. Whatever the case, we have some great tips for beginners to CSS that will speed you along in the learning process. Here are ten of what we think are the best tips for CSS newbies:

1. Don't change the font size. This is actually quite an important point that many people fail to overlook when first delving into the mysterious world of changing their website's style. Users should always get to pick how big or small they want text to be displayed in their browsers. If it is you who imposes a site-wide change on the font-size, it will affect how legible any text is to end users. This means you should avoid writing code like:

body { font-size: 20px; }

Feel free to change other elements of the font on your website such as the colour or font family that it belongs to. Introducing a change like this to your website could prove disastrous causing visitors to leave because the text isn't legible in their browser window. This is one of the most important things you should keep in mind when beginning to change the CSS code. Often users will start off their CSS experiments by changing the underlying code of easy to understand things such as the font. Just make sure you are not altering its size.

2. Start to combine the elements of your style sheet. What this means is that sometimes more than one element in a CSS style sheet will have the same properties such as which font they use and what colour. Good CSS practise is all about being logical and efficient. If you had say four header elements that all possessed the same properties, wouldn't it make sense to group them into one line of code? Some people learning CSS fail to do this. They are so concerned about getting the code right that they forget to use logic. With less code to write, the chances of making mistakes decrease. As an example lets say you have four headers, all sharing the same font family, in this case Serif. Instead of constructing four separate lines of code, you could just write one line of code likes this:

h1,h2,h3,h4 { font-family: Serif }

It makes so much more sense to build your code in this way. You will reduce clutter and develop a cleaner coding style.

3. Make use of comments. This is another great tip for beginners that is applicable even for advanced users. If you intend to go further into the world of CSS or any sort of programming language for that matter, you need to get into the habit of adding comments to your code. Not doing so can lead to confusion, especially in code that is complex in nature. Even for beginners though, adding comments to the CSS style sheet will help you with identifying what particular lines of code mean or what the purpose of certain elements is. To add comments to code you add /* before what your comment and */ to close the comment. So as an example:

/* this is a comment */

4. Text-transform. This is one of the handiest bits of code for a beginner to learn. If you are starting from scratch with CSS with the end goal of becoming proficient enough to design your own websites, learning nifty properties like this are a sure-fire way to get good at coding and start off your CSS knowledge with a bang. Let's say that you wanted to change how text is formatted across an entire header. For example, maybe you want every single word in a certain header to appear with its first letter capitalized. You can achieve this with one line of code, like this:


5. Validate your code. Another great beginners tip. This is a quick way to spot errors in your code. If you run a CSS style sheet with some minor changes to the font, headers or sidebar and it isn't looking right you may be left scratching your head for ages trying to figure out what mistake you have made. Sometimes your code may not work at all and you can't notice any glaring mistakes. Human error is quite prevalent in coding. A missed bracket or semi-colon here and there is an easy thing to do. Spotting it is difficult among hundreds of lines of code though. A CSS validator is a piece of software that checks your code for common errors. It runs through it in a matter of seconds as well saving you the much-needed time of analysing each piece of code in a painstaking process that may yield no results.