Session 5 - CSS Part 1
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 any styling defined in the external stylesheet for the 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.
<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>
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)." | ||||
| http://htmlcolorcodes.com/assets/downloads/web-safe-colors/web-safe-color-chart.png |
Adobe Color CC https://color.adobe.com/create/color-wheel/
Lots of cool stuff here http://htmlcolorcodes.com/
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. |
| https://www.webcodegeeks.com |
Each of these can be manipulated with CSS as well as height and width for any block element.
Block Level Elements
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>
Activity 1
Try out the box model for yourself - here is the code for my example
This is what my example looks like
Add a few more properties to see how you can control the element.
Adjust the width of the element by specifying the size in pixels or percentage
width:300px;
width:50%;
Inline Elements
"Inline" elements only take up as much room as needed and do not force new lines before and after.
<span>
<img>
<a>
The Box Model does NOT apply to inline elements
You can override block and inline behaviours with the CSS display property:
display:inline
or
display:block
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
More information available from https://www.w3schools.com/css/css_boxmodel.asp
Full PDF CSS Cheat Sheet available here: https://www.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>
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.
Activity 2
Apply some styling to your Resume webpage.
Styling Tables
You can apply styles to the table <table>, cells <td> and headers <th>. Here is an example using the table from last week's class.<style>
table {border-color: #50494F;
border-style: solid;
background-color: #BBEDFA;}
th {background-color: #0597FF;
text-align: left;}
</style>
The result of the above styling is:
If you want to add some space around the table content, you can use the padding property.
td, th {padding: 20px;}
Activity 3
Apply some styling to the table on your Resume webpageLists
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;}
Activity 4
Change the Bullet style for your list
Try a few of the other style/properties on your own
Comments
Post a Comment