Communication Technology 3075: Cascading Style Sheets
Prerequisite: Comm Tech 2055 - Web Design 2
1. differentiate among the use of inline, embedded and external style sheets
2. demonstrate standard CSS coding practices for design, navigation, images, forms, tables, positioning, accessibility and cross-browser issues
3. show that CSS syntax is made up of selectors and declaration blocks
3.1 identify commonly used style declarations and selectors; e.g., type, class, id, child, adjacent, pseudo-class, and first-child pseudo-class
3.2 explain when to use appropriate selectors
4. determine when to import or link a style sheet
5. understand how the browser differentiates among the different styles; e.g., hierarchy
6. identify and understand the types of rendering; e.g., quirks mode and compliance mode
7. create navigation for a Web site using either a vertical, horizontal or tab-based system
8. determine whether to use inline, embedded and/or external style sheets in a Web site
8.1 incorporate appropriate properties, values and unit identifiers regarding:
8.1.1 fonts
8.1.2 anchors
8.1.3 text
8.1.4 lists
8.2 create/modify images to be used as both stand-alone and background, using:
8.2.1 borders, background and padding properties
8.2.2 float and margin properties to enhance image
8.3 apply the following properties to tabular data to ensure that what is being viewed is accessible and attractive:
8.3.1 border
8.3.2 caption
8.3.3 font
8.3.4 text
8.3.5 padding
8.3.6 colour
8.3.7 the :nth-child pseudo-class notation
8.3.8 the “hover” value applied to the “tr” tag
8.4 modify/create a form that accepts user input using input and text areas, radio button, check boxes, drop-down lists and buttons, considering:
8.4.1 labels
8.4.2 fieldset
8.4.3 legends
8.5 use appropriate styles on each of the form elements to ensure the form is accessible and attractive to the user/client
8.6 test the Web site in more than one browser, or in a different version of the current browser, to check for cross-browser compatibility and fix all incompatibility issues using appropriate cross-browser techniques; e.g., getting .png image transparency in IE6
8.7 use appropriate id and class attributes appropriately
8.8 use enhanced layout properties: clear and position
2. demonstrate standard CSS coding practices for design, navigation, images, forms, tables, positioning, accessibility and cross-browser issues
3. show that CSS syntax is made up of selectors and declaration blocks
3.1 identify commonly used style declarations and selectors; e.g., type, class, id, child, adjacent, pseudo-class, and first-child pseudo-class
3.2 explain when to use appropriate selectors
4. determine when to import or link a style sheet
5. understand how the browser differentiates among the different styles; e.g., hierarchy
6. identify and understand the types of rendering; e.g., quirks mode and compliance mode
7. create navigation for a Web site using either a vertical, horizontal or tab-based system
8. determine whether to use inline, embedded and/or external style sheets in a Web site
8.1 incorporate appropriate properties, values and unit identifiers regarding:
8.1.1 fonts
8.1.2 anchors
8.1.3 text
8.1.4 lists
8.2 create/modify images to be used as both stand-alone and background, using:
8.2.1 borders, background and padding properties
8.2.2 float and margin properties to enhance image
8.3 apply the following properties to tabular data to ensure that what is being viewed is accessible and attractive:
8.3.1 border
8.3.2 caption
8.3.3 font
8.3.4 text
8.3.5 padding
8.3.6 colour
8.3.7 the :nth-child pseudo-class notation
8.3.8 the “hover” value applied to the “tr” tag
8.4 modify/create a form that accepts user input using input and text areas, radio button, check boxes, drop-down lists and buttons, considering:
8.4.1 labels
8.4.2 fieldset
8.4.3 legends
8.5 use appropriate styles on each of the form elements to ensure the form is accessible and attractive to the user/client
8.6 test the Web site in more than one browser, or in a different version of the current browser, to check for cross-browser compatibility and fix all incompatibility issues using appropriate cross-browser techniques; e.g., getting .png image transparency in IE6
8.7 use appropriate id and class attributes appropriately
8.8 use enhanced layout properties: clear and position
High School Assessment Rubric:
Introductory Info:
1. differentiate among the use of inline, embedded and external style sheets
https://www.hostinger.com/tutorials/
https://www.w3schools.com/css/default.asp
https://helpx.adobe.com/ca/dreamweaver/using/dom-panel.html
https://www.hostinger.com/tutorials/
https://www.w3schools.com/css/default.asp
https://helpx.adobe.com/ca/dreamweaver/using/dom-panel.html
Assignment 1: HTML Styles and an Introduction to CSS
Okay, we have the bones of our website, now it is time to start dressing her up a bit.
Lets play with our website header for a minute or two. There are a couple of ways we can do this:
Here is the coding tutorials (I recommend you take a look at them first to know what to look for in your code).
https://www.w3schools.com/html/html_styles.asp
https://www.w3schools.com/html/html_formatting.asp
First: Select your header in split screen
Lets play with our website header for a minute or two. There are a couple of ways we can do this:
Here is the coding tutorials (I recommend you take a look at them first to know what to look for in your code).
https://www.w3schools.com/html/html_styles.asp
https://www.w3schools.com/html/html_formatting.asp
First: Select your header in split screen
You can see my finished code on the bottom. What did I do? I centered the text, added powder blue to my background and made my header white, italicized and centered.
So how did I do it? First I selected my header, (you can do this in the code or the actual header in the live site) and went to my menu on the right and clicked the css designer tab. You will notice close to the bottom is a checkbox called "show set". This box is important, because it shows you what you have set for a particular html element (the header). Now. Unclick the box (it is default clicked). Now you will be presented with a variety of options. |
Assignment 2: Link and Style Multiple Pages Using an External CSS
By this point you should have one or two web pages built. We want to syle them off of one css sheet. This tutorial will show you how to do it.
Assignment 3, 4, and 5: The Finished Product - Your Multi-Page Website
At this point you should be pretty comfortable with building in Adobe Dreamweaver. Now you are set free to develop you own multi page website. FREE I TELL YA!
Look. Its not that hard. You should be able to make something amazing with just this link, your knowledge of dreamweaver and ctrl +c and ctrl+v.
https://www.w3schools.com/howto/default.asp
I would like proper headers, footers, a web page structure tree, and consistent style throughout the website. Now I would like 5 pages that show all of your portfolio work throughout the course. Vector, Raster, 3D Modelling, etc. Make me a polished website.
Look. Its not that hard. You should be able to make something amazing with just this link, your knowledge of dreamweaver and ctrl +c and ctrl+v.
https://www.w3schools.com/howto/default.asp
I would like proper headers, footers, a web page structure tree, and consistent style throughout the website. Now I would like 5 pages that show all of your portfolio work throughout the course. Vector, Raster, 3D Modelling, etc. Make me a polished website.