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>
Thank you
ReplyDeletecss div tag examples to learn
ReplyDeleteDiv padding margin float width height