0% found this document useful (0 votes)

183 views

Css

The document describes Cascading Style Sheets (CSS), which is a style sheet language used to describe the presentation of documents written in HTML and XHTML. CSS is designed to separate document structure and presentation to make documents more flexible and accessible. The document provides details on CSS syntax including selectors, properties, values, and different methods for applying CSS styles like inline, internal and external stylesheets.

Uploaded by

Anonymous BOreSF

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

183 views

Css

Uploaded by

Anonymous BOreSF

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 79

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation

semantics (the look and formatting) of a document written in a markup language. Its most
common application is to style web pages written in HTML and XHTML.
CSS is designed primarily to enable the separation of document content (written in HTML or
a similar markup language) from document presentation, including elements such as the
layout, colors, and fonts. This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation characteristics, enable multiple
pages to share formatting, and reduce complexity and repetition in the structural content
(such as by allowing for tableless web design). CSS can also allow the same markup page to
be presented in different styles for different rendering methods, such as on-screen, in print,
by voice (when read out by a speech-based browser or screen reader) and on Braille-based,
tactile devices. It can also be used to allow the web page to display differently depending on
the screen size or device on which it is being viewed. While the author of a document
typically links that document to a CSS style sheet, readers can use a different style sheet,
perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule
matches against a particular element. In this so-called cascade, priorities or weights are
calculated and assigned to rules, so that the results are predictable.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more
selectors, and a declaration block. A declaration-block consists of a list of declarations in
braces. Each declaration itself consists of a property, a colon (:), and a value. If there are
multiple declarations in a block, a semi-colon (;) must be inserted to separate each
declaration. In CSS, selectors are used to declare which part of the markup a style applies to,
a kind of match expression. Selectors may apply to all elements of a specific type, to
elements specified by attribute, or to elements depending on how they are placed relative
to, or nested within, others in the document tree.

Selector

{
Font-family : arial;
Properties

Font-size : medium;

Values

Color : blue;
}
CSS information can be provided from various sources. CSS style information can be in a
separate document or it can be embedded into an HTML document. Multiple style sheets
can be imported.

Inline styles, inside the HTML document, style information on a single element,
specified using the style attribute
Embedded or internal style, blocks of CSS information inside the <head> element of
HTML itself
External style sheets, i.e., a separate CSS file referenced from the document

Example : The following example demonstrates the inline style

<!doctype html>
<html>
<body>
<p style=font-family:arial;color:blue;font-size:medium> This is a paragraph
formatted with inline css style. </p>
</body>
</html>

Example : The following example demonstrates the internal style

<!doctype html>
<html>
<head>
<style>
P
{
Font-family:arial;
Font-size:medium;
Color:blue;
Text-align:justify;
}
</style>
</head>
<body>
<p> This is a paragraph formatted with internal css style. </p>
</body>
</html>

Example : The following example demonstrates the external style

Create a new document in notepad, define the following css styles within it and save it with
the name MyStyle.css
P
{
Font-family:arial;
Font-size:medium;
2

Color:blue;
Text-align:justify;
}
H1
{
Font-family:arial black;
Background-color:blue;
Color:white;
}

Create another new document in notepad and create a html file with the following html
markup. To link an external css file, use <link> element of html within the <head> element.
<!doctype html>
<html>
<head>
<link rel=stylesheet type=text/css href=MyStyle.css/>
</head>
<body>
<h1> Heading </h1>
<p> This is a paragraph formatted with internal css style. </p>
</body>
</html>

Selector syntax
A simple selector is either a type selector or universal selector followed immediately by zero
or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple
selector matches if all of its components match.
A selector is a chain of one or more simple selectors separated by combinators. Combinators
are: white space, ">", and "+". White space may appear between a combinator and the
simple selectors around it.
The elements of the document tree that match a selector are called subjects of the selector.
A selector consisting of a single simple selector matches any element satisfying its
requirements. Prepending a simple selector and combinator to a chain imposes additional
matching constraints, so the subjects of a selector are always a subset of the elements
matching the last simple selector.
One pseudo-element may be appended to the last simple selector in a chain, in which case
the style information applies to a subpart of each subject.

Grouping
When several selectors share the same declarations, they may be grouped into a commaseparated list.
In this example, we condense three rules with identical declarations into one. Thus,
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
is equivalent to:
h1, h2, h3 { font-family: sans-serif }

Universal selector
The universal selector, written "*", matches the name of any element type. It matches any
single element in the document tree. If the universal selector is not the only component of a
simple selector, the "*" may be omitted. For example:
*[lang=fr] and [lang=fr] are equivalent.
*.warning and .warning are equivalent.
*#myid and #myid are equivalent.

Type selectors
A type selector matches the name of a document language element type. A type selector
matches every instance of the element type in the document tree.
The following rule matches all H1 elements in the document tree:
h1 { font-family: sans-serif }

Descendant selectors
At times, authors may want selectors to match an element that is the descendant of
another element in the document tree (e.g., "Match those EM elements that are contained
4

by an H1 element"). Descendant selectors express such a relationship in a pattern. A

descendant selector is made up of two or more selectors separated by white space. A
descendant selector of the form "A B" matches when an element B is an arbitrary
descendant of some ancestor element A.
For example, consider the following rules:
h1 { color: red }
em { color: red }
Although the intention of these rules is to add emphasis to text by changing its color, the
effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>
We address this case by supplementing the previous rules with a rule that sets the text color
to blue whenever an EM occurs anywhere within an H1:
h1 { color: red }
em { color: red }
h1 em { color: blue }
The third rule will match the EM in the following fragment:
<H1>This <SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>
The following selector:
div * p
matches a P element that is a grandchild or later descendant of a DIV element. Note the
white space on either side of the "*" is not part of the universal selector; the white space is
a combinator indicating that the DIV must be the ancestor of some element, and that that
element must be an ancestor of the P.
The selector in the following rule, which combines descendant and attribute selectors,
matches any element that has the "href" attribute set and is inside a P that is itself inside a
DIV:
div p *[href]

Child selectors
A child selector matches when an element is the child of some element. A child selector is
made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an
OL element; the OL element must be a descendant of a DIV. Notice that the optional white
space around the ">" combinator has been left out.

Adjacent sibling selectors

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the
selector. The selector matches if E1 and E2 share the same parent in the document tree and
E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and
comments).
Thus, the following rule states that when a P element immediately follows a MATH element,
it should not be indented:
math + p { text-indent: 0 }
The next example reduces the vertical space separating an H1 and an H2 that immediately
follows it:
h1 + h2 { margin-top: -5mm }
The following rule is similar to the one in the previous example, except that it adds a class
selector. Thus, special formatting only occurs when H1 has class="opener":
h1.opener + h2 { margin-top: -5mm }

Attribute selectors
CSS 2.1 allows authors to specify rules that match elements which have certain attributes
defined in the source document.

Matching attributes and attribute values

Attribute selectors may match in four ways:
[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly "val".
[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of
words, one of which is exactly "val". If "val" contains white space, it will never represent
anything (since the words are separated by spaces). If "val" is the empty string, it will never
represent anything either.
[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or
beginning with "val" immediately followed by "-". This is primarily intended to allow
language subcode matches (e.g., the hreflang attribute on the a element in HTML) as
described in BCP 47 or its successor.
Attribute values must be identifiers or strings. The case-sensitivity of attribute names and
values in selectors depends on the document language.
For example, the following attribute selector matches all H1 elements that specify the "title"
attribute, whatever its value:
h1[title] { color: blue; }
In the following example, the selector matches all SPAN elements whose "class" attribute
has exactly the value "example":
span[class=example] { color: blue; }
Multiple attribute selectors can be used to refer to several attributes of an element, or even
several times to the same attribute.
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value
"Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

The following selectors illustrate the differences between "=" and "~=". The first selector will
match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The
second selector will only match when the "href" attribute has the value
"http://www.nareshit.com/".
a[rel~="copyright"]
a[href="http://www.nareshit.com/"]
The following rule hides all elements for which the value of the "lang" attribute is "fr" (i.e.,
the language is French).
*[lang=fr] { display : none }
The following rule will match for values of the "lang" attribute that begin with "en",
including "en", "en-US", and "en-cockney":
*[lang|="en"] { color : red }
Similarly, the following aural style sheet rules allow a script to be read aloud in different
voices for each role:
DIALOGUE[character=romeo] { voice-family: "Laurence Olivier", charles, male }
DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }

Class selectors
Working with HTML, authors may use the period (.) notation as an alternative to the ~=
notation when representing the class attribute. Thus, for HTML, div.value and
div[class~=value] have the same meaning. The attribute value must immediately follow the
"period" (.).
For example, we can assign style information to all elements with class~="pastoral" as
follows:
*.pastoral { color: green } /* all elements with class~=pastoral */
or just
.pastoral { color: green } /* all elements with class~=pastoral */
The following assigns style only to H1 elements with class~="pastoral":
H1.pastoral { color: green } /* H1 elements with class~=pastoral */

Given these rules, the first H1 instance below would not have green text, while the second
would:
<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>
To match a subset of "class" values, each value must be preceded by a ".".
For example, the following rule matches any P element whose "class" attribute has been
assigned a list of space-separated values that includes "pastoral" and "marine":
p.marine.pastoral { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match for
class="pastoral blue".

ID selectors
Document languages may contain attributes that are declared to be of type ID. What makes
attributes of type ID special is that no two such attributes can have the same value;
whatever the document language, an ID attribute can be used to uniquely identify its
element. In HTML all ID attributes are named "id"; XML applications may name ID attributes
differently, but the same restriction applies.
The ID attribute of a document language allows authors to assign an identifier to one
element instance in the document tree. CSS ID selectors match an element instance based
on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value,
which must be an identifier.
The following ID selector matches the H1 element whose ID attribute has the value
"chapter1":
h1#chapter1 { text-align: center }
In the following example, the style rule matches the element that has the ID value "z98y".
The rule will thus match for the P element:
<head>
<title>match p</title>
<style type="text/css">
*#z98y { letter-spacing: 0.3em }

</style>
</head>
<body>
<p id=z98y>wide text</p>
</body>
In the next example, however, the style rule will only match an H1 element that has an ID
value of "z98y". The rule will not match the P element in this example:
<head>
<title>match h1 only</title>
<style type="text/css">
h1#z98y { letter-spacing: 0.5em }
</style>
</head>
<body>
<p id=z98y>wide text</p>
</body>
ID selectors have a higher specificity than attribute selectors. For example, in HTML, the
selector #p123 is more specific than [id=p123] in terms of the cascade.
If an element has multiple ID attributes, all of them must be treated as IDs for that element
for the purposes of the ID selector.

Pseudo-elements and pseudo-classes

In CSS 2.1, style is normally attached to an element based on its position in the document
tree. This simple model is sufficient for many cases, but some common publishing scenarios
may not be possible due to the structure of the document tree. For instance, in HTML 4, no
element refers to the first line of a paragraph, and therefore no simple CSS selector may
refer to it.
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting
based on information that lies outside the document tree.
10

Pseudo-elements create abstractions about the document tree beyond those specified by
the document language. For instance, document languages do not offer mechanisms to
access the first letter or first line of an element's content. CSS pseudo-elements allow style
sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may
also provide style sheet designers a way to assign style to content that does not exist in the
source document (e.g., the :before and :after pseudo-elements give access to generated
content).
Pseudo-classes classify elements on characteristics other than their name, attributes or
content; in principle characteristics that cannot be deduced from the document tree.
Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudoclass while a user interacts with the document. The exceptions are ':first-child', which can be
deduced from the document tree, and ':lang()', which can be deduced from the document
tree in some cases.
Neither pseudo-elements nor pseudo-classes appear in the document source or document
tree.
Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be
appended after the last simple selector of the selector.
Pseudo-element and pseudo-class names are case-insensitive.
Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to
the same element. In case of conflicting rules, the normal cascading order determines the
outcome.

Pseudo-classes
:first-child pseudo-class
The :first-child pseudo-class matches an element that is the first child element of some
other element.
In the following example, the selector matches any P element that is the first child of a DIV
element. The rule suppresses indentation for the first paragraph of a DIV:
div > p:first-child { text-indent: 0 }
This selector would match the P inside the DIV of the following fragment:
<p> the last p before the note.
<div class="note">
11

<p> the first p inside the note.

</div>
but would not match the second P in the following fragment:
<p> the last p before the note.
<div class="note">
<h2>note</h2>
<p> the first p inside the note.
</div>
The following rule sets the font weight to 'bold' for any EM element that is some
descendant of a P element that is a first child:
p:first-child em { font-weight : bold }
The following two selectors are equivalent:
* > a:first-child /* A is first child of any element */
a:first-child

/* Same */

The link pseudo-classes: :link and :visited

User agents commonly display unvisited links differently from previously visited ones. CSS
provides the pseudo-classes ':link' and ':visited' to distinguish them:
The :link pseudo-class applies for links that have not yet been visited.
The :visited pseudo-class applies once the link has been visited by the user.
The two states are mutually exclusive.
The document language determines which elements are hyperlink source anchors. For
example, in HTML4, the link pseudo-classes apply to A elements with an "href" attribute.
Thus, the following two CSS 2.1 declarations have similar effect:
a:link { color: red }
:link { color: red }
If the following link:

<A class="external" href="http://out.side/">external link</A>

has been visited, this rule:
a.external:visited { color: blue }
will cause it to be blue.

The dynamic pseudo-classes: :hover, :active, and :focus

Interactive user agents sometimes change the rendering in response to user actions. CSS
provides three pseudo-classes for common cases:
The :hover pseudo-class applies while the user designates an element (with some pointing
device), but does not activate it. For example, a visual user agent could apply this pseudoclass when the cursor (mouse pointer) hovers over a box generated by the element. User
agents not supporting interactive media do not have to support this pseudo-class. Some
conforming user agents supporting interactive media may not be able to support this
pseudo-class (e.g., a pen device).
The :active pseudo-class applies while an element is being activated by the user. For
example, between the times the user presses the mouse button and releases it.
The :focus pseudo-class applies while an element has the focus (accepts keyboard events or
other forms of text input).
An element may match several pseudo-classes at the same time.
CSS does not define which elements may be in the above states, or how the states are
entered and left. Scripting may change whether elements react to user events or not, and
different devices and UAs may have different ways of pointing to, or activating elements.
CSS 2.1 does not define if the parent of an element that is ':active' or ':hover' is also in that
state.
User agents are not required to reflow a currently displayed document due to pseudo-class
transitions. For instance, a style sheet may specify that the 'font-size' of an :active link
should be larger than that of an inactive link, but since this may cause letters to change
position when the reader selects the link, a UA may ignore the corresponding style rule.
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers

*/
13

a:active { color: lime } /* active links */

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise
the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because
A:active is placed after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
An example of combining dynamic pseudo-classes:
a:focus { background: yellow }
a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus and in pseudo-class
:hover.

The language pseudo-class: :lang

If the document language specifies how the human language of an element is determined, it
is possible to write selectors in CSS that match an element based on its language. For
example, in HTML, the language is determined by a combination of the "lang" attribute, the
META element, and possibly by information from the protocol (such as HTTP headers).
The pseudo-class ':lang(C)' matches if the element is in language C. Whether there is a
match is based solely on the identifier C being either equal to, or a hyphen-separated
substring of, the element's language value, in the same way as if performed by the '|='
operator. The matching of C against the element's language value is performed caseinsensitively for characters within the ASCII range. The identifier C does not have to be a
valid language name.
C must not be empty.
The following rules set the quotation marks for an HTML document that is either in
Canadian French or German:
html:lang(fr-ca) { quotes: ' ' ' ' }
html:lang(de) { quotes: '' '' '\2039' '\203A' }
:lang(fr) > Q { quotes: ' ' ' ' }
:lang(de) > Q { quotes: '' '' '\2039' '\203A' }
The second pair of rules actually set the 'quotes' property on Q elements according to the
language of its parent. This is done because the choice of quote marks is typically based on
14

the language of the element around the quote, not the quote itself: like this piece of French
l'improviste in the middle of an English text uses the English quotation marks.

Pseudo-elements
Pseudo-elements behave just like real elements in CSS with the exceptions described below
and elsewhere.

The :first-line pseudo-element

The :first-line pseudo-element applies special styles to the contents of the first formatted
line of a paragraph. For instance:
p:first-line { text-transform: uppercase }
The above rule means "change the letters of the first line of every paragraph to uppercase".
However, the selector "P:first-line" does not match any real HTML element. It does match a
pseudo-element that conforming user agents will insert at the beginning of every
paragraph.
Note that the length of the first line depends on a number of factors, including the width of
the page, the font size, etc. Thus, an ordinary HTML paragraph such as:
<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
the lines of which happen to be broken as follows:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.

might be "rewritten" by user agents to include the fictional tag sequence for :first-line. This
fictional tag sequence helps to show how properties are inherited.
<P><P:first-line> This is a somewhat long HTML
paragraph that </P:first-line> will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
If a pseudo-element breaks up a real element, the desired effect can often be described by a
fictional tag sequence that closes and then re-opens the element. Thus, if we mark up the
previous paragraph with a SPAN element:
<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
the user agent could simulate start and end tags for SPAN when inserting the fictional tag
sequence for :first-line.
<P><P:first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P:first-line><SPAN class="test"> be
broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

The :first-line pseudo-element can only be attached to a block container element.

The "first formatted line" of an element may occur inside a block-level descendant in the
same flow (i.e., a block-level descendant that is not positioned and not a float). E.g., the first
line of the DIV in <DIV><P>This line...</P></DIV> is the first line of the P (assuming that both
P and DIV are block-level).
The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor
element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P>
etcetera</DIV> the first formatted line of the DIV is not the line "Hello".
Note that the first line of the P in this fragment: <p><br>First... does not contain any letters
(assuming the default style for BR in HTML 4). The word "First" is not on the first formatted
line.
The :first-line pseudo-element is similar to an inline-level element, but with certain
restrictions. The following properties apply to a :first-line pseudo-element: font properties,
color property, background properties, 'word-spacing', 'letter-spacing', 'text-decoration',
'text-transform', and 'line-height'.

The :first-letter pseudo-element

The :first-letter pseudo-element must select the first letter of the first line of a block, if it is
not preceded by any other content (such as images or inline tables) on its line. The :firstletter pseudo-element may be used for "initial caps" and "drop caps", which are common
typographical effects. This type of initial letter is similar to an inline-level element if its 'float'
property is 'none', otherwise it is similar to a floated element.
These are the properties that apply to :first-letter pseudo-elements: font properties, 'textdecoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'lineheight', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties,
border properties, color property, background properties.
This example shows a possible rendering of an initial cap. Note that the 'line-height' that is
inherited by the first-letter pseudo-element is 1.1, but the UA in this example has computed
the height of the first letter differently, so that it does not cause any unnecessary space
between the first two lines. Also note that the fictional start tag of the first letter is inside
the SPAN, and thus the font weight of the first letter is normal, not bold as the SPAN:
p { line-height: 1.1 }
p:first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
17

<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>

Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.

The following CSS 2.1 will make a drop cap initial letter span about two lines:
<!doctype html public "-//w3c//dtd html 4.01//en">
<html>
<head>
<title>drop cap initial letter</title>
<style type="text/css">
p

{ font-size: 12pt; line-height: 1.2 }

p:first-letter { font-size: 200%; font-style: italic;

font-weight: bold; float: left }
span

{ text-transform: uppercase }

</style>
</head>
<body>
<p><span>the first</span> few words of an article
in the economist.</p>
</body>
</html>
This example might be formatted as follows:

The fictional tag sequence is:

<p>
<span>
<p:first-letter>
t
</p:first-letter>he first
</span>
few words of an article in the economist.
</p>
Note that the :first-letter pseudo-element tags abut the content (i.e., the initial character),
while the :first-line pseudo-element start tag is inserted right after the start tag of the block
element.
In order to achieve traditional drop caps formatting, user agents may approximate font
sizes, for example to align baselines. Also, the glyph outline may be taken into account when
formatting.
Punctuation (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), "initial" (Pi).
"final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter
should be included, as in:

The ':first-letter' also applies if the first letter is in fact a digit, e.g., the "6" in "67 million
dollars is a lot of money."
The :first-letter pseudo-element applies to block container elements.
The :first-letter pseudo-element can be used with all such elements that contain text, or
that have a descendant in the same flow that contains text. A UA should act as if the
fictional start tag of the first-letter pseudo-element is just before the first text of the
element, even if that first text is in a descendant.
19

Here is an example. The fictional tag sequence for this HTML fragment:
<div>
<p>The first text.
is:
<div>
<p><div:first-letter><p:first-letter>T</...></...>he first text.
The first letter of a table-cell or inline-block cannot be the first letter of an ancestor
element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P>
etcetera</DIV> the first letter of the DIV is not the letter "H". In fact, the DIV does not have
a first letter.
The first letter must occur on the first formatted line. For example, in this fragment:
<p><br>First... the first line does not contain any letters and ':first-letter' does not match
anything (assuming the default style for BR in HTML 4). In particular, it does not match the
"F" of "First."
If an element is a list item ('display: list-item'), the ':first-letter' applies to the first letter in
the principal box after the marker. UAs may ignore ':first-letter' on list items with 'list-styleposition: inside'. If an element has ':before' or ':after' content, the ':first-letter applies to the
first letter of the element including that content.
E.g., after the rule 'p:before {content: "Note: "}', the selector 'p:first-letter' matches the "N"
of "Note".
Some languages may have specific rules about how to treat certain letter combinations. In
Dutch, for example, if the letter combination "ij" appears at the beginning of a word, both
letters should be considered within the :first-letter pseudo-element.
If the letters that would form the first-letter are not in the same element, such as "'T" in
<p>'<em>T..., the UA may create a first-letter pseudo-element from one of the elements,
both elements, or simply not create a pseudo-element.
Similarly, if the first letter(s) of the block are not at the start of the line (for example due to
bidirectional reordering), then the UA need not create the pseudo-element(s).
The following example illustrates how overlapping pseudo-elements may interact. The first
letter of each P element will be green with a font size of '24pt'. The rest of the first
formatted line will be 'blue' while the rest of the paragraph will be 'red'.
p { color: red; font-size: 12pt }

p:first-letter { color: green; font-size: 200% }

p:first-line { color: blue }
<P>Some text that ends up on two lines</P>
Assuming that a line break will occur before the word "ends", the fictional tag sequence for
this fragment might be:
<P>
<P:first-line>
<P:first-letter>
S
</P:first-letter>ome text that
</P:first-line>
ends up on two lines
</P>
Note that the :first-letter element is inside the :first-line element. Properties set on :firstline are inherited by :first-letter, but are overridden if the same property is set on :firstletter.

The :before and :after pseudo-elements

The ':before' and ':after' pseudo-elements can be used to insert generated content before
or after an element's content. They are explained in the section on generated text.
h1:before {content: counter(chapno, upper-roman) ". "}
When the :first-letter and :first-line pseudo-elements are applied to an element having
content generated using :before and :after, they apply to the first letter or line of the
element including the generated content.
p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}
This will render the "S" of "Special!" in gold.

Animation Properties
Property

Description

CSS Version

@keyframes

Specifies the animation

animation

A shorthand property for all the animation

3
properties below, except the animation-play-state
property

animation-name

Specifies a name for the @keyframes animation

animation-duration

Specifies how many seconds or milliseconds an

animation takes to complete one cycle

animation-timing-function

Specifies the speed curve of the animation

animation-delay

Specifies when the animation will start

animation-iteration-count

Specifies the number of times an animation

should be played

animation-direction

Specifies whether or not the animation should

play in reverse on alternate cycles

animation-play-state

Specifies whether the animation is running or

paused

Property

Description

CSS Version

background

Sets all the background properties in one

declaration

Background Properties

background-attachment

Sets whether a background image is fixed or

scrolls with the rest of the page

background-color

Sets the background color of an element

background-image

Sets the background image for an element

background-position

Sets the starting position of a background image

background-repeat

Sets how a background image will be repeated

background-clip

Specifies the painting area of the background

background-origin

Specifies the positioning area of the background

images

background-size

Specifies the size of the background images

Border and Outline Properties

Property

Description

CSS Version

border

Sets all the border properties in one declaration

border-bottom

Sets all the bottom border properties in one

declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-color

Sets the color of the four borders

border-left

Sets all the left border properties in one declaration

border-left-color

Sets the color of the left border

border-left-style

Sets the style of the left border

border-left-width

Sets the width of the left border

border-right

Sets all the right border properties in one declaration

border-right-color

Sets the color of the right border

border-right-style

Sets the style of the right border

border-right-width

Sets the width of the right border

border-style

Sets the style of the four borders

border-top

Sets all the top border properties in one declaration

border-top-color

Sets the color of the top border

border-top-style

Sets the style of the top border

border-top-width

Sets the width of the top border

border-width

Sets the width of the four borders

outline

Sets all the outline properties in one declaration

outline-color

Sets the color of an outline

outline-style

Sets the style of an outline

outline-width

Sets the width of an outline

border-bottom-leftradius

Defines the shape of the border of the bottom-left

corner

border-bottom-rightradius

Defines the shape of the border of the bottom-right

corner

border-image

A shorthand property for setting all the border-image- 3

* properties

border-image-outset

Specifies the amount by which the border image area

extends beyond the border box

border-image-repeat

Specifies whether the image-border should be

repeated, rounded or stretched

border-image-slice

Specifies the inward offsets of the image-border

border-image-source

Specifies an image to be used as a border

border-image-width

Specifies the widths of the image-border

border-radius

A shorthand property for setting all the four border-*- 3

radius properties

border-top-left-radius

Defines the shape of the border of the top-left corner 3

border-top-right-radius Defines the shape of the border of the top-right

corner

box-decoration-break

box-shadow

Attaches one or more drop-shadows to the box

Box Properties
Property

Description

CSS Version

overflow-x

Specifies whether or not to clip the left/right edges of 3

the content, if it overflows the element's content area

overflow-y

Specifies whether or not to clip the top/bottom edges 3

of the content, if it overflows the element's content
area

overflow-style

Specifies the preferred scrolling method for elements

that overflow

rotation

Rotates an element around a given point defined by

the rotation-point property

rotation-point

Defines a point as an offset from the top left border

edge

Property

Description

CSS Version

color-profile

Permits the specification of a source color profile

other than the default

opacity

Sets the opacity level for an element

rendering-intent

Permits the specification of a color profile rendering

intent other than the default

Color Properties

Content for Paged Media Properties

Property

Description

CSS Version

bookmark-label

Specifies the label of the bookmark

bookmark-level

Specifies the level of the bookmark

bookmark-target

Specifies the target of the bookmark link

float-offset

Pushes floated elements in the opposite direction of

the where they have been floated with float

hyphenate-after

Specifies the minimum number of characters in a

hyphenated word after the hyphenation character

hyphenate-before

Specifies the minimum number of characters in a

hyphenated word before the hyphenation character

hyphenate-character

Specifies a string that is shown when a hyphenatebreak occurs

hyphenate-lines

Indicates the maximum number of successive

hyphenated lines in an element

hyphenate-resource

Specifies a comma-separated list of external

resources that can help the browser determine
hyphenation points

hyphens

Sets how to split words to improve the layout of

paragraphs

image-resolution

Specifies the correct resolution of images

marks

Adds crop and/or cross marks to the document

string-set

Dimension Properties
Property

Description

CSS Version

height

Sets the height of an element

max-height

Sets the maximum height of an element

max-width

Sets the maximum width of an element

min-height

Sets the minimum height of an element

min-width

Sets the minimum width of an element

width

Sets the width of an element

Flexible Box Properties

Property

Description

CSS Version

box-align

Specifies how to align the child elements of a box

box-direction

Specifies in which direction the children of a box are

displayed

box-flex

Specifies whether the children of a box is flexible or

inflexible in size

box-flex-group

Assigns flexible elements to flex groups

box-lines

Specifies whether columns will go onto a new line

whenever it runs out of space in the parent box

box-ordinal-group

Specifies the display order of the child elements of a

box

box-orient

Specifies whether the children of a box should be laid

out horizontally or vertically

box-pack

Specifies the horizontal position in horizontal boxes

and the vertical position in vertical boxes

Property

Description

CSS Version

font

Sets all the font properties in one declaration

font-family

Specifies the font family for text

font-size

Specifies the font size of text

font-style

Specifies the font style for text

font-variant

Specifies whether or not a text should be displayed in

a small-caps font

font-weight

Specifies the weight of a font

@font-face

A rule that allows websites to download and use fonts 3

other than the "web-safe" fonts

font-size-adjust

Preserves the readability of text when font fallback

occurs

font-stretch

Selects a normal, condensed, or expanded face from a 3

font family

Font Properties

Generated Content Properties

Property

Description

CSS Version

content

Used with the :before and :after pseudo-elements, to

insert generated content

counter-increment

Increments one or more counters

counter-reset

Creates or resets one or more counters

quotes

Sets the type of quotation marks for embedded

quotations

crop

Allows a replaced element to be just a rectangular

area of an object, instead of the whole object

move-to

Causes an element to be removed from the flow and

reinserted at a later point in the document

page-policy

Determines which page-based occurance of a given

element is applied to a counter or string value

Property

Description

CSS Version

grid-columns

Specifies the width of each column in a grid

grid-rows

Specifies the height of each column in a grid

Grid Properties

Hyperlink Properties
Property

Description

CSS Version

target

A shorthand property for setting the target-name,

target-new, and target-position properties

target-name

Specifies where to open links (target destination)

target-new

Specifies whether new destination links should open

in a new window or in a new tab of an existing
window

target-position

Specifies where new destination links should be

placed

Property

Description

CSS Version

alignment-adjust

Allows more precise alignment of elements

alignment-baseline

Specifies how an inline-level element is aligned with

respect to its parent

baseline-shift

Allows repositioning of the dominant-baseline relative 3

to the dominant-baseline

dominant-baseline

Specifies a scaled-baseline-table

Linebox Properties

drop-initial-after-adjust Sets the alignment point of the drop initial for the
primary connection point

drop-initial-after-align

Sets which alignment line within the initial line box is

used at the primary connection point with the initial
letter box

drop-initial-beforeadjust

Sets the alignment point of the drop initial for the

secondary connection point

drop-initial-beforealign

Sets which alignment line within the initial line box is

used at the secondary connection point with the
initial letter box

drop-initial-size

Controls the partial sinking of the initial letter

drop-initial-value

Activates a drop-initial effect

inline-box-align

Sets which line of a multi-line inline block align with

the previous and next inline elements within a line

line-stacking

A shorthand property for setting the line-stackingstrategy, line-stacking-ruby, and line-stacking-shift

properties

line-stacking-ruby

Sets the line stacking method for block elements

containing ruby annotation elements

line-stacking-shift

Sets the line stacking method for block elements

containing elements with base-shift

line-stacking-strategy

Sets the line stacking strategy for stacked line boxes

within a containing block element

text-height

Sets the block-progression dimension of the text

content area of an inline box

Property

Description

CSS Version

list-style

Sets all the properties for a list in one declaration

List Properties

list-style-image

Specifies an image as the list-item marker

list-style-position

Specifies if the list-item markers should appear inside

or outside the content flow

list-style-type

Specifies the type of list-item marker

Property

Description

CSS Version

margin

Sets all the margin properties in one declaration

margin-bottom

Sets the bottom margin of an element

margin-left

Sets the left margin of an element

margin-right

Sets the right margin of an element

margin-top

Sets the top margin of an element

Property

Description

CSS Version

marquee-direction

Sets the direction of the moving content

marquee-play-count

Sets how many times the content move

marquee-speed

Sets how fast the content scrolls

marquee-style

Sets the style of the moving content

Margin Properties

Marquee Properties

Multi-column Properties
Property

Description

CSS Version

column-count

Specifies the number of columns an element should

be divided into

column-fill

Specifies how to fill columns

column-gap

Specifies the gap between the columns

column-rule

A shorthand property for setting all the column-rule-* 3

properties

column-rule-color

Specifies the color of the rule between columns

column-rule-style

Specifies the style of the rule between columns

column-rule-width

Specifies the width of the rule between columns

column-span

Specifies how many columns an element should span

across

column-width

Specifies the width of the columns

columns

A shorthand property for setting column-width and

column-count

Property

Description

CSS Version

padding

Sets all the padding properties in one declaration

padding-bottom

Sets the bottom padding of an element

Padding Properties

padding-left

Sets the left padding of an element

padding-right

Sets the right padding of an element

padding-top

Sets the top padding of an element

Paged Media Properties

Property

Description

CSS Version

fit

Gives a hint for how to scale a replaced element if

neither its width nor its height property is auto

fit-position

Determines the alignment of the object inside the box 3

image-orientation

Specifies a rotation in the right or clockwise direction

that a user agent applies to an image

page

Specifies a particular type of page where an element

SHOULD be displayed

size

Specifies the size and orientation of the containing

box for page content

Positioning Properties
Property

Description

CSS Version

bottom

Specifies the bottom position of a positioned element 2

clear

Specifies which sides of an element where other

floating elements are not allowed

clip

Clips an absolutely positioned element

cursor

Specifies the type of cursor to be displayed

display

Specifies how a certain HTML element should be

displayed

float

Specifies whether or not a box should float

left

Specifies the left position of a positioned element

overflow

Specifies what happens if content overflows an

element's box

position

Specifies the type of positioning method used for an

element (static, relative, absolute or fixed)

right

Specifies the right position of a positioned element

top

Specifies the top position of a positioned element

visibility

Specifies whether or not an element is visible

z-index

Sets the stack order of a positioned element

Property

Description

CSS Version

orphans

Sets the minimum number of lines that must be left at 2

the bottom of a page when a page break occurs inside
an element

page-break-after

Sets the page-breaking behavior after an element

Print Properties

page-break-before

Sets the page-breaking behavior before an element

page-break-inside

Sets the page-breaking behavior inside an element

widows

Sets the minimum number of lines that must be left at 2

the top of a page when a page break occurs inside an
element

Ruby Properties
Property

Description

CSS Version

ruby-align

Controls the text alignment of the ruby text and ruby

base contents relative to each other

ruby-overhang

Determines whether, and on which side, ruby text is

allowed to partially overhang any adjacent text in
addition to its own base, when the ruby text is wider
than the ruby base

ruby-position

Controls the position of the ruby text with respect to

its base

ruby-span

Controls the spanning behavior of annotation

elements

Property

Description

CSS Version

mark

A shorthand property for setting the mark-before and 3

mark-after properties

mark-after

Allows named markers to be attached to the audio

Speech Properties

stream
mark-before

Allows named markers to be attached to the audio

stream

phonemes

Specifies a phonetic pronunciation for the text

contained by the corresponding element

rest

A shorthand property for setting the rest-before and

rest-after properties

rest-after

Specifies a rest or prosodic boundary to be observed

after speaking an element's content

rest-before

Specifies a rest or prosodic boundary to be observed

before speaking an element's content

voice-balance

Specifies the balance between left and right channels

voice-duration

Specifies how long it should take to render the

selected element's content

voice-pitch

Specifies the average pitch (a frequency) of the

speaking voice

voice-pitch-range

Specifies variation in average pitch

voice-rate

Controls the speaking rate

voice-stress

Indicates the strength of emphasis to be applied

voice-volume

Refers to the amplitude of the waveform output by

the speech synthesises

Table Properties
Property

Description

CSS Version

border-collapse

Specifies whether or not table borders should be

collapsed

border-spacing

Specifies the distance between the borders of

adjacent cells

caption-side

Specifies the placement of a table caption

empty-cells

Specifies whether or not to display borders and

background on empty cells in a table

table-layout

Sets the layout algorithm to be used for a table

Property

Description

CSS Version

color

Sets the color of text

direction

Specifies the text direction/writing direction

letter-spacing

Increases or decreases the space between characters

in a text

line-height

Sets the line height

text-align

Specifies the horizontal alignment of text

text-decoration

Specifies the decoration added to text

text-indent

Specifies the indentation of the first line in a text-

Text Properties

block
text-transform

Controls the capitalization of text

unicode-bidi

1
2

vertical-align

Sets the vertical alignment of an element

white-space

Specifies how white-space inside an element is

handled

word-spacing

Increases or decreases the space between words in a

text

hanging-punctuation

Specifies whether a punctuation character may be

placed outside the line box

punctuation-trim

Specifies whether a punctuation character should be

trimmed

text-align-last

Describes how the last line of a block or a line right

3
before a forced line break is aligned when text-align is
"justify"

text-justify

Specifies the justification method used when textalign is "justify"

text-outline

Specifies a text outline

text-overflow

Specifies what should happen when text overflows

the containing element

text-shadow

Adds shadow to text

text-wrap

Specifies line breaking rules for text

word-break

Specifies line breaking rules for non-CJK scripts

word-wrap

Allows long, unbreakable words to be broken and

wrap to the next line

2D/3D Transform Properties

Property

Description

CSS Version

transform

Applies a 2D or 3D transformation to an element

transform-origin

Allows you to change the position on transformed

elements

transform-style

Specifies how nested elements are rendered in 3D

space

perspective

Specifies the perspective on how 3D elements are

viewed

perspective-origin

Specifies the bottom position of 3D elements

backface-visibility

Defines whether or not an element should be visible

when not facing the screen

Transition Properties
Property

Description

CSS Version

transition

A shorthand property for setting the four transition

properties

transition-property

Specifies the name of the CSS property the transition

effect is for

transition-duration

Specifies how many seconds or milliseconds a

transition effect takes to complete

transition-timingfunction

Specifies the speed curve of the transition effect

transition-delay

Specifies when the transition effect will start

User-interface Properties
Property

Description

CSS Version

appearance

Allows you to make an element look like a standard

user interface element

box-sizing

Allows you to define certain elements to fit an area in 3

a certain way

icon

Provides the author the ability to style an element

with an iconic equivalent

nav-down

Specifies where to navigate when using the arrowdown navigation key

nav-index

Specifies the tabbing order for an element

nav-left

Specifies where to navigate when using the arrow-left 3

navigation key

nav-right

Specifies where to navigate when using the arrowright navigation key

nav-up

Specifies where to navigate when using the arrow-up

navigation key

outline-offset

Offsets an outline, and draws it beyond the border

edge

resize

Specifies whether or not an element is resizable by

the user

Examples
1. The following example demonstrates how to use background image paroperties of css
<!doctype html>
<html>
<head>
<style>
body
{
background-image:url(e:/images/garden.jpg);
background-repeat:no-repeat;
background-size:200px 200px;
background-position:center center;
background-attachment:fixed;
}
</style>
</head>
<body>
<h1> Provide Text in the body to make the page scrollable </h1>
</body>
</html>

2. The following example animates a div element and moves it right and left with
animation properties of css 3
<!doctype html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s 2;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>

</head>
<body>
<div></div>
</body>
</html>
3. The following example animates a div element and moves it right then down then left
and finally top with animation properties of css 3
<!doctype html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;

-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
46

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
47

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4. The following example rotates an image when mouse is over the image with
animation properties of css 3
<!doctype html>
<html>
<head>
<style>
@-webkit-keyframes spin
{
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
from { -o-transform: rotate(0deg);}

to { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg);}
to { -ms-transform: rotate(360deg);}
}
img
{
width:250px;
height:250px;
align:center;
}
img:hover
{
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
-o-animation: spin 5s infinite linear;
-ms-animation: spin 5s infinite linear;
}
</style>
</head>
<body>
<img src="e:\images\garden.jpg"/>
</body>
</html>

5. The following example changes background of the page from red to yellow using
animation properties of css 3
<!doctype html>
<html>
<head>
<style>
body
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mycolor 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mycolor
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes mycolor /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes mycolor /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

6. The following example demonstrates how to design a page as follows using css

Create an external css file with name global.css as follows

/* BASIC */
body {
font: 62.7% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, p, ul, ol {
margin: 0px;
padding: 0px;
}
a img {
border: none;
}
/* LAYOUT */

#banner {
background: url(images/banner.png) no-repeat right top;
height: 90px;
}

/* NAVIGATION */
#mainNav li {
list-style: none;
display: inline;
}
#mainNav a {
text-decoration: none;
color: #000000;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: 1px dashed #999999;
display: block;
padding: 7px 5px 7px 30px;
background: #E7E7E7 url(images/link.png) no-repeat left center;
}
a#homeLink {
background-image: url(images/home.png);
background-repeat: no-repeat;
background-position: left center;
}
#logo {
display: none;
}
#mainNav ul {
border-top: 1px dashed #999999;
margin-top: 20px;
margin-bottom: 20px;
}
#mainNav a:hover {
background: #B2F511 url(images/go.png) no-repeat left center;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
52

}
#home #mainNav a#homelink,
#feature #mainNav a#featureLink {
background: #FFFFFF url(images/bg_here.png) no-repeat 95% 50%;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
}
#home #mainNav a#homelink:hover,
#feature #mainNav a#featureLink:hover {
color: #B2F511;
}
#nav p {
color: #ED6733;
padding-right: 5px;
padding-left: 5px;
}

#nav a {
text-decoration: none;
color: #666666;
}
/* BANNER STYLES */
#banner img {
float: left;
}
#banner ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#banner li {
display: inline;
float: right;
margin-right: 5px;
padding-bottom: .5em; /* to display bottom border on links in IE */
53

}
#sitetools li a {
font-size: 1em;
text-decoration: none;
color: #FFFFFF;
line-height: 2em;
background: #1B3A89;
padding: 5px;
height: 2em;
border: 1px solid #4D69B0;
font-weight: bold;
}
#sitetools li a:hover {
color: #10214E;
background: #DCE5FF;
}
/* MAIN */
#main a {
text-decoration: none;
border-bottom: 1px dashed #B2F511;
color: #152D6A;
}
#main h1 {
color: #152D6A;
margin-top: 15px;
margin-bottom: 5px;
border-bottom: 2px solid #B2F511;
font: normal 2.7em Impact, "Arial Narrow", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 5px;
background: url(images/feature_bug.png) no-repeat top right;
}
#main h2 {
font: normal 2em Georgia, "Times New Roman", Times, serif;
margin-top: 15px;
54

margin-bottom: 3px;
color: #152D6A;
}
#main p {
font-size: 1.25em;
margin-bottom: 5px;
}
/* headlines with warnings */
.warning {
background: url(images/warning.png) no-repeat left center;
padding-top: 2px;
padding-left: 30px;
border-bottom: 1px dotted #CCCCCC;
}
/* NEWS */
#news .story {
background: url(images/bg_story.png) repeat-y;
color: #FFFFFF;
padding: 5px 5px;
border-bottom: 1px dashed #AAEB11;
display: block;
text-decoration: none;
line-height: 110%;
}
#news span.title {
font-size: 1.1em;
font-weight: bold;
display: block;
line-height: 120%;
color: #FFCC00;
}
#news a.story:hover {
color: #4A761D;
background: url(images/bg_story_high.png);
}
* html #news a {
height: 1px;
}
55

#news h2 {
background: #B2F511 url(images/bg_newshead.png) no-repeat;
color: #333333;
font-size: 2em;
text-transform: uppercase;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 5px;
}
#news h2 span {
background: url(images/down.png) no-repeat;
position: absolute;
right: 10px;
height: 48px;
width: 48px;
top: 4px;
z-index: 10;
}
/* ADVERTISING */
div.natEx {
text-align: center;
margin-top: 25px;
font-weight: bold;
}
.natEx p {
margin-bottom: 5px;
}
#news a.story:hover span.title {
color: #000000;
}
Create the html file as follows to design the page
<!DOCTYPE html >
<html>
<head>

#news
{
float: right;
width: 160px;
}
#nav
{
float: left;
width: 160px;
margin-left: -590px;
}
#legal
{
clear: both;
margin-right: 160px;
padding: 5px 5px 160px 20px;
border-top: 1px dashed #999999;
font-weight: bold;
color: #666666;
}
</style>
</head>
<body id="feature">
<div id="wrapper">
<div id="banner">
<p id="logo"><a href="http://www.cosmofarmer.com/">
58

<img src="e:\images\garden.jpg" alt="CosmoFarmer" width="287" height="53"

border="0" />
</a>
</p>
<ul id="sitetools">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Subscribe</a> </li>
</ul>
</div>
<div id="main">
<h1>Bathtub Hydroponics</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure. <a href="http://www.hydroponicsonline.com/">You'll find more
information here
</a>.
</p>
<h2 class="warning">Watch the Water Level</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure.</p>
<h2 class="warning">Rubber Duckies Needn’t Apply</h2>
59

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure.</p>
<h2 class="warning">Cast-Iron No-Nos</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure.</p>
<h2 class="warning">Clean the Overflow Valve </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
vel eum iriure. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

vel eum iriure.</p>
</div>
<div id="news">
<h2>News</h2>
<a href="#" class="story">
<span class="title">Virgo: It's Your Month</span>
The stars are aligned in your favor. Next month? Not so much. </a>
<a href="#" class="story"><span class="title">Your Feedback</span>CosmoFarmer
wants to hear from you. We want your honest opinion on this
TOTALLY AWESOME web site. </a>
<a href="#" class="story"><span class="title">Indoor Lawns: <br />
Sod or Seed?</span>
Should you grow grass from scratch or have an expert install a beautiful, already
grown, lucious bed of green in your living room? </a>
<a href="#" class="story"><span class="title">Lorem Ipsum</span>
Lorem ipsum dolor sit amet </a>
<a href="#" class="story"><span class="title">Lorem Ipsum</span> Lorem ipsum
dolor sit amet </a>
<a href="#" class="story"><span class="title">Lorem Ipsum</span> Lorem ipsum
dolor sit amet </a>
<a href="#" class="story"><span class="title">Lorem Ipsum</span> Lorem ipsum
dolor sit amet </a>
<a href="#" class="story"><span class="title">Lorem Ipsum</span> Lorem ipsum
dolor sit amet </a>
<a href="#" class="story"><span class="title">Lorem Ipsum</span> Lorem ipsum
dolor sit amet </a>
</div>
<div id="nav">

<div id="mainNav">
<ul>
<li><a href="#" id="homeLink">Home</a></li>
<li><a href="#" id="featureLink">Features</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Quiz</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Horoscopes</a></li>
</ul>
</div>
<p>CosmoFarmer.com believes that your privacy is important. All monitoring that
takes place as you visit our site is protected. Infortmation collected
is limited to our network of 9,872 partner affiliates. Your information will only be
shared among them, and as part of our network's anti-spam policy
you will be limited to one e-mail per partner affiliate per day, not to exceed a total
of 9,872 e-mails a day. If you wish to opt out of this program please
call us between the hours of 9:01-9:03am GMT. </p>
<div class="natEx">
<p><a href="http://www.nationalexasperator.com/"><img src="images/ne.png"
alt="National Exasperator" width="97" height="89" /></a></p>
<p><a href="http://www.nationalexasperator.com/">Subscribe to the National
Exasperator Today! </a></p>
</div>
<p> </p>
</div>
<div id="legal">Copyright 2006, CosmoFarmer.com </div>
</div>
</body>
</html>
62

7. The following example demonstrates how to design a page with a form as follows
using css

Create an external css file with the name global.css as follows

/* BASIC */
body
{
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
margin: 0;
background-color: #FFFFFF;
}
p,h1,h2,h3,h4,h5,h5,ol,ul
{
margin: 0px;
63

padding: 0px;
}
br.clear
{
height:1px;
clear:both;
line-height: 1px;
background-color: #00CC33;
}
/* LAYOUT */
#wrapper
{
width: 760px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
}
#main
{
border-right: 1px solid #999999;
border-left: 1px solid #999999;
padding: 3px 3px 0 6px;
float: left;
width: 424px;
}
#subNav
64

{
width: 150px;
float: left;
background-color: #FBEF99;
}
#banner
{
background-image: url(images/bg/banner_bg.jpg);
background-repeat: repeat-x;
background-position:
left top;
width: 759px;
border-bottom: 1px solid #999999;
}
#announce
{
float: left;
width: 166px;
border-top: 10px solid #294E56;
margin-top: 3px;
background: url(images/bg/announce_bg.jpg) repeat-x left top;
margin-left: 3px;
line-height: 95%;
margin-right: 3px;
}
#copyright
65

{
clear: both;
margin-left: 150px;
border: 1px solid #999999;
border-right:none;
font-size: 12px;
padding-left: 6px;
}
/* BANNER STYLES */
#background
{
background-image: url(images/bg/banner_flower.jpg);
background-repeat: no-repeat;
background-position: right top;
}
/* image replacement technique */
#banner p.logo
{
background: url(images/logo.gif) no-repeat left top;
height: 70px;
text-indent: -5000px;
}
#nav
{
margin-top: 10px;
margin-bottom: 0px;
66

}
#nav li
{
list-style-type: none;
padding: 0px;
margin: 0;
float: left;
}
#nav a
{
display: block;
font-size: 11px;
color: #D6ECAE;
text-decoration: none;
background-color: #294E56;
padding: 2px 2px 2px 3px;
width: 8em;
margin-left: 2px;
border-right: 1px solid #73AFB7;
border-bottom: 1px solid #73AFB7;
font-weight: bold;
margin-bottom: 2px;
}
#nav a:hover
{
background: #73AFB7;
67

border-right: 1px solid #14556B;

border-bottom: 1px solid #14556B;
color: #FBEF99;
}
/*highlight "you are here" buttons*/
#home #nav a#homeLink,
#feature #nav a#featureLink
{
background: #73AFB7;
border-right: 1px solid #14556B;
border-bottom: 1px solid #14556B;
color: #FBEF99;
}
/* MAIN SECTION STYLES */
#main h1 {
color: #5F9794;
font: bold 24px "Century Gothic", "Gill Sans", Arial, sans-serif;
}
/* ANNOUNCEMENT STYLES */
#announce h2
{
font-size: 14px;
}
#announce a
{
font-size: 12px;
68

display: block;
text-decoration: none;
color: #102536;
padding: 3px 5px;
border-bottom: 1px solid #14556B;
}
#announce .title
{
font-weight: bold;
display: block;
}
#announce a:hover
{
background-color: #5F9794;
color: #FBEF99
}
#announce ul
{
list-style:none;
}
#announce li
{
display: inline;
}
/* PAGE SPECIFIC STYLES */
/* HOME */
69

/* no left sidebar--stretch main entire distance */

#home #main
{
margin-left: 0;
width: 577px;
}
/* copyright fits page */
#home #copyright
{
margin-left: 0;
padding: 3px 0 3px 30px;
font-style: italic;
}
#subNav li a
{
font-size: 12px;
text-decoration: none;
display: block;
width: 138px;
background: url(images/bg/side_nav_bg3.jpg) repeat-x;
padding: 2px 6px;
color: #14556B;
border-bottom: 1px solid #d6ecae;
}
#subNav li a:hover
{
70

background: url(images/bg/side_nav_bg.jpg);
color: #102536;
}
.col2 #announce
{
float: left;
margin-bottom: 10px;
}
.col2 #main
{
float: right;
border-right: none;
width: 573px;
}
.col2 #copyright
{
margin-left: 0px;
}
#main h2
{
font-size: 1.2em;
margin-top: 15px;
color: #666666;
}
#main #subForm p
{
71

margin-top: 10px;
margin-bottom: 10px;
}
#main p.privacy
{
color: #73AFB7;
margin-top: 25px;
margin-bottom: 50px;
font-size: 0.85em;
}
Create a html page as follows for designing the page with a form

<!DOCTYPE html>
<html>
<head>
<link href="global.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#subForm
{
font-size: .8em;
}
#subForm .label
{
72

float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
#subscribe
{

margin-left: 240px;
background-color: #CBD893;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}
#refer
{
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}
#name, #email, #comments
{
background-color: #FBEF99;
font-family:"Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: -2px;
}
73

#name:focus,
#email:focus,
#comments:focus,
#refer:focus
{
background-color: #FDD041;
}
</style>
</head>
<body id="feature" class="col2">
<div id="wrapper">
<div id="banner">
<div id="background"><p class="logo">CosmoFarmer 2.0</p>
<div id="nav">
<ul>
<li><a href="index.html" id="homeLink">Home</a></li>
<li><a href="/features/index.html" id="featureLink">Features</a></li>
<li><a href="/experts/index.html" id="expertLink">Experts</a></li>
<li><a href="/quiz/index.html" id="quizLink">Quiz</a></li>
<li><a href="/projects/index.html" id="projectLink">Projects</a></li>
<li><a href="/horoscopes/index.html"
id="horoscopeLink">Horoscopes</a></li></ul>
<br class="clear" />
</div>
</div>

</div>

<div id="main">
<h1 id="lead"><span class="section">Sign Up:</span> Reader Subscription Form
</h1>
<form id="subForm" name="subForm">
<p><label for="name" class="label">What is your name?</label>
<input type="text" name="name" id="name" /></p>
<p><label for="email" class="label">What is your email address?</label>
<input type="text" name="email" id="email" /></p>
<p>
<span class="label">Rate your apartment farming skills </span>
<label>
<input name="skill" type="radio" value="novice" />Novice</label>
<label><input name="skill" type="radio" value="intermediate"
/>Intermediate</label>
<label><input name="skill" type="radio" value="advanced"/>Advanced</label>
</p>
<p>
<label for="refer" class="label">Where did you hear about us? </label>
<select name="refer" id="refer">
<option value="null">Select One</option>
<option value="1">Friend</option>
<option value="2">Herban Jungle</option>
<option value="3">Compost Today</option>
<option value="4">Vanity Fair</option>
</select>
75

</p>
<p>
<label for="comments" class="label">Any additional comments? </label>
<textarea name="comments" cols="35" rows="4" id="comments"></textarea>
</p>
<p>
<input type="submit" name="Submit" id="subscribe" value="Subscribe" />
</p>
</form>
<br class="clear" />
<p class="privacy">CosmoFarmer.com believes that your privacy is important.
Information collected at this site is limited to our network of 9,872 partner
affiliates. Your information will only be shared among them, and as part of our
network's anti-spam policy you will be limited to one e-mail per partner affiliate
per day, not to exceed a total of 9,872 e-mails a day. If you wish to opt out of this
program please call us between the hours of 9:01-9:03am GMT.
</p>
</div>

<div id="announce">
<ul>
<li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum
dolor site amet.</a></li>
<li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site
amet.</a></li>
<li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum
dolor site amet.</a></li>
<li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem
ipsum dolor site amet.</a></li>

<li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site

amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site
amet.</a></li>
<li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor
site amet.</a></li>
<li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor
site amet.</a></li>
</ul>
</div>

<address id="copyright">Copyright 2006, CosmoFarmer.com </address>
</div>

</body>
</html>
8. The following example demonstrates how to create multi column layout

<!doctype html>
<html>
<head>
<style>
.threecolumn
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:3px outset blue; /* Firefox */

-webkit-column-rule:3px outset blue; /* Safari and Chrome */
column-rule:3px outset blue;

-moz-column-width:200px; /* Firefox */
-webkit-column-width:200px; /* Safari and Chrome */
-ms-column-width:200px;
}
h2
{
-webkit-column-span:1; /* Chrome */
column-span:1;
-ms-column-span:1;
}
</style>
</head>
<body>
<div class="threecolumn">
<h2> This Heading Spans On All Columns In The page This Heading Spans On All
Columns In The page</h2>
This is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
78

page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3. This is a three column layout created for the
page with css 3. This is a three column layout created for the page with css 3. This
is a three column layout created for the page with css 3. This is a three column
layout created for the page with css 3.
</div>
</body>
</html>

Cpanel University - Web Services in WHM (T303) - Quiz - EasyApache 4 PDF
100% (1)
Cpanel University - Web Services in WHM (T303) - Quiz - EasyApache 4 PDF
1 page
Real Time Chat Using Ionic and Laravel at API
No ratings yet
Real Time Chat Using Ionic and Laravel at API
8 pages
Class Notes Css PDF
No ratings yet
Class Notes Css PDF
79 pages
For Designing and Developing Pages
No ratings yet
For Designing and Developing Pages
73 pages
Css (Final)
No ratings yet
Css (Final)
30 pages
Unit 2 CSS
No ratings yet
Unit 2 CSS
133 pages
LO3 Information Shit 2
No ratings yet
LO3 Information Shit 2
18 pages
ch4 CSS - Part 1
No ratings yet
ch4 CSS - Part 1
33 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
112 pages
What Is CSS?
No ratings yet
What Is CSS?
61 pages
Lecture 17 - CSS Overview
No ratings yet
Lecture 17 - CSS Overview
33 pages
Dynamic Hyper Text Markup Language
No ratings yet
Dynamic Hyper Text Markup Language
89 pages
Basics of CSS For Web
No ratings yet
Basics of CSS For Web
16 pages
What Is CSS?: Who Creates and Maintains CSS?
No ratings yet
What Is CSS?: Who Creates and Maintains CSS?
211 pages
Style Sheets
No ratings yet
Style Sheets
36 pages
Unit Iii
No ratings yet
Unit Iii
19 pages
CSS
No ratings yet
CSS
49 pages
CSS Introduction: Before Your Begin
No ratings yet
CSS Introduction: Before Your Begin
137 pages
The Type Selectors:: Selector (Property: Value)
No ratings yet
The Type Selectors:: Selector (Property: Value)
18 pages
Unit 2 Notes
No ratings yet
Unit 2 Notes
27 pages
CSS Basics Day 1
No ratings yet
CSS Basics Day 1
42 pages
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
No ratings yet
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
6 pages
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
No ratings yet
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
6 pages
CSS Introduction: Before Your Begin
No ratings yet
CSS Introduction: Before Your Begin
127 pages
Fundamentals of Web UNIT III
No ratings yet
Fundamentals of Web UNIT III
19 pages
22PLC15A - Module 3 - 2022-23
No ratings yet
22PLC15A - Module 3 - 2022-23
77 pages
Kosa 0147
No ratings yet
Kosa 0147
7 pages
1 - Syntax and Selectors
No ratings yet
1 - Syntax and Selectors
3 pages
Lecture6_Introduction to CSS
No ratings yet
Lecture6_Introduction to CSS
27 pages
Css Quick Guide
No ratings yet
Css Quick Guide
132 pages
IP-Chapter 3
No ratings yet
IP-Chapter 3
28 pages
CSS Selector
No ratings yet
CSS Selector
38 pages
Chapter-3 CSS
No ratings yet
Chapter-3 CSS
55 pages
Cascading Style Sheet PDF
No ratings yet
Cascading Style Sheet PDF
21 pages
What Is CSS?
No ratings yet
What Is CSS?
156 pages
Multiple Styles Will Cascade Into One
No ratings yet
Multiple Styles Will Cascade Into One
6 pages
MODULE 2 (Updated)
No ratings yet
MODULE 2 (Updated)
130 pages
CSS - Sololearn
No ratings yet
CSS - Sololearn
7 pages
Webdesign 9a
No ratings yet
Webdesign 9a
25 pages
CSS Reading Material 2025
No ratings yet
CSS Reading Material 2025
30 pages
Unit Ii
No ratings yet
Unit Ii
58 pages
IT 2352-Unit 2
No ratings yet
IT 2352-Unit 2
32 pages
Css 1
No ratings yet
Css 1
7 pages
CSS selectors
No ratings yet
CSS selectors
7 pages
Module 3 CSS
No ratings yet
Module 3 CSS
27 pages
Fundamentals of CSS - Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy PDF
No ratings yet
Fundamentals of CSS - Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy PDF
7 pages
Beginner CSS - Selectors and Visual Rules Cheatsheet - Codecademy
No ratings yet
Beginner CSS - Selectors and Visual Rules Cheatsheet - Codecademy
6 pages
WT Unit 2
No ratings yet
WT Unit 2
42 pages
Cascading Style Sheets (CSS) : September 1, 2021
No ratings yet
Cascading Style Sheets (CSS) : September 1, 2021
32 pages
Itec50 Lesson 6 Part 1
No ratings yet
Itec50 Lesson 6 Part 1
142 pages
WT 5
No ratings yet
WT 5
92 pages
Learn CSS - Syntax and Selectors Cheatsheet - Codecademy
No ratings yet
Learn CSS - Syntax and Selectors Cheatsheet - Codecademy
5 pages
Unit 3 CSS
No ratings yet
Unit 3 CSS
11 pages
Unit Iii
No ratings yet
Unit Iii
46 pages
css-notes
No ratings yet
css-notes
36 pages
Chapter 3
No ratings yet
Chapter 3
58 pages
CSS Intro
No ratings yet
CSS Intro
20 pages
CSS Complete Notes
No ratings yet
CSS Complete Notes
126 pages
CSS (Cascading Style Sheet)
No ratings yet
CSS (Cascading Style Sheet)
12 pages
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
From Everand
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
Steven Bright
No ratings yet
Answer All Questions. 2. Write Legibly On Both Sides of The Answer Book. 3. Write Relevant Question Numbers Before Writing The Answer
No ratings yet
Answer All Questions. 2. Write Legibly On Both Sides of The Answer Book. 3. Write Relevant Question Numbers Before Writing The Answer
4 pages
Sdds
No ratings yet
Sdds
6 pages
JECRC University, Jaipur School of Engineering MCA Semester III Programming in C++ - I Assignment No 4
No ratings yet
JECRC University, Jaipur School of Engineering MCA Semester III Programming in C++ - I Assignment No 4
1 page
C++ Questions
0% (1)
C++ Questions
31 pages
JECRC University, Jaipur School of Engineering MCA Semester III Programming in C++ - I Assignment No 3
No ratings yet
JECRC University, Jaipur School of Engineering MCA Semester III Programming in C++ - I Assignment No 3
1 page
CHAPTER 13 - Steganography and Watermarking
No ratings yet
CHAPTER 13 - Steganography and Watermarking
34 pages
Java Questions
No ratings yet
Java Questions
111 pages
New Stegnography Technique Using DCT Quantization With Rsa Encryption Algorithm
No ratings yet
New Stegnography Technique Using DCT Quantization With Rsa Encryption Algorithm
5 pages
Code: MCA009D Subject: Programming in C++: Credit: 04 Course Description
No ratings yet
Code: MCA009D Subject: Programming in C++: Credit: 04 Course Description
3 pages
Feedback Rating Tracker (19 April)
No ratings yet
Feedback Rating Tracker (19 April)
2 pages
Code: MCA009D Subject: Programming in C++: Credit: 04 Course Description
No ratings yet
Code: MCA009D Subject: Programming in C++: Credit: 04 Course Description
3 pages
Feedback Rating Tracker (17 April)
No ratings yet
Feedback Rating Tracker (17 April)
2 pages
Summer Internship Report Final
No ratings yet
Summer Internship Report Final
39 pages
Web Dev Review
No ratings yet
Web Dev Review
12 pages
01 - 12 - 21, 4 - 05 PM Microsoft Lens
No ratings yet
01 - 12 - 21, 4 - 05 PM Microsoft Lens
18 pages
Web Designing Lab (BCS353) Index
No ratings yet
Web Designing Lab (BCS353) Index
2 pages
Downloaded From Manuals Search Engine
No ratings yet
Downloaded From Manuals Search Engine
114 pages
OData Services Documentation
No ratings yet
OData Services Documentation
9 pages
Web Lecture 1
No ratings yet
Web Lecture 1
18 pages
Performance: Performance Accessibility Best Practices SEO Progressive Web App
No ratings yet
Performance: Performance Accessibility Best Practices SEO Progressive Web App
54 pages
KD07 - Mean Stack Web Development
No ratings yet
KD07 - Mean Stack Web Development
15 pages
lab06_instruction (1)
No ratings yet
lab06_instruction (1)
4 pages
Lesson 2 081238
No ratings yet
Lesson 2 081238
4 pages
Scope of DM PDF
No ratings yet
Scope of DM PDF
3 pages
WWW Eshikshak Co in
No ratings yet
WWW Eshikshak Co in
18 pages
Introduction To HTML
No ratings yet
Introduction To HTML
10 pages
Slobodan Gajic CV
No ratings yet
Slobodan Gajic CV
3 pages
6 Investment Plans With High RetNavbharat Times Hindi Newspaper - Cms
No ratings yet
6 Investment Plans With High RetNavbharat Times Hindi Newspaper - Cms
139 pages
Arnav Sudan - 2019TT10954 Question 1: Networking Tools: (A) Find The IP Address of Your Machine. Results
No ratings yet
Arnav Sudan - 2019TT10954 Question 1: Networking Tools: (A) Find The IP Address of Your Machine. Results
28 pages
(Ebook) Dreamweaver CS4 All-in-One For Dummies by Sue Jenkins, Richard Wagner ISBN 9780470391808, 9780470441060, 0470391804, 0470441062 - Quickly download the ebook to start your content journey
100% (2)
(Ebook) Dreamweaver CS4 All-in-One For Dummies by Sue Jenkins, Richard Wagner ISBN 9780470391808, 9780470441060, 0470391804, 0470441062 - Quickly download the ebook to start your content journey
56 pages
Script Script
0% (2)
Script Script
22 pages
Practicals 1. Use of Basic Tags Code
No ratings yet
Practicals 1. Use of Basic Tags Code
24 pages
Testing Checklist - OWASP
No ratings yet
Testing Checklist - OWASP
4 pages
Rest API Best Practices
100% (1)
Rest API Best Practices
15 pages
From Chrome Browser
No ratings yet
From Chrome Browser
1,231 pages
BackLink 2018
100% (1)
BackLink 2018
16 pages
Vitara Service Manual
No ratings yet
Vitara Service Manual
835 pages
How Can You Use Yoast SEO To Improve Your SEO?
100% (1)
How Can You Use Yoast SEO To Improve Your SEO?
7 pages
Web Browser and Search Engine
No ratings yet
Web Browser and Search Engine
12 pages
Assignment Help WEB DESIGN PDF
No ratings yet
Assignment Help WEB DESIGN PDF
45 pages