CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1

Size: px

Start display at page:

Download "CREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1"

Beatrice Ball
5 years ago
Views:

1 CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1

2 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet

3 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.

4 WHAT IS CSS? 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 In HTML 4.0, all formatting was removed from the HTML document, and stored in a separate CSS file.

5 HTML VS. CSS Page Created with Plain HTML Same Page Enhanced with CSS

6 COMPONENTS OF WEBPAGE In your IB Design Notebook, sketch and label the following diagram. Draw the largest section called #Container. Next, divided #Container into smaller sections. These sections are called DIVs. #Container #Header #Nav #Content #Nav #Main #Footer #Container #Header #Buttons #Content Button Button Button Button Button Button #Nav #Main #Footer

7 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 index.htm This is your website s home page.

11 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.

12 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="mystyle.css"> </head>

13 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: Not body { body{

14 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).

15 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; }

16 #CONTAINER Each declaration contains a property and a value: Example: background-color: white; Example: width: 800px; Property: value Property: value

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

18 #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.

19 #NAV AND #NAV UL

20 #MAIN

21 #FOOTER

Assignments (4) Assessment as per Schedule (2)

Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like