Css Beginers New

CSS
What
is
Cascading Style Sheets (CSS) is a simple mechanism for adding style

(e.g. fonts, colors, spacing) to Web documents.
Advantages of CSS
• Completely consistent with the look and feel of your pages
• More control over the layout and design
• Pages download faster, sometimes by as much as 50%
• You have to type less code, and your pages are shorter and
neater.
• CSS properties can also be dynamically changed with a
JavaScript.
eg. object.style.cssFloat="left"
• . With a combination of positioning, floating, margins, padding and borders, you should be able
to represent ANY web design and there is nothing that can be done in tables that can not be
done with CSS.
There are three parts to CSS
 The styles
a blue headline
eg: <font color="#0000ff"><h4>a blue headline</h4></font>
a blue headline
 Their placement
 The fact that they can cascade.

• Where HTML has tags, CSS has 'selectors'.
• A Cascading Style Sheets rule is made up of
a selector and a declaration.
H2 {color: blue;}
selector {declaration;}
• The declaration is the part of the rule inside

the curly braces. It specifies what a style
effect will be. For example, "color: blue".
Eg: body {
font-size: 12px;
color: navy;
}
• A declaration has two parts separated by a colon: property and
value.
selector {property:value}
• More than one declaration may be placed inside the curly braces
• A semi-colon must separate each declaration from the next. The
ending declaration does not require a semi-colon
• Eg. selector {property:value; property:value;}

H2 {color:blue; font-family:Arial, sans-serif;}
• If you neglect to place a semi-colon between any two declarations

your style sheet will totally fail.
H1 {font-family:Arial, Helvetica, sans-serif;}

H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;}

Applying CSS
In-line
Internal
External
In-line
HTML should be a presentation free document, and so in-line styles should be

avoided wherever possible.
Internal
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p{
color: red;
}
a{
color: blue;
}
</style>
.......
External
p{
color: red;
}
a{
color: blue;
}
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...
Lengths and Percentages
• There are specific units for values used in CSS, but there are some
general units that are used in a number of properties
Such as-
• em (such as font-size: 2em)
• ex (one ex is the x-height of a font (x-height is usually about half
the font-size)
• px (such as font-size: 12px) pixels
• pt (such as font-size: 12pt) point (1 pt is the same as 1/72 inch)
• pc pica (1 pc is the same as 12 points)
• % (such as font-size: 80%)percentage
• Other units include cm (centimetres), mm (millimetres) and in
(inches).
• When a value is zero, you do not need to state a unit.
Eg:
border : 0
• Different foms:
– Name of Colour
– RGB
– HEX code
• CSS brings 16 million colours to Web

Page.
• There are 17 valid predefined colour

names.
They are - aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white, and
yellow.
red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00
• transparent is also a valid value.
• The three values in the rbg value are from 0 to 255.
• Hexadecimal is a base-16 number system.
hexadecimal has 16 digits, from 0 to f.
• The hex number is prefixed with a hash character (#) and
can be three or six digits in length.
• Basically, the three-digit version is a compressed
version of the six-digit (#f00 becomes #ff0000, #c96
becomes #cc9966 etc.).
Font-family
• The font you specify must be on the user's
computer, so there is little point in using obscure
fonts.
• The most commonly used are arial, verdana and
times new roman), but you can specify more than
one font, separated by commas.
• If the name of the font is more than one word it
should be put in quotation marks (“------“)
Font-size
The size of the font. Be careful with this - text
such as headings should not just be a paragraph
in a large font; you should still use headings (h1,
h2 etc.)
Font-weight
• This states whether the text is bold or not.
• Commonly used are font-weight: bold or font-
weight: normal. In theory it can also be bolder,
lighter, 100, 200, 300, 400, 500, 600, 700, 800 or
900
Font-style
font-style: italic or
font-style: normal.
Text-decoration
This states whether the text is underlined or not.
• text-decoration: overline
• text-decoration: line-through, strike-through,
• text-decoration: underline
( should only be used for links )
This property is usually used to decorate links,
such as specifying no underline with
• text-decoration: none.
text-transform
This will change the case of the text.
• text-transform: capitalize
• text-transform: uppercase
• text-transform: lowercase
• text-transform: none
Text spacing
• letter-spacing and word-spacing
• line-height
• text-align
• text-indent
•
Eg.
p{
letter-spacing: 2px;
word-spacing: 3px;
line-height: 4px;
text-align: center;
}
Margins and Padding
• Margins and Padding are the two most commonly used properties for
spacing-out elements.
• A margin is the space outside of the element, whereas padding is the
space inside the element.
• Eg:
h2 {
font-size: 10px;
background-color: #1F488D;
margin: 10px;
padding: 5px;
}
Padding
• padding can have:
– #sample { padding: 10px; }

– #sample { padding: 10px 5px }
– #sample { padding: 10px 5px 2px }
– #sample { padding: 10px 5px 2px 5px }
– one value, such as 10px, to specify equal padding on every side

– two values, such as 10px 5px, to specify top/bottom (first value) and
right/left (second value) padding
– three values, such as 10px 5px 2px, to specify top (first value), right/left
(second value) and bottom (third value) padding
– four values, such as 10px 5px 2px 1px to specify top, right, bottom and
left padding respectively
• Borders can be applied to most HTML elements within the
body.
• border-style
The values can be solid, dotted, dashed,
double, groove, ridge, inset and outset.
• border-width
border-top-width, border-right-widht,
border-bottom-width and border-left-width
• border-color
Add the following code to the CSS file:

Eg.
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

Css Beginers New

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Css Beginers New

Hochgeladen von

Copyright:

Verfügbare Formate

CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style

eg: <font color="#0000ff"><h4>a blue headline</h4></font>

 The fact that they can cascade.

• The declaration is the part of the rule inside

• Eg. selector {property:value; property:value;}

• If you neglect to place a semi-colon between any two declarations

H1 {font-family:Arial, Helvetica, sans-serif;}

H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;}

HTML should be a presentation free document, and so in-line styles should be

• CSS brings 16 million colours to Web

• There are 17 valid predefined colour

• padding can have:

– #sample { padding: 10px; }

– one value, such as 10px, to specify equal padding on every side

Add the following code to the CSS file:

Das könnte Ihnen auch gefallen