CSS Basics

Published 07 Nov by SuperNOVA

CSS BasicsCascading Style Sheets (CSS) are used to style the HTML elements we use in our documents.
So, lets begin with CSS and learn the basics of this facility.

So, what exactly is CSS?

Well, let’s just say that earlier when you wanted to develop a website only HTML was considered enough for the front end section of the website (I am choosing to ignore flash here!). With time, attributes such as color, align, etc. started being used frequently which was OK on very small websites, but it was an issue of very high redundancy on medium-large websites.

Then came CSS to the rescue. Styling became structured, you could differentiate certain elements or group elements on the basis of different selectors provided by the World Wide Web Consortium (W3C). From now on the basic architecture of the webpages were decided by the HTML document and the process of beautifying those HTML elements was controlled by the CSS files.

Terminology

  • CSS Rules: A CSS rule is what contains all the styling of an element. It contains the element to be styled and may contain multiple property-value pairs. Example:
    Here, font-size, color are property names and 14px, red are their respective values.
  • CSS Decleration: Each property-value pair is a CSS decleration (“font-size:14px;” in the above example). A CSS Decleration always ends with a semicolon.
  • CSS Selectors: With CSS you can do much more than just selecting HTML tags, you can use selectors to apply styles to combinations.For example:
    #my_div{} This will select an elemnt with the id “my_div”.
    .divs{} This will select all the elements that have the class “divs”
    div p{} This rule will apply to all paragraph elements that reside inside a div. There are many more advanced selectors but we will get into selectors in detail at a later stage.
  • CSS Comments: A CSS document can contain CSS rules as well as comments. They can be used to provide information to those interested, credits, or other information about the declarations used. to use a CSS comment simply wrap the text you want to comment between /* and */.
    While debugging you can quickly comment out the declaration of a tag/selector to see the change from that declaration.

Lets get started!

Well, there are majorly 3 methods (that I know of or mostly use) with which you can use CSS rules.
  • External Stylesheets: This is very common if you are using a website with multiple pages whose architecture is mostly the same, like same header/footer etc. or even with slight variations among elements. You can use the link tag to use an external style sheet in your documents.
    An example is:
  • Style Tags: Yup, there is an HTML tag for CSS rules itself. This is most common if you have some styles specific to some pages which are not at all required in other pages or you want to decrease the file size of the stylesheet. It’s always best to put your style tags in the <head></head> section of your website because then your styles are loaded before any content is rendered by the browser. An example is:
  • Inline Styles: Inline styles are mostly used when you want the style to applied just to a specific element and not to a set/group. This method is used in the HTML document inside the tags itself (hence the name). An example is:
In the next class of CSS Basics we will talk about selectors and other cool things CSS has to offer.