Session 7: Introducing CSS

HTML so far

The Basics

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Headings
<h1> .... </h1>
<h2> .... <h2>
<h3> .... </h3>
<h4> .... </h4>
<h5> .... </h5>
<h6> .... </h6>

Paragraphs
<p>....</p>

Breaks
<br />

Lines
<hr />

Lists
<ol> .... </ol>
<li> .... </li>
<ul> .... </ul>

Images
<img src="path/filename" height="nnn" width="nnn" alt="corporate logo">

Attributes
  • id
  • title
  • class
  • style
id="value"
title="value"
class="value"
style="value"

Tables
<table> </table> Use to define the table
<tr> </tr> used for each row in the table
<th> </th> Table Header - this makes the text bold
<td> </td> table data is used to include content in each cell within each row of the table.

Hyperlinks
<a href="http://thisisthelink.com"> text for link </a>
<a href="webpage.html"> click here </a>
target="_blank"  attribute to specify a new tab

<a name="namedplace">this is a spot on my document</a>
<a href="#namedplace">go to named place</a> Note the use of the # to refer to the named area

<a href="mailto:me@emailaddress.com">email me</a>

Header and Footer
The <header> element defines the header for your page.
The <footer> element is used to define the footer for your page.

Nav
The <nav> element is used to define the main navigation section for your page.

iframe
You can use an iframe to display a web page within a web page.
<iframe src="url"></iframe>
Attributes: height="nnn" and width="nnn" 

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS defines how HTML elements are to be displayed
  • CSS saves a lot of work
  • External Style Sheets are stored in .css files



or via YouTube link

CSS Levels

There are three levels of CSS:
  1. An external style sheet is a separate document to your HTML pages. Within this one document, you can create styles for your whole website. Use the <link> element to apply the stylesheet to a webpage. <link rel="stylesheet" type="text/css" href="theme.css"> where theme.css is the name of your .css file
  2. An embedded style is where you use the STYLE element and write the code in the <head> section of each page - this will override the stylesheet for the current page. <style>  </style>
  3. An inline style is placed within the <body> section, usually within the tag that is being formatted by way of the style attribute. eg. <h1 style="color:blue;"> N.B. Inline styles will override embedded and external styles and so it can be used in circumstances where you wish to deviate from the default styling.
The following demonstrates how CSS works. The HTML file remains the same, but different stylesheets can be applied to change the way the page is displayed.


Zen Garden

Zen garden is a website that demonstrates how varied a webpage can look when using different style sheets. While it is no longer active, there are a few examples that still work. The idea of it was to have web designers contribute to the Zen Garden by using the provided HTML and applying different CSS. Browse through the site to see some of the examples. Templates were provided on the website.


Web Colours

To use colours in a web page, you need to refer to the HEX code, the official web colour name or the RGB numbers. It is generally accepted that you use the HEX codes for web colours.

"Web Safe, or Browser Safe palettes as they are also referred to, consist of 216 colors that display solid, non-dithered, and consistent on any computer monitor, or web browser, capable of displaying at least 8-bit color (256 colors)."



Colour Resources

On the W3Schools website, there are lots of colour resources that can help you create a colour scheme for your website.





Or some other colour websites:
http://html-color-codes.info/

https://www.canva.com/colors/color-wheel/

To get a feel for different colour schemes, you can use the adobe Kuler colour (Adobe Color CC) website. This is a visual aid that you can use to pick colours and colour schemes.
https://color.adobe.com/create/color-wheel/





You can even upload an image and have it choose colours from your image. Web colours are based on RGB (Red, Green, Blue) and so may not look exactly the same as the printed version (CMYK).

CSS Activity 1:

Read a couple of the following articles on colour design for web:

http://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/

https://www.canva.com/learn/website-color-schemes/

A colour scheme typically has either 3 or 5 colours. Regardless of how many colours you have in your palette, one should be your main colour and would have the largest coverage, followed by a secondary colour. Any other colours within your palette are contrasting and would have the least amount of coverage.

Create a 3 colour palette and a 5 colour palette for a library of your choice. Share your choice of colours with the class and the reason why you selected them.

CSS Box Model

The CSS Box Model describes the boxes that surround any Block level elements within a web page. A block level element is one that will start a new line on your web page. We have used quite a few so far in our HTML

There are four parts to the CSS box model - margin, border, padding, content. 




Each of these can be manipulated with CSS as well as height and width for any block element.

Here is an example of the CSS Border properties

border-style
border-color
border-width

If you use them as they are above, they will relate to ALL four of the borders. If you wanted to have each border different, then you can add top, bottom, left and right.

Style Attribute

The Style Attribute can be used to apply inline styles to any HTML element. Inline styles override any global styles that have been made.

Here is an example using an inline style. Only the paragraphs <p> that have the style attribute applied will be styled.

<p style="border-style:solid; border-color:#0EC1BE; border-width:15px">Testing Borders</p>

<p style="border-top-style:solid; border-bottom-style: solid; border-left-style:dotted; border-right-style:dashed; border-top-color:#650EC1">Hello World</p>


The following tags are just a few of the "block-level" elements. When displayed, they will take up the full width available with new lines before and after.

<div>
<h1>….<h6>
<p>
<ul>  <ol>  <li>
<table>
<form>


"Inline" elements only take up as much room as needed and do not force new lines before and after. An example of an inline element is <a> <span> or <img>

List of Block and Inline elements available here

You can override block and inline behaviours with the CSS display property:

display:inline

or

display:block

Why override? By overriding the default behaviours, you can apply the box model to inline elements!


Note that CSS syntax has a colon (:) between the property and the value and a semi-colon (;) separating the properties.


There are so many CSS properties that you can use. Some can be used on any element and some are specific to particular elements. Here is an alphabetical list of CSS properties. I will demonstrate some of them, but there are way  to many to cover in the short amount of time that we have!



Style Element

The <style> element or tag is used to style the current document. The style tag is usually placed in the <head> section of the document.

<head>
<style type="text/css">
     p {color:green;
     text-align: center;
     background-color: lightgrey}
</style>
</head>

N.B. The above styling will apply to any <p> element within the current page

or as a separate style sheet

Stylesheet

You can create a stylesheet in the same way as you create a new HTML file - the only difference is the file extension. A stylesheet will have the file extension of .css which you can select when you save it for the first time

Your stylesheet could look like this:

p {color:green;
     text-align: center;
     background-color: lightgrey}

Use the link element to link the document to an external style sheet:

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

To start styling a web page, we need to know what properties we can alter. Properties are categorised into the following:

  •     Background
  •     Border and outline
  •     Dimension
  •     Font
  •     Generated Content
  •     List
  •     Margin
  •     Padding
  •     Positioning
  •     Print
  •     Table
  •     Text

CSS Cheatsheets:

https://cdn.rawgit.com/hostinger/banners/94941d64/tutorials/pdf/CSS-3-Cheatsheet.pdf

https://www.onblastblog.com/wp-content/uploads/2017/01/CSS3-Cheat-Sheet.pdf

More on Box elements

Margin

<style>
p {
margin-top: 50px;
margin-right: 25px;
margin-bottom: 50px;
margin-left: 25px;
}
</style>

The margin property can be used as a shortcut to set all four properties.

<style> 
p{
margin: 50px 25px 50px 25px;
}
</style>

Border

The border-style property specifies what kind of border to display. 

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

The border-width specifies the size of the border - there are a variety of options, but we will use pixels (px)


The border-color property is used to set the color of the four borders.

As mentioned when we talked about colours, you can use 
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent

Note: If border-color is not set, it inherits the color of the element (parent).

The border-radius property is used to add rounded borders to an element. Again, we will use pixels (px)

border-style: solid;
border-width: 10px;
border-color: #3333ff;
border-radius: 5px;

The border property can be used to set the width, style and colour in a single line

<style>
p{
border: 10px solid #3333ff;
}
</style>

Padding

The padding properties are used to generate space around an element's content, inside of any defined borders. You can specify them separately using padding-top, padding-right, padding-bottom, padding-left or all four in one line.

<style>
p{
padding: 10px 25px 10px 25px;
}
</style>

Background

You can set the background colour for any of the HTML elements including <body>. As well as colour, you can also choose a background image.

Here are the background attributes:
•    background-color
•    background-image
•    background-repeat
•    background-attachment
•    background-position

To set a background image for your page, you could use:

body {background-image:url('filename');
            background-repeat: repeat;}

Background-repeat will specify whether to repeat the background if the image is smaller than the screen viewing area.

<style>
body {background-color: aqua;}
</style>


N.B. See CSS Cheat Sheet for more information

Styling Text

Fonts

font-family is used to specify a list of font family names and/or generic family names to be used to display text within an element. The browser will go through the list until it finds a valid font that can be used. To make sure that at least one of your choices is used, include a generic family name at the end of your list. Generic Fonts are found on most computers and do not go inside quotes when referring to them.

The Generic family names are:
•    Serif
•    Sans-serif
•    Cursive
•    Fantasy
•    Monospace

<style>
p {font-family: "Algerian", "Helvetica", fantasy}
</style>

Font Size can be specified as an absolute using pixels (px), or a measurement such as centimetres (cm), inches (in), millimetres (mm), points (pt) or picas (pc). You can also refer to a relative size such as xx-small, x-small, small, medium (default), large, x-large or xx-large. You can also use percentage (%) or the multiplier em (em). 

p {font-size: 16px}
p {font-size: x-large}

Font color is specified using the color attribute, background-color is used to specify a background colour. If you use more than one attribute for the element, make sure you separate them using a semicolon (;).

p {font-family: "Algerian", "Helvetica", fantasy; font-size: 16px; color: pink; background-color: lightgrey }

Bold and italics can also be created using styles.
p {font-weight: bold}
p {font-style: italic}
p {font-style: normal}

The following are valid styling attributes for the text within the heading element
h1 {color: indigo;}
h2 {color: #4b0082; }
h3 {color: rgb(255,0,0);}

Text

You can also apply other styles using the text-decoration attribute - text can be underline, overline, line-through, blink, none.

p {text-decoration: underline}

Word and letter spacing can be changed by using:
p {word-spacing: 2px; letter-spacing: 1px}

N.B. See CSS Cheat Sheet for more information.

Styling Hyperlinks

Styling Hyperlinks is a little bit different to other elements. You can apply a style to all hyperlinks by styling the <a> element, but hyperlinks usually display differently when they have been visited - purple instead of the usual default blue for example.

A Hyperlink has 5 states that can be styled:

    Link - the unvisited link
    Visited - what the link will look like once it has been visited
    Focus - this is used if the link has been selected using a keyboard shortcut
    Hover - this is how the link will display when you move your mouse over it
    Active - This is used for the link when it has been clicked, but prior to it being "visited":


To apply link styles, use the syntax

<style>
a:link {color: black; background-color: white}
a:visited {color: black; background-color: pink}
a:hover {background-color:lightblue}
a:focus {color: red; background-color: white}
a:active {color: lightgreen; background-color:black}
</style>

Linking to an External Style Sheet

Within the head section of your web page, use the <link> element to link the page to the external style sheet.

<link href="mystylesheet.css" media="screen" rel="stylesheet" type="text/css" />

where "mystylesheet.css" is the name of your external style sheet.

Remember: You create your stylesheet in the same text editor that you created your HTML. Make sure that when you save it, you choose Cascading Style Sheet as the file type or add the .css if using a text editor that doesn't have file types.

CSS Activity 2

Apply some styling to your test page

Here is some basic CSS for my resume page
-----------------------------------------------------------------------------------
body {background-color: #ddccff}
h1 {
color: #660066;
font-family: "comic sans MS";
text-align: center;
border-style: solid; border-width: 2px; }
------------------------------------------------------------------------------------

N.B. Try applying one CSS attribute at a time and refresh your page in between so that you can see the effect on your page

CSS Activity 3

Apply some styling to your Book Review site

Lists

Styling lists is not much different to styling the other block elements. The specific List styling properties are:

list-style
list-style-type
list-style-position
list-style-image

Here is an example
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul>

which produces:


I can change the bullet style by using the list-style-type property

ul {list-style-type: square;}




CSS Activity 4


Change the Bullet style for your list

Try a few of the other style/properties on your own

Display

The Display property allows you to change an inline element into a block element and vice versa.

For example, list items,<li>, are block elements as each one starts a new line. The following HTML shows a standard list.

<html>
<head>
<title>Sample CSS</title>
<style type="text/css">
body{background-color: #FCE4FA}
h2 {background-color:#AC63E4;
    padding:20px;
    border-width:20px;
    border-color: #4C0146;
    border-style: solid;
    margin:30px;
    width:300px}
ul {list-style-type: square;}
</style>

</head>
<body>
<h1>HTML/CSS Box Model in Action</h1>
<h2>This is Content</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul>
</body>
</html>


Add some styling:

li {display: inline;
    text-align: center;
    background-color: #85c1e9;
    border-color:  #283747;
    border-width: 5px;
    border-style: solid;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    }


and you get:


ID and Class

ID and Class are both global attributes - that means they can be used with any html element.

ID is used to give a unique name to an element. This is useful for applying special styling for an element without having to embed the CSS with the html. You can still use this within your stylesheet (CSS) document.

Class is used to group elements that you want to style consistently. This is also included in your stylesheet rather than the HTML file.

The concept is that you only need ONE stylesheet for your website so you can use ID and CLASS to apply different styling.

HTML 

<html>
<head><title>id and classes</title>
<link rel="stylesheet" type="text/css" href="styleclass.css"></head>
<body>
<p id="special">This is a unique id of special and can be styled differently</p>
<p>this is a normal paragraph</p>
<p>As is this</p>
<p class="items">Item 1</p>
<p class="items">Item 2</p>
<p class="items">Item 3</p>
<p>normal paragraph</p>
</body>
</html>

Using with CSS

p {color: blue; background-color: orange}
p.items {color:purple; background-color: yellow}
#special {color: white; Background-color: black}

** NOTE: use the period (.) for class and the hash (#) for id

https://www.w3schools.com/css/css_selectors.asp


Using <Div> and <Span>

The <div> element is used to define a division or section of your page. They can help when you are laying out your page and you can give meaningful names to each section.

The <span> element creates a division within an inline element. It allows you to add styling to a couple of words within a paragraph for example.

The same example using <div>

<div id="menulist">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul></div>

and the Style information

ul {list-style-type: none;}
#menulist {background-color: #85c1e9 ;
    width: 650px;
    padding: 5px;}
li {display: inline;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

Produces:


In the same way, we can force inline elements to display as block elements.

The following code shows the use of the <a> element to create a simple menu. The <a> element is usually an inline element.

<html>
<head>
<title>Sample CSS</title>
<style type="text/css">
body{background-color: #FCE4FA}
#menulist {background-color: #85c1e9 ;
    width: 150px;
    padding: 5px;
    float: left;}
#contentarea {margin-left: 170px}
a {display: block;
    padding:10px;
    background-color:  #f0b27a;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;
    background-color:  #f4d03f; }
</style>

</head>
<body>
<h1>HTML/CSS Box Model in Action</h1>
<div id="menulist">
<a href="https://www.petrescue.com.au/">Petrescue</a>
<a href="https://www.rspca.org.au/">RSPCA</a>
<a href="https://dogshome.com/">Lost Dogs Home</a>
<a href="https://www.lortsmith.com/">Lort Smith</a>
</div>
<div id="contentarea">
<h2>This is Content</h2>
<p>Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
</p>
</div>
</body>
</html>

The web page would look like the following:


Floating Images

The following code will float an image to the left with the content text on the right hand side of the image

<html>
<head>
<title>Sample CSS</title>
<style>
img {float: left;
    margin-right:10px;}
</style>
</head>
<body>
<h1>Float in Action</h1>

<div id="contentarea">
<h2>This is Content</h2>
<img src="JedCouch.jpg" width="400">
<p>Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
</p>
</div>
</body>
</html>

This will display a page that looks like the following:



NOTE: If you would like to know more about coding websites, there are lots of tutorials online as well as LinkedIn Learning. It is not essential to be able to code to complete this unit, so long as you have a basic understanding of HTML and CSS and how they work with web pages. 


Comments

Post a Comment

Popular posts from this blog

Session 11: Tracking, Closure and Review

Image
Tracking your Project with Project Libre There are multiple ways of entering "real" data into your project. You can use timesheets and enter details by the day/hour for each resource or you can add the information into each task. For a small project, I find that the easiest method is to add the actual data into each task. Before you start to track your actual information against your plan, you need to set a baseline. I will use the Project Libre file that we created in class to demonstrate the tracking procedure.  Setting a Baseline I will set mine to Baseline 1. You can have multiple Baselines for tracking purposes, whether they be for different sections of your project, or for different scenarios or plans. Once you have set the Baseline, you will be able to view the actual information against the plan. The plan shows up as a shaded area, currently underneath the plan. As you enter in actual start dates and progress information, the shaded area (your ...
Read more

Session 9: Project Libre Gantt Charts

Image
Project Libre Tasks With Project Libre, you start by defining the basic information about your project. Once you have provided the basic information, you can start to create your timeline by entering the tasks into the Gantt Chart. Predecessors In class we will work through The Big Move class example to create the timeline for the project. Class Activity 1 Using Project Libre, enter the tasks using the Gantt Chart View (Completed above as a class) Allocate/Estimate the duration for each task (Completed above as a class) Determine any predecessors for each task (Completed above as a class) Critical Path Analysis The Gantt Chart view in Project Libre will display the Critical Path in red. What does that mean? The Critical Path is the first area that you need to concentrate your time management skills. Any activity on the critical path that takes longer than the estimate will affect your end date. The blue activities have a bit of "wriggle room" (I know, not a technical project ...
Read more