Search within TutorialsPark

Basic CSS Introduction


CSS allows you to define the appearance and style features of an element.


CSS Fundamental Concepts.

1.CSS stands for "Cascading style sheets".It enables you to define rules on how an element should appear.

2.HTML defines the structure of a webpage while CSS defines the appearance and style of a webpage.They go hand in hand.

3.CSS rules comprise of two parts. Selector and Declaration

  • Selector:Indicates the element to which the rule applies.
  • Declaration:Denotes how the element refered by the selector should be styled.

4.Further, Declaration comprises of two parts: property and value.

  • property:Denotes the feature of the element to be effected.
  • value:Specifies the value for the given property.

2. Consider the example

h1,h2 { font-family:Georgia;}

  • h1,h2 -Selector.
  • font-family:Georgia; -Declaration.
  • font-family: -property.
  • Georgia; -value.
Note-Subparts of the CSS rule.


How to add CSS to webpages.

1.CSS can be added to the HTML document using three methods.

  1. Inline CSS
  2. Embedded CSS
  3. External CSS

Inline CSS.

1.Inline CSS is the most direct way of including CSS on webpages.The style attributes are written on the same line of the element tag.

2.This is the most inefficent way of CSS style, but for some specific and unique styling requirements it can be used

3.Use the style global attribute to define the CSS style for the element. Multiple style definitions should be separated using a semicolon(;).

Example : Inline CSS

Give it a TRY! » Note-While using inline CSS, always enclose your style definitions within quotes.


Embedded CSS.

1.Embedded CSS is used when the CSS rules are to be used on a single webpage only and are unique.

2.They can be included by placing them between the <style> elements. The effect of this method is on a single webpage only and does not affect other pages

Example : Embedded CSS

Give it a TRY! » Note-Style attributes are usually applied to the <head> element, but not a required.



External CSS

1.External CSS is the most efficient way to include CSS into your webpages. Define all the styles in external stylesheet and then link it to you webpage.

2.The advantage is that any change if need can be performed on the external stylesheet and it affects all linked webpages. Also, once loaded it remains in browser's cache memory, decreasing page load time.

3.The external stylesheet can be linked using the <link> element within the head tags. The extension of an external CSS stylesheet is .css. Eg: MyStyle.css

Syntax :

Note-.Multiple external style sheets can be added to a webpage. But incase of conflict w.r.t to a rule, the latest file will be preferred.