website

week_10_csspageDesign.pptx

Home >Computer Science homework help >website

Generic html containers

<div>

<span>

Before you add any CSS to a site you firstly need to structure your html so that you can then control the structure with css.

HTML structural markup includes <div>’s and <span>’s for this purpose.

<div> is a blocklevel element which can be used to define sections of a web page

<span>‘is an inline elmement which can be used to define sections of a line

Generic containers

<div>……..</div> (divide)

identifies one or more blocks of text for the purpose of special formatting or identification

block level element

identifies an arbitrary area of text for purposes of special formatting limited to inline changes

inline element

Semantically neutral elements

They confer no meaning to their content

These are html container elements.

They are used purely for formatting or display. Called generic elements.

You can place these anywhere in your <body> element on an html page.

As long as your page still validates, they won’t affect the accessibility of your code.

DIV is used to structure your page elements. (ie break your page into sections that can be formatted or moved around the page)

SPAN is used to style small areas of your page, without changing the positioning of any elements on the page.

Used for styling inline text

Doesn’t create any visual change to layout of page

Changes only what’s held within it’s tags

Bob said “WOW”

<p>

Bob said <span> “WOW” </span> after he saw that!

</p>

span {color: red; font-weight: bold; }

Html code

CSS code

<span> </span> is an inline element and therefore can only wrap inside a block level element. You would only use span for small areas of text etc.

<div> creating page divisions

Generally used for the grouping of block level elements for either formatting or positioning.

It is a block level element and can wrap other block level elements

</div>

<div id="secondaryContent">…

</div>

<div id="subNav">…

</div>

</div>

<div> works with class and id attributes

<div> is useful for marking off large sections of a page for the purposes of identification using the “id” attribute

id assigns a target name to an HTML element.

An id target can also appear in a style sheet and have unique formats associated with it

A unique “id” attribute is limited to 1 per page.

The difference between id and class

An id attribute must be unique to a webpage.

You could style your main navigation <div id=“mainnav”> and repeat this on all your site’s pages.

A class attribute is for when you wish to use the same style in multiple places on a single page –

You have a class of the same styles.

Eg <div=“paragraphheadings”>

Header

Short navigation

Centre content block

Footer

Page Divisions

Right content block

Here’s an example of how a page could be broken into divisions.

selectors

You’ve already met the CSS element selectors [html element] { declaration; }

h1 {font-size: 130%;}

There are two more that are very useful and commonly used

id selector

class selector

In your html file - both the id and class are attributes of html elements.

In your CSS file – html elements, id and class can all be selectors.

Html code for id selector

CSS code for id selector

#navlist { color: #333; }

When to use:

Unique styling of this element on this page

But you can replicate it across multiple pages (often used for main navigation and main page divisions)

Notice the #

This octothorpe (or hash or square) symbol must go before the id in the CSS file – no spaces between them!

id and class attributes

An attribute is the unique name given to the html element

Like all attributes they can hold values

Attribute/value

In the html code, id and class are called attributes.

In the CSS file, they are called selectors.

You’ve met other attributes before in html –

<img> has the src, width, height, alt and title attributes

<body>

<h1>BubbleUnder.com</h1>

</div>

<p>Diving club for the Top End - let's make a splash!</p>

</div>

</div>

<ul>

<li>About Us</li>

<li>Contact Us</li>

</ul>

id attributes – no two can be named the same on any given web page

id name should describe the purpose of the section

attributes should be

written in lowercase

their value should be contained in quotation marks

value must be only one word

The id selector.

Combine the <div> element and id and class selectors

Use the power of these combined to uniquely style groups of elements on a page

Enables you to divide your page into sections

Add a <div> to your navigation

<body>

<h1>BubbleUnder.com</h1>

</div>

<p>Diving club for the Top End - let's make a splash!</p>

</div>

</div>

<ul>

<li>About Us</li>

<li>Contact Us</li>

</ul>

</div>

navigation

Good idea to show where the div ends – it can get confusing if you have a number of them on one page.

This is how you comment in an html file -

< ! - - comment text - - > [less than sign, exclamation mark, dash, dash, comment text, dash, dash, greater than sign]

This is how you comment in a CSS file –

/* comment text */

[forward slash, asterisk, comment text, asterisk, forward slash]

Note:

To properly layout a page using CSS you must include all elements that are inside the body element within divs

Notice that all the elements are within div elements.

The divs are containers that can be moved around a page so if you leave out some elements and start positioning the divs you’ll find that the omitted elements cause unexpected display.

Inheritance

html

head

body

title

Setting values in the outer elements will cause inner elements to inherit the values eg font-size

If you have set the <body> element’s font-size to be 95%,

then you set all text in <p> paragraphs to be 85%,

it will be 85% of 95%.