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
- By using CSS you can save a lot of developing time.
- Using CSS makes it easier to develop a website in a proper manner.
- 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.
- 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 :
<html>
<head>
<title>SYNTAX FOR CSS</title>
<style type=”text/CSS”>
body{ color : black; background : white;}
</style>
</head>
<body>
This example shows the font in black color on white background.
</body>
</html>
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.
