- Worldstart's Tech Tips And Computer Help - http://www.worldstart.com -

Some Handy CSS Tricks

Posted By hamid On January 7, 2013 @ 12:00 PM In Web Design | Comments Disabled

Since its introduction to the webmaster community several years ago, CSS has become a great companion to tens of thousands of individuals worldwide who attempt to set up their web pages conveniently and in a hassle-free way. Today, geeks are heavily relying on cascading style sheet commands to create templates, and even the average Joe finds the snippets of scripts rendered in CSS user-friendly and easy to digest.

Let’s have a look at some basic commands that can help one perform tasks easier online, shall we? Use a basic text editor, create a new file and rename it as sample.html. You will use the same tool to edit the file later on. Your raw web page will be created without having to use complex web-authoring tools.

Let’s assume you want your personal homepage background color to be cyan, instead of the default white. For doing this, use the text editor to write the following codes on your page, save the work, and then load the file via your browsing tool.  You can also upload the file to your hosting account if you have one. Just pay attention to the new standard DOCTYPE html element that is required to go at the beginning of HTML files.

And when you load the page on your browser, the cyan background will appear.

CSS commands are actually sets of styles that are added to web pages. As you can see, the custom code tells your web browser to change the background color to cyan. Some coders believe that it is far better to use hexadecimal universal color codes when editing web pages instead of writing the actual color names. Take a look at the image below, which generates the same visual effect, but this time using the HTML code for the color cyan. If you choose the latter option to add color codes to your web pages, make sure you do not forget to add the hash tag # right before the color codes, otherwise the effect will be disabled.

Now we want to carry out two jobs: 1.) Create a heading tag, in blue, positioned in the middle of the page and 2.) Choose the font Verdana in size 14 for the content body of the document.

Pay attention to the instructions and code placements, as each line controls one part of the CSS commands. The CSS styles are activated when the codes are pasted between the < head > and < / head > tags of the page, and your actual text materials will go in the < body >< / body > area of the document. Don’t forget to write your paragraphs inside the < p >< / p > section, which defines your paragraph.

Now we can check out the final artwork on browsers: a web page with cyan background, a blue-colored, centered, highlighted sentence, along with the real content written in Verdana with a font size of 14. 

Good Luck with your coding jobs!

~Hamid


Article printed from Worldstart's Tech Tips And Computer Help: http://www.worldstart.com

URL to article: http://www.worldstart.com/some-handy-css-tricks/