Styles and the Box Model
Overview… We will look at: Introduction to Styles. HTML Styling Embedding Styling Internal Style Sheets/External Style Sheets Layout Structure
Introduction to Styles Styling on HTML pages are implemented in many different ways some very bad and some good. Lets look at these documents….. What’s the difference?
HTML Format This is the basic format of an HTML page… This is displayed like…
Font Tag To change the colour of the text displayed. We make use of the font tag. This changes the output to….
Embedded Styling – BAD example
Embedded Styling – BAD example The font tag is a depreciated HTML tag and is no longer used within HTML5. Within this example there are 63 instances of red text applied throughout the document. So what if we wanted to change this colour from Red to Blue?
Internal Style Sheet - BETTER This example shows creating a stylesheet within the HTML page.
Internal Style Sheet - BETTER The code shows all the styles being used within the example. This style is applied as a class called “BodyText”. By creating a style class, it allows us to use this over and over again within the HTML page.
External Style Sheet - BEST The best way of storing our styles is by making use of Cascading Style Sheets (CSS). An external CSS is separate to HTML and allows us to contain all of our styles together and just to reference the in the HTML page. When using CSS, HTML is used to tell the page where to get its formatting from. Compared to an internal stylesheet, this allows the same stylesheet to style multiple pages instead of just the one. The biggest advantage to this method is that one change to the CSS will impact the entire the whole site.
External Style Sheet - BEST A stylesheet is referenced on a HTML page though the use of a single line of HTML located within the <head> tags. Href is the destination. Rel is the relationship between the documents Type specifies the media type
Marking up HTML Once style is defined in a stylesheet, it needs to be applied to the HTML. There are two sorts of styles to be used: Inline – Applied to text in a single line. Utilises <span> tags. Block – Applied to a block of text/area. E.g. Paragraph Utilises <div> tags.
<div> vs <span> Using span tag follows the flow of text. This is accomplished by… Block styles are applied at the start of the paragraph. So what would happen if we changed the second span to a div?
<div> vs <span> This would apply block level formatting and change the output to… By using the <div> tags, it has created a division within the text, therefore split it into sections. We don’t want this. So a <div> tag would be used around the outside and a <span> tag on the inside.
Basic HTML5 Layout HTML5 provides us with a basic layout structure to use that is split into 6 areas. header – Content that appears on every page of the site typically at the top footer - Content that appears on every page of the site typically at the bottom nav - The navigation elements for the page article - The main document for this page section - A sub section in the main document aside - A section on the page with additional information (often advertising)
Layout
Creating the Layout A new HTML document has been created with the following unformatted content…
Positioning In regards to styling, we have several options to consider with its positioning. Static - We may leave the text in the flow of the text Absolute - We may remove the text from the flow and specify exact coordinates with respect to the parent container Fixed - We may remove the text from the flow and specify exact coordinates with respect to the browser window Relative - We may position the text relative to its position in the flow
Re-defining Tags When styling we have the option to redefine tags. We can apply formatting whenever the tag appears. Firstly, we will mark-up the document for where we want the formatting to apply. In this case it’s the header…
Tag Surroundings To understand the box model, we need to think of a box around the tag content.
Tag Surroundings All of the surrounding boxes to the content posses a top, left, height and width property. These are determined with reference to the parent container such as article. Lets apply a border so we can see the edges of the styling. This creates the following…
Adjusting the Padding Changing the padding changes how the text sits in relation to the border. This results the space between the text and border being increased by 10 pixels.
Adjusting the Margin Lets increase the margin… This results in…
Changing Positioning Changing the positioning takes it out of the flow of content. Lets change the position to absolute… And we get a not very attractive layout.
Adjusting the Width and Height So far we have used “px” as a unit of measurement. We can also use %, em or vw and vh. Percentages mean that its calculated based on its parent. EM mean the box is calculated based on font size. VW is based on the viewable width of the page. VH is based on the viewable height of the page. Dependant on content will depend on which would be the best method to use.
Adjusting the Width and Height Lets set the values to percentages….
Adjusting the Width and Height
Recap We have looked at:- Introduction to styling HTML Styling Styling Methods Embedded Styling Internal Styling External Styling Inline and box styling Layout Positioning Tag Surroundings Adjustments
Next Week… We are going to look into Hypertext, Images and Tables including:- Types of hypertext Creating Links Types of Hyperlinks available Styling Hyperlinks Other Attributes used in hyperlinks.