What is CSS?
- CSS stands for Cascading Style Sheets
- CSS defines how HTML elements are to be displayed
- Styles were added to HTML 4.0 to solve a problem
- CSS saves a lot of work
- External Style Sheets are stored in CSS files
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a document.HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file.
N.B. The above information is from W3School's website www.w3schools.com
CSS Levels
There are three levels of CSS:- An external style sheet is a separate document to your HTML pages. Within this one document, you can create styles for your whole website.
- An embedded style is where you use the STYLE tag and write the code in the <head> section of each page - this will override the stylesheet for the current page.
- An inline style is placed within the <body> section, usually with the tag that is being formatted. 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.
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 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)."
You can also access a list of the colours from the w3schools web site:
http://www.w3schools.com/colors/colors_names.asp
Or Use their online colour picker:
http://www.w3schools.com/tags/ref_colorpicker.asp
Or some other colour websites:
http://html-color-codes.info/
http://www.colorpicker.com/
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.
http://kuler.adobe.com
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).
Class Activity 1:
Read a couple of the following articles on colour design for web:
http://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/
http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437
http://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/
http://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/
A colour scheme typically has ether 3 or 5 colours. Regardless of how many colours you have in your pallete, 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 Mysty River Regional Library Service. Share with the class, your choice of colours 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. 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.
The following tags are considered "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.
You can override block and inline behaviours with the CSS display property:
display:inline
or
display:block
The Style Attribute can be used to apply inline styles to any HTML element. Inline styles override any global styles that have been made.
<p style="color:green; text-align:center; background-color:lightgrey">
N.B. the above will apply the styling to the current paragraph
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
Use the link element to link the document to an external style sheet:
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="style1.css" media="screen" rel="stylesheet" type="text/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
- Table
- Text
PDF Version
http://coding.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf
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.
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.
Background
We saw how easy it is to set a background color for any of the HTML elements. As well as color, 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 will specify whether to repeat the background if the image is smaller than the screen viewing area.
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.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>
Applying the Box Model
I mentioned the Box Model when introducing CSS. All Block level elements utilise the Box Model styling features.N.B. See CSS Cheat Sheet (Box Model section) for more details
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.
More Cheat Sheets
http://websitesetup.org/html5-cheat-sheet/
http://websitesetup.org/css3-cheat-sheet/
http://www.bluehost.com/blog/website-design/html-css-cheat-sheet-infographic-4181/
Class Activity 2
Apply some styling to the sample page we created last week
More Social Media Integration
https://instagram.com/developer/embedding/
For Instagram Badges
https://instagram.com/accounts/badges/
Class Activity 3
Can you embed Pinterest?
Class Activity 4
Add a post to your Blog and include:- Like me on Facebook for Chisholm Institute
- An embedded Facebook post from Chisholm Institute (or another appropriate one of your choice)
- An Instagram Badge
- Embedded Instagram post
- Twitter Feed for ALIA
No comments:
Post a Comment