Category: Implementation (CSS)

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