Creating a Website Using CSS - Mesa Public Schools...CREATING A WEBSITE USING CSS Mrs. Procopio...

transcript

CREATING A WEBSITE USING CSS

Mrs. Procopio

CTEC6 – MYP1

HTML VS. CSS

HTML – Hypertext Markup Language

CSS – Cascading Style Sheet

HTML VS. CSS

HTML is used to define the structure and content of a webpage.

CSS is used to give style to the structure to make it colorful, appealing and visually interesting.

WHAT IS CSS?

CSS stands for Cascading Style Sheet.

Styles define how to display HTML elements.

Styles were added to HTML 4.0 to solve a problem.Style Sheets can save a lot of repetitive work.

Style Sheets are stored in CSS files (style.css).

In HTML 4.0, all formatting was removed from the HTML document, and stored in a separate CSS file.

http://www.w3schools.com/css/css_intro.asp

HTML VS. CSS

Page Created with Plain HTML Same Page Enhanced with CSS

COMPONENTS OF WEBPAGE

In your IB Design Notebook, sketch and label the following diagram.

Draw the largest section called #Container. Next, divide #Container into smaller sections.

These sections are called DIVs. #Container #Header #Navbar #Content #Nav #Main #Footer

Note: We will create the Navbar in the next tutorial.

Button Button Button Button Button Button Button

#Container

#Header

#Navbar

#Content

#Nav #Main

#Footer

CREATE HTML CODE

Open a text editor (Notepad, Notepad++ or TextEdit).

Type the following code.

Check your work for typos and misspelled words.

Save as either index.htm or index.html (your choice).

This is your website’s home page. When this page becomes a KNOWN GOOD, you will copy/paste it to create six more pages (total of seven).

NOTE: Add a Game.html page BEFORE References.html

CREATE CSS CODE

Use a text editor (Notepad, Notepad++ or TextEdit)

Type the CSS code in the following slides.

The file should not contain any html tags.

Check your work for typos and misspelled words.

Save as style.css.

This file will become your website’s style sheet.

CHOOSING THE TYPE OF 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 just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section:

CREATE CSS

First, type the elements that you will use to format your webpages.

Be sure to add a space between each element and curly bracket, as if you were typing a sentence.

For instance:

body {

Not …

ELEMENTS

The element selector selects elements based on the element name.

You can select all <a> elements on a page like this: (all <a> elements will have no underlines and will be a red text color).

EXPLAINING ID SELECTORS

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 in the example below will be applied to the HTML element with id=“paragraph":

#paragraph {text-align: center;color: red;

#CONTAINER

Each declaration contains a property and a value:

Example: background-color: white;

Example: width: 800px;

Property: value

#HEADER

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.

#CONTENT

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 starts with /* and ends with */. Comments can also span multiple lines.

#NAV AND #NAV UL

#FOOTER

Creating a Website Using CSS - Mesa Public Schools...CREATING A WEBSITE USING CSS Mrs. Procopio...

Documents