Category: Web Design and Development

N5 – CSS locations

There are three places that CSS data can be stored for use with HTML files.

Inline

Inline CSS applies to one html element it is added as the value for a style attribute.

<h1 style='color:red;'>Page heading</h1>

Internal

Internal CSS is declared inside <style> which is located in the <head> area of the page. It applies to one page of html.

<head>
<head>
 <style>
   p {background-color:pink;}
 </style>
</head>

 

External

External CSS is stored inside a separate text file (.CSS) it applies to all webpages that link to it (applies to whole site). A link is required in the <head> of the HTML file this link includes the name of the CSS file

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

The CSS file has the selectors and properties stored in the same way as internal

#redBox { background-color:red;
              Color:black;}

N5 – CSS Selectors

CSS is used to change the look of the website but not the HTML content of the website.

At National 5 there are 3 CSS selectors. These are used to identify which parts of the web page are styled by CSS instructions.

  • Element selector – This is used to select all html elements of the given type.

P {color:red;}

P is the element selector

Color is the CSS property

Red is the CSS value

  • Class selector – this is used to target HTML elements of a given class.

.center {text-align:center;}

.center is the name of the class selector

Text-align is the CSS Property

Center is the CSS Value

  • ID Selector – this is used to target a unique HTML element on the page. NB Only one ID with the same name on a page.

#pageHeading {color:white;}

#pageHeading is the ID selector

Color is the CSS property

White is the CSS value

BGE – HTML Lists

There are two main types of list in HTML 5, the unordered list <ul></ul>  and ordered list <ol></ol>. Lists use list items <il></li> to seperate out the items in the list.

<!doctype html>
<html>

 <head>
  <title> Page 1 </title>
 </head>

 <body>
  <h1>Lists in HTML</h1>

  <ul>
   <li>Item</li>
   <li>Item</li>
  </ul>
  
  <ol>
   <li>Item 1</li>
   <li>Item 2</li>
  </ol>
 </body>
</html>

You will notice that <ul> and <ol> are not inside paragraphs <p&gt tags.

BGE – Images on websites

The <img> tag is used to add an image to a webpage. <img> uses attributes to descibe the image and its location.


<img src="egg.jpg" alt="A picture of a chocolate egg">
  • src – The value of this attribute is the full name of the image file, in this case egg.gif which is in the same directory as the html file.
  • alt – The value of this attribute is a description of the image. This is used in case the image fails to download or it can be read aloud by screen readers.

BGE – HTML Links

The anchor tag <a></a> in html 5 is used to create a hyperlink between two documents. The <a></a> surrounds text or an image that then is used to activate the link stored in the href attribute.


<!doctype html>
<html>
<head>
<title> Page 1 </title>
</head>
<body>
<h1>Page 1</h1>
<p>
This is a <a href="page2.html">link</a> to page 2
</p>
</body>
</html>

In the example above the word link is linked to page2.html.