Lets Start From CSS


In this article i am going to explain ” What is CSS / CSS3″  &  “How it works”. So if you are a newbie then this is for you, if you already know those two question the please check for advance articles.

So lets dive in….

The first thing is that “what is CSS / CSS3”  and why people use it [sounds funny]? let me explain it…..

 

CSS stands for Cascading Style Sheets and CSS3 is an advanced version of  of it. According to the w3.org  “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” Hope you know what is the Web documents / HTML. CSS describe how HTML element should be displayed on the Web.

CSS Syntax:

HTML Selector then { css property: property value; }

HTML Selector are like [H1,H2,H3,H4,H5,H6,H7 (used for Headings Tags)] and the CSS property should be the rule of CSS.

A CSS rule-set consists of a selector and a declaration block for example;

H1 is HTML selector and to describe / declare we have to type /  assign the property and a value to the property like.

H1 { color: red;}

The above code will assign the red color to all the H1 tags used in you web page.

Type of CSS:

There are three types of CSS..

  • External [ In a separate File ]
  • Internal [ At the top of a web page document ]
  • Inline [Right next to the text it decorates ]

External style sheets are separate files full of CSS instructions (with the file extension .css). The external file should be add at the top of the page under the <head> section of the page but before closing the </head>, for example;

<head>

<link rel=”stylesheet”  type=”style/css”  href=”your-style-page-name.css” />

</head>

Internal styles are placed at the top of each web page document like we place the external file, same in the head section but it contain all the CSS code on the same page and the should be enclosed in <style> </style>  Tags, for example;

<head>

<style>

H1 { color:red;}

p{color:blue}

</style>

</head>

Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. Using Inline is not recommended but sometimes you have to / you need to place with the specific element instead of disturbing the original CSS. Below is the example of Inline CSS;

<H1 style=”color:red;”> Some Heading </H1>

 

For study reference i am adding some useful links:

  1. study.com
  2. w3school.com
  3. w3.org

You may also like

LEAVE A COMMENT

Adds