Friday, June 3, 2011

What is CSS? Why we use CSS in HTML?

What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.

Why we use CSS in HTML?
It works as cosmetics for an HTML document (a web page).

How to use CSS?
Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font , size, color and emphasis for these elements is presentational.

By default, the presentation that you look for any Webpage is known as User Agent style. i.e., the browser's default settings for element presentation.

Better approach to define css is Author styles (provided by the web page author), in the form of:
  • Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute
  • Embedded style, blocks of CSS information inside the HTML itself
  • External style sheets, i.e., a separate CSS file referenced from the document

(1) Inline styles:
 
<h1 style="color:red; font-size:12px; font-family:Arial;">This is Heading (h1) Text</h1>
 style attribute will be used within any tag h1, h2, span, div, a etc.

color:   is a key word, where red is user defined value, you can use any color by name, by hexacode like black (#000000) etc

Size: is a key word of CSS where you define the size of text in pixel (px) normally. other options related to this units can be used, but we will discuss it later.

Font Family: is a keyword to define what font style will be presented on screen when you'll open web page in browser. Just remember, you must those fonts, which are known to be Web Safe Fonts (that mean web supported font family).

Example is attached:


We'll discuss other techniques in next post.


No comments:

Post a Comment