What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work, because it can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>

CSS was created to separate the design of a document from its content.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

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

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

1. External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

  



  
This is a heading
  
This is a paragraph.

2. Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

  



  
This is a heading
  
This is a paragraph.

3. Inline CSS

An inline style is used to apply a unique style to a single element.

  
This is a heading
  
This is a paragraph.

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their name, id, class, attribute, and other properties.

Element Selector

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

ID Selector

#para1 {
  text-align: center;
  color: red;
}

Class Selector

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

CSS Backgrounds

CSS background properties are used to define the background effects for elements.

Background Color

body {
  background-color: lightblue;
}

Background Image

body {
  background-image: url("paper.gif");
}

Background Shorthand

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Borders

CSS border properties allow you to specify the style, width, and color of an element's border.

Border Style

p {
  border-style: solid;
}

Border Width

p {
  border-width: 5px;
}

Border Color

p {
  border-color: red;
}

Border Shorthand

p {
  border: 5px solid red;
}

CSS Margins

CSS margin properties are used to create space around elements, outside of any defined borders.

Margin Shorthand

p {
  margin: 25px 50px 75px 100px;
  /* top right bottom left */
}

Auto Margin

.center {
  margin: auto;
  width: 50%;
}

CSS Padding

CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Padding Shorthand

p {
  padding: 25px 50px 75px 100px;
  /* top right bottom left */
}

CSS Text Formatting

CSS has several properties for formatting text.

Text Color

body {
  color: blue;
}
h1 {
  color: green;
}

Text Alignment

h1 {
  text-align: center;
}
p {
  text-align: left;
}

Text Decoration

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

CSS Fonts

The CSS font properties define the font family, boldness, size, and style of a text.

Font Family

p {
  font-family: "Times New Roman", Times, serif;
}

Font Size

p {
  font-size: 16px;
}

Font Style

p {
  font-style: italic;
}

CSS Display

The CSS display property is an important property that controls how elements are displayed on the web page.

Block Elements

div {
  display: block;
}

Inline Elements

span {
  display: inline;
}

Inline-Block Elements

span {
  display: inline-block;
  width: 100px;
}

CSS Position

The CSS position property specifies the type of positioning method used for an element.

Static Position

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Relative Position

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Absolute Position

div.absolute {
  position: absolute;
  top: 80px;
  right: 30px;
  border: 3px solid #73AD21;
}