Category: Implementation (CSS)

November 21, 2019

Higher – DIV CSS recap lesson

Using the supplied flag sheet create a HTML document to display each flag. Flags should be created using <DIV>, use CSS to style, you can choose to use inline, internal, or external CSS.

Make use of float, background-color, borders, etc. as you see fit. I would say each flag should be about 300px long and 150px high.

Code for an example French flag shown after the break.

November 13, 2019

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

November 12, 2019

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