Client Side Customisation of Web Pages – Assignment 1
Implementation of CSS [P1] [M1]
Cascading Style Sheets, commonly referred to as CSS or just stylesheets, offer a reliable and expansive way to customise the appearance and layout of HTML documents. There are several ways of loading CSS on a web page, and the three most commonly used standards are detailed below.
link Meta Tag
The link tag in HTML is used to load a number of different resources into a web document. For example, favicon images and license information can both be specified using the tag, and it is the most effective method. A typical stylesheet link tag is shown below.
<link rel="stylsheet" href="assets/css/main.css">
The rel attribute in the tag makes the browser or parser of the document aware that the resource pointed to in the href attribute is a stylesheet. Before CSS was the standard styling language and developers anticipated others emerging, an addition type="text/css" attribute would often be included. This would ensure that the browser was also aware of the language which the stylesheet was written in.
The href attribute includes a reference to a resource that the browser is able to load. This can be formatted in a number of different ways, each offering a different level of relativity to the current page address.
The name of a file, such as
main.css, will cause the browser to request the file from the current directory. Ifhttp://example.com/foo/bar/index.htmlrequestsassets/main.cssin alinkhrefattribute, the browser will attempt to loadhttp://example.com/foo/bar/assets/main.css. This is used very often and is one of the easiest methods, and the most relative.A forward slash can be placed before the file name, which will cause the browser to request the file relative to the root of the website. If the previous page example were to require
/assets/main.css, the browser would requesthttps://example.com/assets/main.css, ignoring thefooandbarsub directories.If files are available on another domain, this can be specified as well. If the example page were to require
//anoth.er/main.css, the browser would attempt to load the file from theanoth.erdomain, using the same protocol that the main page was loaded with. That said, however, the same-origin policy prevents HTTPS-loaded web-pages from requesting resources either from another domain or any HTTP address.Lastly, the protocol, or scheme, used to load the resource can be specified before the forward slashes, as in this address:
https://example.com/jquery.min.js. This is the most absolute method of specifying the location of a page resource, and is most commonly used to improve rankings in search engines. Although more difficult to maintain, server-side scripting can remove most of the hassle.
The link tag should be found inside an HTML document's head tag, meaning that the browser will load the stylesheet before rendering any elements. If the link tag is within the body element, the stylesheet will be loaded later, and the page may suddenly change when loading and potentially confuse or irritate users.
style Meta Tag
Another method of CSS implementation is the style tag. This is also found within the head of an HTML document, but is filled with CSS selectors and properties rather than a URI. An example of a style tag used within an HTML document is shown below.
<!DOCTYPE html>
<html>
<head>
<title>Web page</title>
<style>
body {
margin:0;
font-family:helvetica neue,sans-serif;
}
</style>
...
</head>
<body>
...
</body>
</html>
The style tag is useful when creating single-page websites that require a minimal amount of CSS. The CSS content is kept in the same file as the markup, which means that all data will be transferred within a single HTTP request. The style tag is preferable to extensive use of the style attribute, as all of a page's CSS is kept in one area. CSS selection syntax is also used, which is more concise and easier to read. Simply put, a stylesheet implemented with a style tag is the same as a stylesheet implemented with a link tag, save for the fact that the content is kept within a single file.
The type attribute is sometimes seen on a page's style tag, but this is unnecessary. When CSS was still in the early drafts stage, the W3C and contributors to the standard partly expected other styling languages to emerge, but no prominent attempts did. The attribute is still supported in HTML5, but the user agent will assume a value of text/css if none is supplied. The value held by the attribute is the MIME type of the tag's content.
style Element Attribute
The third method of CSS implementation is the style attribute. Every element tag in HTML supports the attribute, and it allows for small amounts of CSS to be applied to a single element quickly. An example of the style attribute's use is given below.
<p>Lorem ipsum <span style="color:#69af98;text-decoration:underline">dolor</span> sit amet.</p>
Using a span tag to wrap the word "dolor", the style attribute is used to make a word a shade of green/turquoise and underlined. When interpreted by a browser, the above HTML/CSS would render as below.
Lorem ipsum dolor sit amet.
Although the style attribute can be easy to use, it is difficult to maintain and is inefficient. The CSS is mixed into the markup throughout the document, making the location of specific rules for modification difficult. The fact that the CSS is kept within an attribute's content also means that the rules are harder to organise and easily read, being strung together on a single line. The drawbacks of the style attribute may make it seem redundant, but the JavaScript makes heavy use of it when altering styles dynamically. The properties found within an element's style attribute will also have precedence over those found in external stylesheets or style tags, unless others use the !important modifier, which gives the attribute further purpose.
An Example of Use
CSS is used heavily in the creation of this assignment page.
A link tag is used to include a stylesheet available from another directory on the webserver. The user agent loads this separately and then applies its contents to the page.
Using the developer tools in modern browsers, one can inspect the HTML, CSS and JavaScript used on a web page. Here CSS is altered in the Firefox developer tools, which has an immediate effect on the web page.
The CSS is used to specify colouring, typography, layout, decoration and responsive effects.
The CSS Box Model [P2]
The CSS
Box Model
Overview
- The box model describes how elements of different types are aligned within an HTML document, and how they react to CSS properties.
- The model consists of several layers; content, padding, border and margin.
- The box model includes a number of different element types, including blocks, inline-blocks, inlines, flexes and table-cells.
- A browser is able to automatically style an un-styled HTML document fairly accurately with help from the box model; particular HTML elements have default box model types.
Blocks
- A default width of 100% is used for block-level elements, with a height of 0 until content is added within.
- Block-level elements include
<div>s,<article>s,<nav>s and<footer>s. - Blocks are able to assume margins, borders and padding on all four of their sides.
- In a typical, simple HTML document, blocks are found on their own line.
Inlines
- Elements which fall within large blocks of text are generally "inline".
- Inline elements include
<span>s and anchors (<a>). - Inlines only accept margins on certain sides, and do not accept some other CSS properties.
- Unlike block-level elements, inlines do not prevent other elements from occupying the same vertical space as them.
Other Box-Model Types
- There are a number of other types automatically applied to certain elements; e.g., "table-row" for
<tr>s. - The type assigned to any given element can be changed to create particularly complex web-app layouts.
- Each type behaves in a particular way, and can be targeted by the browser to apply user-agent styles.
Content
- This is the main container of child text and element nodes.
- CSS
widthandheightproperties specify the width and height of this area, unless theborder-boxproperty is changed. - This layer indirectly governs the width and height of the outer layers.
Padding
- Found within elements, padding creates space between an element's content and its border.
- Padding is set with CSS using the
paddingproperty, which accepts up to four values; for top, right, bottom and left sides. - Padding can be specified in pixels, ems, points, viewport-widths and a handful of other CSS units.
- Whitespace can be created inside of an element's border with padding.
Border
- Found between the padding and margin, the border layer is perhaps most self-explanatory.
- A border can assume a width (or thickness), style and colour.
- A border will increase an elements total width, when this is specified in absolute units.
- Borders can be styled differently on different parts of an element, such as the bottom or left side.
Margin
- Margin is found outside of elements of certain types, including blocks and inline-blocks.
- Elements are pushed away from those around them by margins.
- Margins are used to create whitespace outside of an element's border.
Diagram
The box model is often illustrated as seen below.