css for beginners
by sheri


CSS for Beginners

Before starting CSS we assume that you have an understanding of basic HTML (i.e., Hypertext Markup Language) that is used to design webpage.

CSS stands for Cascading Style Sheet, as the name implies it’s a style sheet that helps you to style your webpage. It is basically a way to present your document. Adding styles to your webpage means to add color, border, proper spacing, appropriate heading wherever required and much more. CSS added a great functionality to the webpage and helped us to decorate Internet like never before.

You must be wondering How it works? Well it’s not that very difficult to learn, all you have to do is just carefully read and analyze the syntax used to give style to the content of your webpage and make appropriate changes.

Use of CSS

CSS has become a very important part of web designing. Without CSS one cannot hope to design a truly attractive webpage. But what makes a webpage attractive? Earlier (pre-2000) only HTML was used to make webpages and put the information necessary to display on the webpage. With addition of tags like <font> and attributes like colors in HTML 3.2 it became a lot easier for the web developers to display their content in an attractive manner. But the problem arises when developing large websites, it becomes a difficult task to define style for every single page separately again and again for 100s or 1000s of web pages. Then, World Wide Web Consortium (W3C) decided to introduce CSS.

In the next version of HTML 4.0, all formatting part could be removed from HTML document and added to the CSS section of the webpage. Nowadays, almost every browser supports CSS and it allows designers to separate coding from design of websites.

Advantages of using CSS

  1. By using CSS you can save a lot of developing time.
  2. Using CSS makes it easier to develop a website in a proper manner.
  3. Styles once saved under a class can be used to apply to similar kind of text on a specific webpage or applied to 1000s of pages at 1 time.
  4. Styles help you in present your text effectively on your webpage.

Basic Syntax

Before discussing basic syntax of CSS we assume that you are familiar with the basic tags of HTML, like, <html>, <head>, <title>, <body> tags followed by their closing tags. If not take a look here.

Defining a style to a section has a basic syntax of ‘property : value’. We use <style> tag to define style used in the webpage. To define properties for the document or the webpage we specify the attributes for the document tags within the <style> tag using above syntax to define property.

Defining a style for a document or a webpage the <style> tag is written inside the <head> section of the webpage i.e., before the <body> tag.


For Example :



<title>SYNTAX FOR CSS</title>

<style type=”text/CSS”>

body{ color : black; background : white;}




This example shows the font in black color on white background.



In the above example, we have used CSS in between the <head> section of the HTML page. By using <style> tag we define the color and background properties of the content that lies inside the <body> section of the HTML page. In this example <body> has given the property of white background with black color text.

The definition syntax for the style property is property1 : value; property2 : value; and so on. All the properties are kept under curly braces that help in separating the element and the properties. We can set different properties for different tags in different style just as you want. We can also embed CSS in our document/webpage in three different style which we will discuss in our next article.

6 Responses  
  • jane writes:
    November 5th, 20116:05 pmat

    Thanks, This should help get me started on revamping my existing site. Do you have any plans to make your own video tutorials for beginners?

    • sheri writes:
      November 7th, 20114:07 amat

      Hi Jane,

      I hope to make some videos when I get time, for now I just post the ones I personally like from the various video sites.

  • jackson smith writes:
    December 3rd, 201112:18 pmat

    This was not very useful to me. I think you need to improve your site and stay more focused so those new to css can follow a step by step method of learning. As it stands now you have mostly a spattering of information that would more likely hinder the learning process.

    • sheri writes:
      December 4th, 20117:35 amat

      Thank you for the feedback. I am only 1 person and this blog doesn’t pay my bills at all, and the information is also 100% free so please take that into consideration.

      I do however hope to improve and add better tutorials in the future but its probably always going to be a hobby site and its not very easy for me to dedicate to much time to a website that doesn’t help pay my rent.


  • Jose Benit writes:
    February 9th, 201210:18 pmat

    Very nice and simple design blog. How did you achieve this elegant design? Are you using a existing theme or did you do it by hand coding.

    • sheri writes:
      February 19th, 20125:31 amat

      Hi Jose,

      It is a theme, but I have also done some customizations on the site myself to make it look different than others using it.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
© Copyright