Scribd
Upload
985 views17 pages

2015 - s1 - Op - Week 10 Coding Day 17 Page Layout

Uploaded by

api-263127781
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
985 views17 pages

2015 - s1 - Op - Week 10 Coding Day 17 Page Layout

Uploaded by

api-263127781
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

CODING:

Day 17 CSS Contd


DOUBLE CHECK
1. Create a style sheet in your practice.htm
file.
2. Add a background color, a heading color,
and a text color.
3. Save, refresh, and show the teacher.
What do web pages have in common?

Basic Layout:

Each section
<div> </div>
tags
DIVISION TAGS <div>
Pages contain multiple divisions, so multiple
pairs of div tags in a page
Give each a unique identity add an id= attribute,
followed by the name enclosed in quotation
marks
must start with a letter, no blank spaces
What does this define?
<div id=header>

</div><!- - End header - ->
Pages STILL need
4 mandatory
tags!
OTHER SECTIONS <div>
How would we define the navigation bar?
<div id=nav>

</div><!- - End nav - ->
How would we define the main content?
<div id=main>

</div><!- - End main - ->

Try it:
1. Open a NEW file in Notepad text editor.
2. Type the following code:
Save in
MyWebsite as
layout.html
<!DOCTYPE html>
<html>
<head>
<title>My Layout</title>
</head>

<body>
<!-- Header division -->
<div id="header">

Header content goes here

</div><!-- End header -->

<!-- Navbar division -->
<div id="nav">
Links go here.
</div><!-- End nav -->

<!-- Main content division -->
<div id="main">
Main content goes here.
</div><!-- End main -->
</body>
</html>

STYLING of DIVISIONS
CSS style rules
style rules that apply to different types of html elements
body{} style rule applies to the body element, which is defined by
<body>...</body> tags
h1{} style rule applies to h1 headings (any text between <h1>...</h1>
tags).
with named divs, style rule selectors work differently
don't want to use div as the style rule selector, because that style
rule would apply to all divs on the pagenot to just one
particular page division
when you want a style rule to apply to a specific named element,
you need to use the name, preceded by a # sign, as the selector.
For example, this style rule applies only to the element named header:
#header {
}

EXAMPLE
#header {

}


<div id="header">
Any property:value pairs you put in that style
rule above apply only to text between these
tags in the page.
</div><!-- End header -->

Any CSS written here applies only
to the element whose opening
tag contains id="header"
EXAMPLE 2
#nav {

}


<div id=nav">
Any property:value pairs you put in that style
rule above apply only to text between these
tags in the page.
</div><!-- End nav -->

Any CSS written here applies only
to the element whose opening
tag contains id=nav"
REMINDERS
you can't just stick CSS style rules any place
you want in the page
have to put them in an internal style sheet
internal style sheet goes between the
<head>...</head> tags
internal style sheet needs to be enclosed in
<style type="text/css">...</style> tags, so the
Web browser "knows" there's CSS code there

TRY STYLING DIVISIONS
1. Open layout.html in your editor
1. Tip -- If you can't find your editor, you may need to
rename your file to layout.htm
2. Move the cursor just past the </title> tag near
the top of the page, and press ENTER to start a
new line after that one.
3. Type <style type="text/css"> (which is the
tag to start the internal style sheet), and then
press ENTER a couple of times.
4. Type </style> (the closing tag for the internal
style sheet), just so you don't forget to type it
later.

TRY STYLING DIVISIONS Contd
5. Move the cursor so it's inside the internal
style sheet (between the <style
type="text/css"> and </style> tag).
6. Now, type in the code on the next slide,
pressing ENTER at the end of each line. Pay
attention to spelling and punctuation!

Check it!

You might also like