CSS
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.
2. 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.
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 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.
What are Style Sheets?
Style Sheets are templates, very similar to templates in desktop publishing applications, containing a
collection of rules declared to various selectors (elements).
What is CSS rule 'ruleset'?
There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares
style which is to be attached to that selector or selectors. For example P {text-indent: 10pt} is a CSS rule.
CSS rulesets consist of two parts: selector, e.g. P and declaration, e.g. {text-indent: 10pt}. P {text-indent:
10pt} - CSS rule (ruleset) {text-indent: 10pt} - CSS declaration text-indent - CSS property 10pt - CSS
value
What is embedded style? How to link?
Embedded style is the style attached to one specific document. The style information is specified as
a content of the STYLE element inside the HEAD element and will apply to the entire document.
<HEAD> <STYLE TYPE="text/css"> <!-- P {text-indent: 10pt} --> </STYLE> </HEAD> Note:
The styling rules are written as a HTML comment, that is, between <!-- and --> to hide the content in
browsers without CSS support which would otherwise be displayed.
What is ID selector?
ID selector is an individually identified (named) selector to which a specific style is declared. Using
the ID attribute the declared style can then be associated with one and only one HTML element per
document as to differentiate it from all other elements. ID selectors are created by a character # followed
by the selector's 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. #abc123 {color: red; background: black} <P ID=abc123>This
and only this element can be identified as abc123 </P>
How do I have a background image that isn't tiled?
Specify the background-repeat property as no-repeat. You can also use the background property
as a shortcut for specifying multiple background-* properties at once. Here's an example: BODY
{background: #FFF url(watermark.jpg) no-repeat;}
Why do we use style sheets?
SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying
a document's structural and semantic content (its meaning.) It was never meant to convey physical
formatting information. HTML has crossed this line and now contains many elements and attributes
which specify visual style and formatting information. One of the main reasons for style sheets is to stop
the creation of new HTML physical formatting constructs and once again separate style information from
document content.
What is inline style? How to link?
Inline style is the style attached to one specific element. The style is specified directly in the start tag
as a value of the STYLE attribute and will apply exclusively to this specific element occurrence. <P
STYLE="text-indent: 10pt">Indented paragraph</P>
How do I place text over an image?
To place text or image over an image you use the position property. The below exemple is supported by
IE 4.0. All you have to do is adapt the units to your need. <div style="position: relative; width: 200px;
height: 100px"> <div style="position: absolute; top: 0; left: 0; width: 200px"> <image> </div> <div
style="position: absolute; top: 20%; left: 20%; width: 200px"> Text that nicely wraps </div> </div>
How do I combine multiple sheets into one?
To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same
value to the LINK element. The combined style will apply as a preferred style, e.g.: <LINK
REL=Stylesheet HREF="default.css" TITLE="combined"> <LINK REL=Stylesheet HREF="fonts.css"
TITLE="combined"> <LINK REL=Stylesheet HREF="tables.css" TITLE="combined">
No comments:
Post a Comment