MisterOriginal's CSS Tutorial

Cascading Style Sheets (CSS) Tutorial

Introduction

Types of Cascading Style Sheets (CSS)
* Inline
* External
* Embedded

Cascading Style Sheets (CSS) Attributes
* Class
* Id

Basic Cascading Style Sheets (CSS) with Examples
* Background
* Border
* Font
* Text
* List
* Margin
* Padding

Introduction

Syntax: selector {property: value}

Example: body {color: black}

There are 3 ways of writing CSS, choose whichever method you like the best.

Example 1: All properties in one line.

p {font-family: "sans serif"}

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

Example 2: Each property on a separate line.

p
{
text-align: center;
color: black;
font-family: arial
}

Example 3: You can group stylesheets together:

h1,h2,h3,h4,h5,h6
{
color: green
}

Types of Cascading Style Sheets (CSS)

Inline Stylesheets: Define a particular HTML tag in a page.

Example:
<p style="font-family: arial; font-size: 12px; color: #ff0000">This is a paragraph</p>

External Stylesheets: Define stylesheets in a separate .css file, and apply them to multiple pages in a website. The stylesheets are linked within the <head> tag.

Example:
<head>
<link rel="stylesheet" href="your_file.css" type="text/css">
</head>

Embedded Stylesheets: Stylesheets are embedded within the <head> tags, and are used to define styles for a particular page.

Example:
<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>

<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
</body>

</html>

Cascading Style Sheets (CSS) Attributes

Class: Define different styles for the same type of HTML element.

Example: Font is Arial
<style type="text/css">
.text {font-family: arial}
</style>

<h1 class="text">
This is a heading
</h1>

<p class="text">
This is a paragraph
</p>

Example:
<style type="text/css">
p.right {text-align: right}
p.center {text-align: center}
</style>

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

Id: Define the same style for different HTML elements (can be used once in a document).

Example:
<style type="text/css">
#green {color: green}
</style>

<h1 id="green">Text is green</h1>
<p id="green">Text is green</p>

Example:
<style type="text/css">
p#green {color: green}
</style>

<h1 id="green">Text is green</h1>

Basic Cascading Style Sheets (CSS) with Examples

Background: A shorthand property for setting all background properties in one declaration

background-color: Sets the background color of an element
<style type="text/css">
body
{
background-color: #00ff00
}
</style>

background-image: Sets an image as the background
<style type="text/css">
body
{
background-image: url('picture.jpg')
}
</style>

Border: A shorthand property for setting all of the properties for the four borders in one declaration

Example: 1px=Size, solid=Style, #ff0000=Color.
p
{
border: 1px solid #ff0000;
}

border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration
border-left A shorthand property for setting all of the properties for the left border in one declaration
border-right A shorthand property for setting all of the properties for the right border in one declaration
border-top A shorthand property for setting all of the properties for the top border in one declaration

p
{
border-bottom: 1px solid #ff0000;
border-left: 2px solid #000000;
border-right: 2px solid #ffffffff;
border-top: 1px solid #0000ff;
}

border styles
solid
dotted
dashed
double
groove
ridge
inset
outset
solid double
double solid
groove double
solid double groove

A few more border properties:
border-color: Sets the color of the four borders, can have from one to four colors (color codes or color names)
border-right-color Sets the color of the right border
border-top-color Sets the color of the top border
border-left-color Sets the color of the left border
border-bottom-color Sets the color of the bottom border
border-style Sets the style of the four borders, can have from one to four styles
border-right-style Sets the style of the right border
border-top-style Sets the style of the top border
border-left-style Sets the style of the left border
border-bottom-style Sets the style of the bottom border
border-width: A shorthand property for setting the width of the four borders in one declaration, can have from one to four numerical values, or thin, medium, thick.
border-right-width Sets the width of the right border
border-top-width Sets the width of the top border
border-left-width Sets the width of the left border
border-bottom-width Sets the width of the bottom border

Font: A shorthand property for setting all of the properties for a font in one declaration

Example: Sets the paragraph font to italic, small caps, bold 12px, Arial.
p {font: italic small-caps bold 12px arial}

font-family: A prioritized list of font family names and/or generic family names for an element

h3 {font-family: Arial}

font-size: Sets the size of a font

h1 {font-size: 12px}

font-style Sets the style of the font

h1 {font-style: italic}
h2 {font-style: normal}

font-variant: Displays text in a small-caps font or a normal font

p.normal {font-variant: normal}
p.small {font-variant: small-caps}

font-weight Sets the weight of a font normal

p.normal {font-weight: normal}
p.thick {font-weight: bold}

Text

color Sets the color of a text

h1 {color: #00ff00}
h2 {background-color: yellow}

letter-spacing: Increase or decrease the space between characters

h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}

text-align: Aligns the text in an element

h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

text-decoration: Adds decoration to text

h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}

text-indent: Indents the first line of text in an element

p {text-indent: 1px}

text-transform: Controls the letters in an element

p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}

line-height Sets the distance between lines

p.small {line-height: 0.4cm}
p.big {line-height: 0.9cm}

List (list-style): A shorthand property for setting all of the properties for a list in one declaration

ul {list-style-type:square; list-style-image:url('arrow.gif')}

list-style-image: Sets an image as the list-item marker

ul {list-style-image: url('arrow.gif')}

list-style-type: Sets the type of the list-item marker

ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}

ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}

Margin: A shorthand property for setting the margin properties in one declaration

p.margin {margin: 2cm 4cm 3cm 4cm}
p.margin {margin: 2cm}

margin-bottom: Sets the bottom margin of an element

p.bottommargin {margin-bottom: 2cm}

margin-left: Sets the left margin of an element

p.leftmargin {margin-left: 2cm}

margin-right: Sets the right margin of an element

p.rightmargin {margin-right: 8cm}

margin-top: Sets the top margin of an element

p.topmargin {margin-top: 5cm}

Padding: A shorthand property for setting all of the padding properties in one declaration

td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm 3cm 2cm}

padding-bottom: Sets the bottom padding of an element

td {padding-bottom: 2cm}

padding-left: Sets the left padding of an element

td {padding-left: 2cm}

padding-right: Sets the right padding of an element

td {padding-right: 5cm}

padding-top: Sets the top padding of an element

td {padding-top: 2cm}

Reference: www.w3schools.com