CASCADING
STYLE SHEET (CSS)
Cascading Style Sheets, fondly
referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable. CSS handles the look and feel part of
a web page. Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
ADVANTAGES
·
CSS saves time - You can write CSS
once and then reuse the same sheet in multiple HTML pages. You can define a
style for each HTML element and apply it to as many web pages as you want.
·
Pages load faster - If you are using
CSS, you do not need to write HTML tag attributes every time. Just write one
CSS rule of a tag and apply it to all the occurrences of that tag. So, less code
means faster download times.
·
Easy maintenance - To make a global
change, simply change the style, and all the elements in all the web pages will
be updated automatically.
·
Superior styles to HTML - CSS has a
much wider array of attributes than HTML, so you can give a far better look to
your HTML page in comparison to HTML attributes.
· Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
PDAs and cellphones or for printing.
· Global web standards – Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.
Who Creates and Maintains CSS?
CSS is created and maintained through
a group of people within the W3C called the CSS Working Group. The CSS Working
Group creates documents called specifications. When a specification has been
discussed and officially ratified by the W3C members, it becomes a
recommendation.
These ratified specifications are called
recommendations because the W3C has no control over the actual implementation
of the language. Independent companies and organizations create that software
CSS-syntax
A
CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made of
three parts:
·
Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> , <table> etc.
|
· Property: A
property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border,
etc. ·
Value: Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc. |
Types
of Selectors
1. The Type Selector
2. The Universal Selector
3. The Descendent Selector
4. The ID Selector
5. The Class Selector
6. The Child Selector
7. The Attribute Selector
8. Grouping Selector
CSS-INCLUSION
1.
Inline
CSS -The <style> tag :
An inline
CSS is used to apply a unique style to a single HTML
element. An inline CSS uses the style attribute
of an HTML element.
Example:
<h1 style="color:blue;">A Blue
Heading</h1>
2.
Internal CSS :
An internal CSS is used to define a style for a single HTML
page.An internal CSS is defined in the <head> section of an HTML page, within a <style> element.The following example sets the text color of ALL
the <h1> elements (on that page) to blue, and the text color of ALL
the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.
EXTERNAL
CSS :
An external style sheet is used to define the style for many HTML
pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page
Example:
<link rel="stylesheet" href="styles.css">
CSS ─
MEASUREMENT UNITS
|
UNIT |
DESCRIPTION |
EXAMPLE |
|
% |
Defines a measurement as a percentage
relative to another value, typically an enclosing element. |
p {font-size: 16pt; line-height: 125%;} |
|
cm |
Defines a measurement in centimeters. |
div {margin-bottom: 2cm;} |
|
em |
A relative measurement for the height of a
font in em spaces. Because an em unit is equivalent to the size of a given
font, if you assign a font to 12pt, each "em" unit would be 12pt;
thus, 2em would be 24pt. |
p {letter-spacing: 7em;} |
|
ex |
This value defines a measurement relative
to a font's x-height. The x-height is determined by the height of the font's
lowercase letter x. |
p {font-size: 24pt; line-height: 3ex;} |
|
in |
Defines a measurement in inches. |
p {word-spacing: .15in;} |
|
mm |
Defines a measurement in millimeters. p |
p {word-spacing: 15mm;} |
|
pc |
Defines a measurement in picas. A pica is
equivalent to 12 points; thus, there are 6 picas per inch. |
p {font-size: 20pc;} |
Comments
Post a Comment