21
CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 – MYP1
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
1
3
4
7
2
5 6
#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:
<head><link rel="stylesheet" type="text/css" href="style.css“/></head>
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 …
body{
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
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
#MAIN
main
#FOOTER
