Webpage Design: HTML & style sheets

From Wikibooks, open books for an open world
Jump to: navigation, search

UNIT 2 - ⇑ Webpage Design ⇑

← Web page construction HTML & style sheets Webpage design →

Style sheet - a collection of rules about how to present an HTML document


In HTML it is possible to add colours, fonts and other styles to the web pages that you build, however this is not recommended and HTML should be used for structure only. To add colours, fonts, etc. we will use Cascading Style Sheets, also known as CSS.

Style rule[edit]

A style sheet is made up of Style Rules. Each Style Rule has three parts, a selector, a property and a value:

selector {property : value}

For multiple properties you separate them using a semicolon;

selector {property1 : value1; property2 : value2}

Selectors[edit]

selectors - "select" the elements on an HTML page that are affected by the style rule(s)


selector {property : value} You need to know three types of selector:

  • type, selects all elements of a certain type on the page e.g. h1 { color : green} selects all the heading 1s and turns them green
  • class, selects all elements of the class you have specified and applies the style to only those elements .classname { color : red}
  • ID, selects the item with the single ID that you have specified #idname { color : blue }. You can only apply an ID once in an HTML document
CSS Property Description CSS Values Example for Heading 1 Output
font-style: Changes the font style of text elements normal, italic, oblique h1 { font-style : italic } Hello
font-weight: Define how bold text is bold, normal, 400 h1 { font-weight : bold } Hello
background-color: Define page or item background colour green, brown, yellow h1 { background-color : yellow } Hello
text-align: horizontal position of text center, left, right h1 { text-align : center }
Hello
font-family: define the font of page text "Times New Roman", Arial, Helvetica h1 { font-family : "Times New Roman" } Hello
font-size: define the size of page text 100%, 250%, 50% h1 { font-size : 250% } Hello
color: changes the foreground colour of an element green, brown, orange h1 { color : green } Hello
(EXTENSION) text-decoration: Allows for underlining, strikethrough etc. overline, underline, line-through h1 { text-decoration : underline } Hello
Exercise: CSS rules

Write CSS rules to do the following:
Turn all heading 3s blue:

Answer :

h3 { color : blue}

Turn all paragraphs red and itallic:

Answer :

p { color : red; font-style : italic}

Turn all class=bbold: bold and blue

Answer :

.bbold { color : blue; font-weight: bold}

Turn all class=uit: underlined and italic

Answer :

.uit { text-decoration : underline; font-style : italic }

Name the three components of a CSS style rule:

Answer :

selector {property: value}

Name the three different types of selector and describe each:

Answer :

  • type, selects all elements of a certain type on the page e.g. h1 { color : red}
  • class, selects all elements of the class you have specified and applies the style to only those elements .classname { color : white}
  • ID, selects the item with the single ID that you have specified #idname { color : blue}

Describe the difference between HTML and CSS:

Answer :

  • HTML - Used for page structure
  • CSS - a collection of rules about how to present an HTML document

Type[edit]

Type rules - select all elements of a certain type on the page and apply styles to them


 h1 { color : green }

Take the HTML behind a simple website:

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
 
 
<p>This is my amazing website, look how great it is!</p>
 
 
 
 
<p>I doubt you could find a better one anywhere on the web.</p>
 
 
 
 
<p>Seriously!</p>
 
 
  </body>
</html>

As we probably know, this would build the following page:

  Blank.svg My Website
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Welcome

This is my amazing website, look how great it is!

I doubt you could find a better one anywhere on the web.

Seriously!

You might think my claims are a little over the top, but we could try to make the site better by adding some colour to the title using the following CSS rules:

h1 { color : green }
p { color : red; font-style : italic }

We can't just place this directly into the page, we have to create a new section inside the <head> </head> tags, this is called embedding CSS, we'll look at another method, External Style Sheets later:

<html>
  <head>
    <title>My Website</title>
    <style TYPE="text/css">
    <!--
    h1 { color : green }
    p { color : red; font-style : italic }
    -->
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
 
 
<p> This is my amazing website, look how great it is!</p>
 
 
 
 
<p>I doubt you could find a better one anywhere on the web.</p>
 
 
 
 
<p>Seriously!</p>
 
 
  </body>
</html>

What this will do is change the heading to green, and change each paragraph to red and italic:

  Blank.svg My Website
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Welcome

This is my amazing website, look how great it is!

I doubt you could find a better one anywhere on the web.

Seriously!


Exercise: CSS Type Selectors

For the HTML code below, show what the output would be for each set of CSS rules:

<html>
  <head>
    <title>My Website2</title>
  </head>
  <body>
    <h1>Contact Details</h1>
    <p>Please use the details below to get in contact</p>
      <h2>Telephone</h2>
      <p>Home: 0101010101010<br />
         Mobile: 1010101010101<br />
      </p>
      <h2>Email</h2>
      <p>1010101@10100101.com</p>
  </body>
</html>

What would these two rules produce?

h2 { color : red }
h1 { color : blue; text-decoration : underline }

Answer :

  Blank.svg My Website2
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Please use the details below to get in contact
Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com


What would these two rules produce?

p { font-weight : bold }
h1 { font-style : italic }

Answer :

  Blank.svg My Website2
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Please use the details below to get in contact
Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com


Write rules to produce the following output:

  Blank.svg My Website2
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com

Answer :

h1 { color : red; }
h2 { text-decoration : underline}

Write rules to produce the following output:

  Blank.svg My Website2
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com

Answer :

h1 { background-color : yellow; }
h2 { text-decoration : underline }
p { background-color : red}

Class[edit]

Class rules - select all elements of the class you have specified and applies the style to only those elements


.classname {property1 : value1; property2 : value2}

Take another look at the HTML behind a simple website:

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1 class="textb">Welcome</h1>
    <p class="textb">This is my amazing website, look how great it is!
 
 
    <p class="texts">I doubt you could find a better one anywhere on the web.
 
 
    <p class="textb">Seriously!
 
 
  </body>
</html>

As you can see there are classes attached to some of the HTML tags, namely the 'textb' and 'texts' classes. On their own they don't do anything, we need to write some CSS style rules to make them come to life, remember that a class selector starts with a (.).

.textb { color : red; text-decoration : underline }
.texts { font-style : italic }
  Blank.svg My website2
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Welcome

This is my amazing website, look how great it is!

I doubt you could find a better one anywhere on the web.

Seriously!


Exercise: CSS Class Selectors

For the HTML code below, show what the output would be for each set of the CSS rules:

<html>
  <head>
    <title>My Website3</title>
  </head>
  <body>
    <h1 class="txtt">Contact Details</h1>
    <p>Please use the details below to get in contact</p>
    <h2 class="txtg">Telephone</h2>
      <p class="txtt">Home: 0101010101010<br />
         Mobile: 1010101010101<br />
      </p>
      <h2>Email</h2>
      <p class="txtg">1010101@10100101.com</p>
  </body>
</html>

What would these two rules produce?

.txtg { color : blue }

Answer :

note that class="txtt" does nothing as the CSS doesn't define it.

  Blank.svg My Website3
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com

.txtg { color : red }
.txtt { text-decoration : underline; color : green }

Answer :

  Blank.svg My Website3
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com


ID[edit]

ID rules - select the item with the single ID that you have specified. You can only apply an ID once in an HTML document.


#idname { color : blue }

Take yet another look at the HTML behind a simple website:

<html>
  <head>
    <title>A Website</title>
  </head>
  <body>
    <h1 class="textb">Welcome</h1>
    <p id="para1">This is my amazing website, look how great it is!
 
 
    <p id="para2">I doubt you could find a better one anywhere on the web.
 
 
    <p id="para3">Seriously!
 
 
  </body>
</html>

As you can see, I have assigned an id to each of the paragraphs, this means that I can now style them separately from each other. Remember that an ID selector starts with a #.

#para1 { color : red }
#para2 { color : white }
#para3 { color : blue }
  Blank.svg A Website
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Welcome

This is my amazing website, look how great it is!

I doubt you could find a better one anywhere on the web.

Seriously!

Each id rule applies to a different paragraph, unfortunately I set #para2 to white, so you can't see it!

Exercise: CSS ID Selectors

For the HTML code below, show what the output would be for each set of the CSS rules:

<html>
  <head>
    <title>My Website3</title>
  </head>
  <body>
    <h1 id="main">Contact Details</h1>
    <p>Please use the details below to get in contact</p>
    <h2>Telephone</h2>
      <p>Home: 0101010101010<br />
         Mobile: 1010101010101<br />
      </p>
      <h2>Email</h2>
      <p id="txthighlight">1010101@10100101.com</p>
  </body>
</html>

What would these two rules produce?

#main{ color : green }
#txthighlight{ background-color : yellow }

Answer :

  Blank.svg My Website3
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com


Write the CSS to produce the following:

  Blank.svg My Website3
Down arrow Hexagonal Icon.svg
Left arrow Hexagonal Icon.svg Right arrow Hexagonal Icon.svg Address   Rosette Hexagonal Icon.svg Book Hexagonal Icon.svg Paper Hexagonal Icon.svg

Contact Details

Telephone

Home: 0101010101010
Mobile: 1010101010101

Email

1010101@10100101.com

Answer :

#main{ font-style : italic }
#txthighlight{ text-align : center }

Style sheets (Cascading Style Sheets or CSS)[edit]

You should be pretty comfortable with the use of CSS rules, we are now going to look how these rules are linked with the HTML. As we know the style (CSS) of a web page’s contents should to be separated from its structure (HTML), and when these two things come together, it creates the page that you see in your web browser. There are two methods of linking style to structure that you need to know:

  • Embedded style, blocks of CSS information inside the HTML document
  • External style sheets, i.e., a separate CSS file referenced from the HTML document

Embedded style[edit]

Blocks of CSS information inside the HTML document. You can see that inside the head tag we have a block of CSS that applies to the HTML below it:

<html>
  <head>
    <title>My Website</title>
    <style type="text/css">
    <!--
    h1 { font-weight : 900 }
    .highlight {color : yellow }
    -->
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
 
 
This is my amazing website, look how great it is!
 
 
 
 
I doubt you could find a better one anywhere on the web.
 
 
 
 
Seriously!
 
 
  </body>
</html>

External style sheets[edit]

External style sheets use a separate file to store the style information (a .css file) and link the file from inside the HTML document.


home.html

<html>
  <head>
    <title>My Website</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Welcome</h1>
 
 
This is my amazing website, look how great it is!
 
 
 
 
I doubt you could find a better one anywhere on the web.
 
 
 
 
Seriously!
 
 
  </body>
</html>

style.css

h1 { font-weight : 900 }
.highlight {color : yellow }

As you can see above the HTML file links to the CSS file through the line:

<link href="style.css" rel="stylesheet" type="text/css">

. You could get an HTML page to link to multiple CSS files and link a CSS file from multiple HTML files.

CPT-Web-CSS-external.svg

External style sheets are a better way of linking CSS to HTML than embedding CSS in HTML as you can:

plus pointLink one CSS file to many HTML files to reuse the same style without needing to retype it
plus pointWhen changing the style of a website you only need to change the style information in one location and it'll filter through to all pages


Exercise: Types of style sheet

Name the two different style sheets:

Answer :

  • external
  • embedded
  • (there is also inline but it's not pretty to use and not in the syllabus)

Why might you prefer to use external style sheets on a large web site?

Answer :

You can link the same style sheet from multiple pages and changes to the site style would only require changes to that one style sheet

Extension:CSS3
Html5 css3 styling.svg

There is an awful lot more to learn about CSS and a new version is currently being released alongside HTML5. Don't get left behind, learn all about CSS2 and CSS3 at w3schools.