Css

What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a
problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

Styles Solved a Big
Problem
• HTML was never intended to contain tags for
formatting a document.
• HTML was intended to define the content of
a document, like:
o <h1>This is a heading</h1>
o <p>This is a paragraph.</p>

• When tags like <font>, and color attributes
were added to the HTML 3.2 specification, it
started a nightmare for web developers.

Styles Solved a Big
Problem
• Development of large web sites, where fonts
and color information were added to every
single page, became a long and expensive
process.
• To solve this problem, the World Wide Web
Consortium (W3C) created CSS.
• In HTML 4.0, all formatting could be removed
from the HTML document, and stored in a
separate CSS file.
• All browsers support CSS today.

CSS Saves a Lot of Work!
• CSS defines HOW HTML elements are to be
displayed.
• Styles are normally saved in external .css
files.
• External style sheets enable you to change
the appearance and layout of all the pages
in a Web site, just by editing one single file!

CSS Syntax
• A CSS rule has two main parts: a selector, and one
or more declarations:

• The selector is normally the HTML element you want
to style.
• Each declaration consists of a property and a
value.

CSS Example
• A CSS declaration always ends with a
semicolon, and declaration groups are
surrounded by curly brackets:

p {color:red;text-align:center;}

CSS Comments
• Comments are used to explain your
code, and may help you when you edit the
source code at a later date. Comments are
ignored by browsers.
• A CSS comment begins with "/*", and ends
with "*/"

The id Selectors
• The id selector is used to specify a style for a
single, unique element.
• The id selector uses the id attribute of the HTML
element, and is defined with a "#".
• The style rule below will be applied to the element
with id="para1":
#para1
{
text-align:center;
color:red;
}

The class Selector
• The class selector is used to specify a style for a
group of elements. Unlike the id selector, the class
selector is most often used on several elements.
• This allows you to set a particular style for many
HTML elements with the same class.
• The class selector uses the HTML class attribute, and
is defined with a "."
• In the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-align:center;}

You MUST not do !
• Do NOT start an ID name with a number! It
will not work in Mozilla/Firefox.
• Do NOT start a class name with a number!
This is only supported in Internet Explorer.

Three Ways to Insert CSS

• There are three ways of inserting a
style sheet:
o External style sheet
o Internal style sheet
o Inline style

External Style Sheet
• An external style sheet is ideal when the
style is applied to many pages.
• With an external style sheet, you can
change the look of an entire Web site by
changing one file.
• Each page must link to the style sheet using
the <link> tag. The <link> tag goes inside the
head section.

Examples
<head>
<link rel="stylesheet“
type="text/css" href="mystyle.css" />
</head>

Rules
• An external style sheet can be written
in any text editor.
• The file should not contain any html
tags.
• Your style sheet should be saved with a
.css extension.

Internal Style Sheet
• An internal style sheet should be used when a single
document has a unique style. You define internal
styles in the head section of an HTML page
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
</style>
</head>

Inline Styles
• An inline style loses many of the advantages
of style sheets by mixing content with
presentation. Use this method sparingly!
• To use inline styles you use the style attribute
in the relevant tag. The style attribute can
contain any CSS property.
<p style="color:sienna;margin-
left:20px">This is a paragraph.</p>

Multiple Style Sheets
• 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.
• What style will be used when there is more
than one style specified for an HTML
element?

Multiple Style Sheets
• 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:
o Browser default
o External style sheet
o Internal style sheet (in the head section)
o Inline style (inside an HTML element)

CSS Background
• CSS background properties are used
to define the background effects of
an element.
• CSS properties used for background effects:
o background-color
o background-image
o background-repeat
o background-attachment
o background-position

Examples
h1 {background-color:#6495ed;}
body {background-image:url('paper.gif');}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
body {background:#ffffff
url('img_tree.png') no-repeat right
top;}
More Examples :
http://www.w3schools.com/css/css_background.asp

CSS Text
Property Description
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-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi
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

CSS Font
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

CSS Links
• Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
• Special for links are that they can be styled
differently depending on what state they are in.
• The four links states are:
o a:link - a normal, unvisited link
o a:visited - a link the user has visited
o a:hover - a link when the user mouses over it
o a:active - a link the moment it is clicked

Examples
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

CSS Lists
• The CSS list properties allow you to:
o Set different list item markers for ordered lists
o Set different list item markers for unordered lists
o Set an image as the list item marker
• Examples :
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

CSS List
Property Description

list-style Sets all the properties for a list in one
declaration

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

CSS Tables
• Table Borders
• Collapse Borders
• Table Width and Height
• Table Text Alignment
• Table Padding
• Table Color

Table Borders
• To specify table borders in CSS, use the border
property.
• The example below specifies a black border for
table, th, and td elements:

table, th, td
{
border: 1px solid black;
}

Collapse Borders
• The border-collapse property sets whether the table
borders are collapsed into a single border or
separated:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Table Width and Height
• Width and height of a table is defined by the width
and height properties.
• The example below sets the width of the table to
100%, and the height of the th elements to 50px:
table
{
width:100%;
}
th
{
height:50px;
}

Table Text Alignment
• The text in a table is aligned with the text-align and
vertical-align properties.
• The text-align property sets the horizontal
alignment, like left, right, or center.
• Examples :
td
{
height:50px;
vertical-align:bottom;
}

Table Padding
• To control the space between the border and
content in a table, use the padding property on td
and th elements:

td
{
padding:15px;
}

Table Color
• The example below specifies the color of the
borders, and the text and background color of th
elements:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Other Styles
• For more CSS Styles, you can visit here :
http://www.w3schools.com/cssref/def
ault.asp

Css

Css

More Related Content

What's hot

Similar to Css

More from Yudha Arif Budiman

Css