CSS_Day_ONE (W3schools)

www.afghanhost.af - info@afghanhost.af
Instructor: Mohammad Rafi Haidari28-May-2014
CSS (Day 1)
 What is CSS
 CSS Syntax
 Selectors
 Ways to Insert CSS
 Backgrounds

CSS Introduction
 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
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 set consists of a selector and a declaration block:
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations
separated by semicolons.
 Each declaration includes a property name and a value,
separated by a colon.

CSS Selectors
 CSS selectors allow you to select and manipulate HTML
element(s).
 CSS selectors are used to "find" (or select) HTML elements
based on their id, classes, types, attributes, values of
attributes and much more.
The element Selector
The element selector selects elements based on the element
name.
You can select all <p> elements on a page like this: (all <p>
elements will be center-aligned, with a red text color)
p
{
text-align:center;

CSS Selectors
The id Selector
The id selector uses the id attribute of an HTML tag to find the
specific element.
An id should be unique within a page, so you should use the id
selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed
by the id of the element.
The style rule below will be applied to the HTML element with
id="para1":
#para1
{
text-align:center;
color:red;
}

CSS Selectors
The class Selector
The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character,
followed by the name of the class:
In the example below, all HTML elements with class="center"
will be center-aligned:
.center
{
text-align:center;
color:red;
}

CSS Selectors
You can also specify that only specific HTML elements should
be affected by a class.
In the example below, all p elements with class="center" will be
center-aligned:
p.center
{
text-align:center;
color:red;
}
Note: Do NOT start a class name with a number!

CSS Selectors
 Grouping Selectors
 In style sheets there are often elements with the same style:
h1
{
text-align:center;
color:red;
}
h2
{
text-align:center;
color:red;
}
p
{
text-align:center;
color:red;
}
To minimize the code, you can group selectors.
To group selectors, separate each selector with a
comma.
In the example below we have grouped the selectors
from the code leftside:
h1,h2,p
{
text-align:center;
color:red;

Ways to Insert CSS
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 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:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Ways to Insert CSS
Note: 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. An example of a style
sheet file is shown below:
hr {color:blue;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
Note:Do not add a space between the property value and the
unit (such as margin-left:20 px). The correct way is: margin-

Ways to Insert CSS
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, by using the <style> tag, like this:
<head>
<style>
hr {color:blue;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>

Ways to Insert CSS
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. The
example shows how to change the color and the left margin of a
paragraph:
<p style="color:blue;margin-left:20px;">This is a
paragraph.</p>

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

CSS Background
Background Color
The background-color property specifies the background color
of an element.
The background color of a page is defined in the body selector:
body {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as
the background of an element.
By default, the image is repeated so it covers the entire
element.
The background image for a page can be set like this:

CSS Background
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both
horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will
look strange, like this:
body
{
background-image:url("gradient.png");
}
If the image is repeated only horizontally (repeat-x), the background will look
better:
body
{
background-image:url("gradient.png");
background-repeat:repeat-x;

CSS Background
Set position and no-repeat
The position of the image is specified by the background-position property:
body
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
background-position:right top;
}
Property Values
• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

CSS_Day_ONE (W3schools)

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to CSS_Day_ONE (W3schools) (20)

More from Rafi Haidari (13)

Recently uploaded (20)

CSS_Day_ONE (W3schools)