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
4.Further, Declaration comprises of two parts: property and value.
2. Consider the example
- h1,h2 -Selector.
- font-family:Georgia; -Declaration.
- font-family: -property.
- Georgia; -value.
How to add CSS to webpages.
1.CSS can be added to the HTML document using three methods.
- Inline CSS
- Embedded CSS
- External 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 CSSGive it a TRY! » Note-While using inline CSS, always enclose your style definitions within quotes.
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 CSSGive it a TRY! » Note-Style attributes are usually applied to the <head> element, but not a required.
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