Css

Title tag is the name that is defiantly displayed as the name of the tab and also the
name
they use when you save a page in your favorites, and it helps search engines understand what your
page
is about.
The < head > element contains information about the document, which is not
displayed within the main page itself. The < body > element holds the actual
content of the page that is viewed in your browser.
In other words, if an element is to contain another element, it must wholly contain that element. This is
referred to as nesting your elements correctly.
If you wanted the link to open in a new window, you could add a target
attribute to the opening < a > tag as well, and give it a value of _blank
< a href=http://www.Google.com target=_blank >
If you go to the View menu in your browser, and then look for an option that says View Source or Page
Source, you should be able to see the code that created the page.
CSS comments start with "/*" and end with "*/". You can use this both
CSS comment can not be nested, i.e. a comment can not hold another comment within it.
You can use HTML style comment ( "" ) in a CSS stylesheet also.
A CSS comment starts with /* and ends with */. Comments can also span multiple
lines
CSS selectors are used to "find" (or select) HTML elements based on their id, class,
type, attribute, and more.
The id attribute specifies a unique id for an HTML element (the value must be
unique within the HTML document).
Naming rules:
Must contain at least one character
Must not contain any space characters
In HTML, all values are case-insensitive
Naming rules:
Must contain at least one character
Must not contain any space characters
In HTML, all values are case-insensitive
Use the id attribute to style text with CSS:

<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">W3Schools is the best!</h1>
</body>
</html>
An inline style loses many of the advantages of a style sheet (by mixing content
with presentation).
If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, assume that an external style sheet has the following properties for the <h1>
element:
h1 {
color: navy;
margin-left: 20px;
}
then, assume that an internal style sheet also has the following property for the <h1> element:
h1 {
color: orange;
}
If the page with the internal style sheet also links to the external style sheet the properties for the
<h1> element will be:
color: orange;
margin-left: 20px;
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
background-attachment: scroll|fixed|local|initial|inherit;
Property Values
Value
scroll
fixed
local
Description
The background scrolls along with the element. This is default
The background is fixed with regard to the viewport
The background scrolls along with the element's contents
When text-align is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and
newspapers).
This example demonstrates text-shadow with a red and blue neon glow:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
This example demonstrates text-shadow with a red neon glow:
h1 {
text-shadow: 0 0 3px #FF0000;
}
This example demonstrates text-shadow on a white text:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
This example demonstrates a text-shadow with a blur effect:
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Specify that the text in <p> elements will never wrap:
p{
white-space: nowrap;
}
wrap means sending to the next line when the browser size is reduced
Start with the font you want, and end with a generic family, to let the browser pick a similar font
in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like:
"Times New Roman".
More than one font family is specified in a comma-separated list:
Example
p{
font-family: "Times New Roman", Times, serif;
}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
In HTML, there are two types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
++++++++++++++++++++++++++++++++++++++++++++++++++
+++++
1. The FONT/TEXT Definitions:
1. font-family
Denotes typeface.
H2 {font-family: arial}
2. font-style
Denotes the style of the text.

Use normal, italic, small caps, or oblique for commands.
H3 {font-style: small caps}
3. font-size
Denotes the size of the text.

Specify in points (pt), inches (in), centimeters (cm), pixels (px),
or percentage (%).
H4 {font-size: 20pt}
4. font-weight
Denotes text presence.

Specify in extra-light, light, demi-light, medium, bold, demi-bold,
or extra-bold.
A:link {font-weight: demi-light}
5. font-variant
Denotes a variant from the norm.

Specifiy normal and small-caps
H2: {font-variant: small-caps}
6. text-align
Justifies the alignment of text.

Specify as left, center, or right
H1 {text-align: center}
7. text-decoration
Lets you decorate the text (duh).

Specify as italic, blink, underline, line-through, overline, or none.
A:visited {text-decoration: blink}
8. text-indent
Denotes margins. Most often used with the <P>. Make sure you
use </P also!>
Specify in inches (in), centimeters (cm), or pixels (px).
P {text-indent: 1in}
9. word-spacing
Denotes the amount of spaces between words.

or percentage (%).
P {word-spacing: 10px}
10.letter-spacing
Denotes space between letters.

or percentage (%).
P {letter-spacing: 2pt}
11.text-transform
Denotes a transformation of the text.

Specify capitalize, uppercase, lowercase.
B {text-transform: uppercase}
12.color
Denotes color of text.

See here for a few color codes. If you use the six digit hex codes,
make sure you place a hash mark (#) in front.
H3 {color: #FFFFFF}
2. The MARGIN/BACKGROUND Commands

Note! When used with the "BODY" tag these commands affect the entire
page!
1. margin-left
2. margin-right
3. margin-top
Denotes space around the "page".

Specify in points (pt), inches (in), centimeters (cm), or pixels
(px).
BODY {margin-left: 2in}
P {margin-right: 12cm}
BODY {margin-top: 45px}
4. margin
Denotes all three margin commands above in one command.

The pattern follows top, right, and then left.
P {margin: 3in 4cm 12px} (note no commas or semi-colons)
5. line-height
Denotes space between lines of text.

Specify in points (pt), inches (in), centimeters (cm), or pixels
(px), or percentage (%).
TEXT {line-height: 10px}
6. background-color
Denotes page's background color.

Specify the color in hex or word codes, or use "transparant"
BODY {background-color: #ffffff}
7. background-image
Denotes the background image for pages.

Specify the image you want through that image's URL.
BODY {background-image: http://www.page.com/dog.jpg}
8. background-repeat
Denotes how the image will tile.

Specify repeat-x, repeat-y, or no-repeat.
BODY {background-repeat: repeat-y}
9. background-attachment
Denotes how the image will react to a scroll.

Specify scroll, or fixed.
BODY{background-attachment: fixed}
3. The Positioning/Division Definitions:

These commands come into play when you begin working with text and
image positioning. Note these examples are given using a specific item.
1. position
Denotes the placement of an image or a division of the page.

Specify absolute for specific placement, or relative for a relative
placement to other images.
<IMG STYLE="position:absolute" SRC="joe.jpg">
2. left
Denotes amount of space allowed from the left of the browser

screen when positioning an item.
or percentage (%).
<IMG STYLE="position:absolute; LEFT: 20px;" SRC="joe.jpg">
3. top
Denotes amount of space allowed from the top of the browser

screen when positioning an item.
or percentage (%).
<IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt"

SRC="joe.jpg">
4. width
Denotes width of image or page division.

or percentage (%).
<IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP:

200pt" SRC="joe.jpg">
5. height
Denotes height of image or page division.

or percentage (%).
<IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px;

LEFT: 20px; TOP: 200pt" SRC="joe.jpg">
6. overflow
If the item is too large for the height and width specified, this
tells the page what to do with the overflow.
Specify visible, hidden, or scroll.
<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px;

LEFT: 20px; TOP: 200pt" SRC="joe.jpg">
7. z-index
Denotes an item's position in the layering structure. The lower

the number, the lower the layer. An image marker with a 20
would go overtop of an image marked with a 10.
Specify by number.
<IMG STYLE="position:absolute; Z-INDEX: 10; overflow: hidden;

WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">-
The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:
Example
a[target] {
background-color: yellow;
}
The [attribute=value] selector is used to select elements with a specified attribute and value.
The following example selects all <a> elements with a target="_blank" attribute:
Example
a[target="_blank"] {
background-color: yellow;
}
The [attribute~=value] selector is used to select elements with an attribute value containing a
specified word.
The following example selects all elements with a title attribute that contains a space-separated
list of words, one of which is "flower":
Example
[title~="flower"] {
border: 5px solid yellow;
}
The example above will match elements with title="flower", title="summer flower",
and title="flower new", but not title="my-flower" or title="flowers".
The [attribute|=value] selector is used to select elements with the specified attribute starting with
the specified value.
The following example selects all elements with a class attribute value that begins with "top":
Note: The value has to be a whole word, either alone, like class="top", or followed by a
hyphen( - ), like class="top-text"! but class="top abc " and class="topabc" does not get selected
Example
[class|="top"] {
background: yellow;
}
The [attribute^=value] selector is used to select elements whose attribute value begins with a
specified value.
The following example selects all elements with a class attribute value that begins with "top":
Note: The value does not have to be a whole word! So class="top abc " and class="topabc" also
get selected
Example
[class^="top"] {
background: yellow;
}
The [attribute$=value] selector is used to select elements whose attribute value ends with a
specified value.
The following example selects all elements with a class attribute value that ends with "test":
Note: The value does not have to be a whole word!
Example
[class$="test"] {
background: yellow;
}
CSS [attribute*=value] Selector
The [attribute*=value] selector is used to select elements whose attribute value contains a
specified value.
The following example selects all elements with a class attribute value that contains "te":
Note: The value does not have to be a whole word!
Example
[class*="te"] {
background: yellow;
}
Vital to note is that you can use multiple attribute selectors in the same selector, which requires
all of them to match for the selector itself to match.
HTML
<h1 rel="handsome" title="Important note">Multiple Attributes</h1>
CSS
h1[rel="handsome"][title^="Important"] { color: red; }
If you write in CSS as p[name] then any paragraph having the attribute as name
gets affected.
A pseudo-class is used to define a special state of an element.

For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
The syntax of pseudo-classes:

selector:pseudo-class {
property:value;
}
The :first-child pseudo-class matches a specified element that is the first child of
another element.
In the following example, the selector matches any <p> element that is the first child of any
element:
Example
p:first-child {
color: blue;
}
In the following example, the selector matches the first <i> element in all <p> elements:
Example
p i:first-child {
color: blue;
}
In the following example, the selector first selects the first <p> element and applies
the below to all the <i> elements.
Example
p:first-child i {
color: blue;
}
Specify a background color for every <p> element that is the only child of its parent, only child
means that it should not have another tag be it <p> or <span>:
p:only-child {
background: #ff0000;
}
Specify a background color for every <p> element that is the only child of its type, of its parent:
p:only-of-type {
}
Set a background color for all elements that are not a <p> element:
:not(p) {
}
Specify a background color for every <p> element that is the second child of its parent:
p:nth-child(2) {
}
The :nth-child(n) selector matches every element that is the nth child, regardless of
type, of its parent.
Odd and even are keywords that can be used to match child elements whose index is odd or even
(the index of the first child is 1).
Here, we specify two different background colors for odd and even p elements:
p:nth-child(odd) {
}
p:nth-child(even) {
background: #0000ff;
}
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b
is an offset value.
Here, we specify a background color for all p elements whose index is a multiple of 3:
p:nth-child(3n+0) {
}
Specify a background color for every <p> element that is the second p element of its parent:
p:nth-of-type(2) {
}
Specify a background color for every <p> element that is the second p element of its parent,
counting from the last child:
p:nth-last-of-type(2) {
}
Specify a background color for every <p> element that is the second child of its parent, counting
from the last child:
p:nth-last-child(2) {
}
*{color :black}
This means that effect everything
:not(.bucky){color : red}
Everything that is not in the class bucky color red. These are called negation pseudo
classes
The overflow-y property specifies what to do with the top/bottom edges of the content - if it overflows
the element's content area.
overflow-y: visible|hidden|scroll|auto|initial|inherit;
Here the visible value extends the content of that tag beyond its allotted space
Left tag describes the horizontal offset for the left edge of the absolutely positioned element
box from the left edge of the element's containing block. For relatively positioned boxes, the
offsets are relative to where the box would appear normally in the document flow. Positive
values are to the right of the parent block's left edge and negative values are to the left.
An element set to inline-block is very similar to inline in that it will set inline with
the natural flow of text (on the "baseline"). The difference is that you are able to set
a width and height which will be respected.

Css

Uploaded by

Copyright:

Available Formats

Css

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css

Uploaded by

Copyright:

Available Formats

Title tag is the name that is defiantly displayed as the name of the tab and also the

Must contain at least one character

Must not contain any space characters

In HTML, all values are case-insensitive

Must contain at least one character

Must not contain any space characters

In HTML, all values are case-insensitive

Use the id attribute to style text with CSS:

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

In HTML, there are two types of lists:

Denotes the style of the text.

H3 {font-style: small caps}

Denotes the size of the text.

Denotes text presence.

A:link {font-weight: demi-light}

Denotes a variant from the norm.

H2: {font-variant: small-caps}

Justifies the alignment of text.

Lets you decorate the text (duh).

A:visited {text-decoration: blink}

Denotes the amount of spaces between words.

Denotes space between letters.

Denotes a transformation of the text.

Denotes color of text.

2. The MARGIN/BACKGROUND Commands

Denotes space around the "page".

BODY {margin-left: 2in}

BODY {margin-top: 45px}

Denotes all three margin commands above in one command.

P {margin: 3in 4cm 12px} (note no commas or semi-colons)

Denotes space between lines of text.

TEXT {line-height: 10px}

Denotes page's background color.

BODY {background-color: #ffffff}

Denotes the background image for pages.

BODY {background-image: http://www.page.com/dog.jpg}

Denotes how the image will tile.

BODY {background-repeat: repeat-y}

Denotes how the image will react to a scroll.

3. The Positioning/Division Definitions:

Denotes the placement of an image or a division of the page.

<IMG STYLE="position:absolute" SRC="joe.jpg">

Denotes amount of space allowed from the left of the browser

<IMG STYLE="position:absolute; LEFT: 20px;" SRC="joe.jpg">

Denotes amount of space allowed from the top of the browser

<IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt"

Denotes width of image or page division.

<IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP:

Denotes height of image or page division.

<IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px;

<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px;

Denotes an item's position in the layering structure. The lower

<IMG STYLE="position:absolute; Z-INDEX: 10; overflow: hidden;

The [attribute] selector is used to select elements with a specified attribute.