Designing in plain old HTML is a thing of the past, if you use HTML for designing, you probably design using tables (at least once) and using blank GIFs for positioning layouts. This is a bad way for designing in the world wide web in today’s standards, as in reality it wastes disk space and monthly bandwidth. This is because to do simple things in HTML, it would require a large amount of code. HTML wasn’t really originally created for styling content; it was invented all those years back for structuring content (well that was the case at first). After a few years people started demanding new features and typically company giants such as Netscape and Microsoft added new tags for structural as well as styling purposes. These unlocked new features and Webmasters had more freedom to create good-looking Web templates. However, not everything came out as expected; Webmasters started using tables for creating layouts, and their original invention was for tabular content/data only.
Then came a small nifty fellow called Cascading Style Sheets (CSS for short); it is the new generation for styling in Web pages. Since the 21st century it has been better known throughout the Web and more people are switching to CSS for styling Web pages. Now you’re probably wondering – what can CSS offer that HTML can’t? Well, simply put, it can offer loads of advantages and I can personally say it is incredibily easy to learn. CSS actually has more styling features and possibilities than plain old HTML, and even more it saves bandwidth!
Just to put your mind at rest – I can safely say it is much, much easier to design Web templates in CSS than ordinary HTML. This is because CSS has a nifty feature called margins, paddings, width and height. The margin is typically used to set the space around elements. For example if you put: margin-left: 50px – this would put an invisible space 50 pixels to the left (like if you used a transparent GIF 50 pixels in width). The padding is used for the space around the border, same as the margin, but it is the space around an element inside the border. For example if you had a box with a border and you put the following CSS code in: padding-left: 10px – there would be an invisible space to the left inside the border. The width and height is pretty self-explanatory, which defines the “size” of such element. Let me remind you an element is the HTML tag you wish to define.
That’s not all in CSS – there are plenty of other things CSS can do – such as changing the way links behave, for instance when they are hovered over by the cursor, or when they have been visited. As well as other complementary features such as changing font, colour and size as well as make all text in a specific element stay capitalized or lower-cased regardless of the circumstance. There is also one feature that I like a lot – which is called font-variant, which makes the text all capitalized (or small-capped).
Lastly, you’re probably wondering how it could save bandwidth, well the answer is pretty simple; if you use CSS to style elements in HTML, then there’s absolutely no need to use HTML styling, except the structural HTML tags (for example the paragraph or heading tag).
So now you’ve learnt quite a lot in CSS and I think you are ready to explore options for learning CSS. Not to worry – there are plenty of online tutorials such as w3Schools.com and HTML.net and within an hour or two, you’ll be wizzing away in CSS. Don’t forget, Google is your friend; search on Google.com for CSS tutorials as Google is the best way to find resources online.