What is CSS? Explain its various types?



CSS (Cascading Style Sheets)-
 Cascading Style Sheets is a presentation definition language that is used to control the layout of HTML document by attaching styles. With CSS you can apply styles such as color of text set margins of fonts, background, images, spacing between paragraph and words and much more.
CSS is developed by W3C in 1997 & is supported by all the browsers. It comes with different versions including CSS 1, CSS 2, CSS 2.1, and CSS 3.
In order to create a style sheet we have to specify set of rules known as CSS rules or styles. These rules are used to control the appearance of various elements that appear in the associated HTML documents. The general syntax for specifying the rules is “Selector {property: value}”.
A Selector is the name of element to which CSS rule is applied. It may be HTML tag name, class, attributes.
There are three types of Style sheets available-
1.       Inline Style Sheets.
2.      Embedded or Internal Style Sheets.
3.      External Style Sheets.
1. Inline Style Sheet- Inline Style Sheet are those which are included within a single specific occurrence of an element in HTML document. In other words, they are placed inline within the element. Its effect is limited to the element in which it is specified. To use inline style, use the STYLE attributes in the opening tag of the relevant element. The value that is assigned to the style attribute is a declaration(s) enclosed in double quotes. Each declaration must be in the form of
property: value pair and must be separated by a semicolon. The syntax for specifying inline style sheets is
<tagname style=”declaration1, declaration2,……………”>
………………………
………………………
</tagname>

2. Embedded style sheet- The inline style sheet is very useful if you want to apply styles to all the specific occurrences of a specific element within the entire webpage then you will have to specify style for all the occurrence of the element which is a very time consuming process. So to solve this problem, the embedded style sheets are used. An Embedded style sheet is used when you want to apply styles to the elements within a single webpage. They are defined in the <head> element by using the <style> element. The opening <style> tag must always include the TYPE attribute whose value specifies what type of syntax it includes when rendered by the browser. The general form is
<head><title> title information </title>
<style type= “text/css”>
</--
       CSS rules
--/>
</head>

3 .External style sheet- An External style sheet is a template or file consists only of CSS rules and comments but does not contain any markups. An external style sheet must have an extension .css. These files are stored separately from the web pages of the website to which they are applied. In order to apply these rules, you need to just link this file to each web page on the website to which rules need to be applied. This is done <link> element in the <head> section of the web page. The  <link> element generally takes up the form,
<head>
………………………………………
<link rel= “stylesheet” type=”text/css” href=”URL of CSS file”>
</head>

Comments

Post a Comment

Popular posts from this blog

Write a program to add two number using inline function in C++?

#include<iostream.h> #include<conio.h> class bca {   public:   inline int sum(int x, int y)   {   return(x+y);   } }; int main() { clrscr(); int r,a,b; bca obj; cout<<"enter two integers :"<<endl; cin>>a>>b; r=obj.sum(a,b); cout<<" the sum of two integers is :"<<r<<endl; getch(); return 0; }   OUTPUT:- enter two integers :    3    6 the sum of two integer is :   9  
Read more

Traversing of elements program with algorithm and Flowchart

Image
ALGORITHM VARIABLES: §   i:      loop counter of array. §   A:    array name. §   LB: lower bound. §   UB: upper bound. ALGORITHM: STEP 1:         set i =LB STEP 2:         repeat steps 3 & 4                            While i<=UB STEP 3:         apply process to A[i] STEP 4:         i = i+1            STEP 5:         exit EXPLANATION: §   To traverse the elements of the array, firstly set the loop counter ‘i’ equal to last element of the array called the LOWER BOUND. ...
Read more