What is CSS?
1. CSS stands for Cascading Style Sheets and is a simple
styling language which allows attaching style to HTML
elements. Every element type as well as every occurrence
of a specific element within that type can be declared
an unique style, e.g. margins, positioning, color or
size.
2. CSS is a web standard that describes style for
XML/HTML documents.
3. CSS is a language that adds style (colors, images,
borders, margins…) to your site. It’s really that
simple. CSS is not used to put any content on your site,
it’s just there to take the content you have and make it
pretty. First thing you do is link a CSS-file to your
HTML document. Do this by adding this line:
<link rel="stylesheet" href="style.css"
type="text/css">
The line should be placed in between your <head> and
</head> tags. If you have several pages you could add
the exact same line to all of them and they will all use
the same stylesheet, but more about that later. Let’s
look inside the file “style.css” we just linked to.
h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;
}
4. Cascading Style Sheets (CSS) is a simple mechanism
for adding style (e.g. fonts, colors, spacing) to Web
documents. This is also where information meets the
artistic abilities of a web-designer. CSS helps you
spice up your web-page and make it look neat in wide
variety of aspects.
What are Cascading Style Sheets?
A Cascading Style Sheet (CSS) is a list of statements
(also known as rules) that can assign various rendering
properties to HTML elements. Style rules can be
specified for a single element occurrence, multiple
elements, an entire document, or even multiple documents
at once. It is possible to specify many different rules
for an element in different locations using different
methods. All these rules are collected and merged (known
as a "cascading" of styles) when the document is
rendered to form a single style rule for each element.
How do I center block-elements with CSS1?
There are two ways of centering block level elements:
1. By setting the properties margin-left and
margin-right to auto and width to some explicit value:
BODY {width: 30em; background: cyan;}
P {width: 22em; margin-left: auto; margin-right: auto}
In this case, the left and right margins will each be
four ems wide, since they equally split up the eight ems
left over from (30em - 22em). Note that it was not
necessary to set an explicit width for the BODY element;
it was done here to keep the math clean.
Another example:
TABLE {margin-left: auto; margin-right: auto; width:
400px;}
In most legacy browsers, a table's width is by default
determined by its content. In CSS-conformant browsers,
the complete width of any element (including tables)
defaults to the full width of its parent element's
content area. As browser become more conformant,
authors will need to be aware of the potential impact on
their designs.
If background and color should always be set together,
why do they exist as separate properties?
There are several reasons for this. First, style sheets
become more legible -- both for humans and machines. The
background property is already the most complex property
in CSS1 and combining it with color would make it even
more complex. Second, color inherits, but background
doesn't and this would be a source of confusion.
What is class?
Class is a group of 1) instances of the same element to
which an unique style can be attached or 2) instances of
different elements to which the same style can be
attached.
1) The rule P {color: red} will display red text in all
paragraphs. By classifying the selector P different
style can be attached to each class allowing the display
of some paragraphs in one style and some other
paragraphs in another style.
2) A class can also be specified without associating a
specific element to it and then attached to any element
which is to be styled in accordance with it's
declaration. All elements to which a specific class is
attached will have the same style.
To classify an element add a period to the selector
followed by an unique name. The name can contain
characters a-z, A-Z, digits 0-9, period, hyphen, escaped
characters, Unicode characters 161-255, as well as any
Unicode character as a numeric code, however, they
cannot start with a dash or a digit. (Note: in HTML the
value of the CLASS attribute can contain more
characters). (Note: text between /* and */ are my
comments).
CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element
*/
HTML
<P class=name1>This paragraph will be red</P>
<P class=name2>This paragraph will be blue</P>
<P class=name3>This paragraph will be green</P>
<LI class=name3>This list item will be green</LI>
It is a good practice to name classes according to their
function than their appearance; e.g. P.fotnote and not
P.green. In CSS1 only one class can be attached to a
selector. CSS2 allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P class="name1 name2
name2">This paragraph has three classes attached</P>
What is grouping ?
Grouping is gathering (1) into a comma separated list
two or more selectors that share the same style or (2)
into a semicolon separated list two or more declarations
that are attached to the same selector (2).
1. The selectors LI, P with class name .first and class
.footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}
To reduce the size of style sheets and also save some
typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}
2. The declarations {font-style: italic} and {color:
red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}
What is external Style Sheet? How to link?
External Style Sheet is a template/document/file
containing style information which can be linked with
any number of HTML documents. This is a very convenient
way of formatting the entire site as well as restyling
it by editing just one file. The file is linked with
HTML documents via the LINK element inside the HEAD
element. Files containing style information must have
extension .css, e.g. style.css. <HEAD> <LINK REL=STYLESHEET
HREF="style.css" TYPE="text/css"> </HEAD>
Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive.
However, font families, URLs to images, and other direct
references with the style sheet may be.
The trick is that if you write a document using an XML
declaration and an XHTML doctype, then the CSS class
names will be case sensitive for some browsers.
It is a good idea to avoid naming classes where the only
difference is the case, for example:
div.myclass { ...}
div.myClass { ... }
If the DOCTYPE or XML declaration is ever removed from
your pages, even by mistake, the last instance of the
style will be used, regardless of case.
Page Numbers :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
