VirtualMV/HTML/Basic/CSS
| Internet & Web Development ( Introduction | Advanced ) | ||
|---|---|---|
| Overview | Personal Learning Environment | What is HTML? | Web authoring | Resources | Help Desk |  |
| Creating a basic web site | HTML editor | Basic tags | Head tag | Linking pages | Formating and lines | Lists | Tables | Special characters | Page icon | |
| Multimedia | graphics and images | Connected media | Audio | Video | Image map | |
| Cascading style sheets | Inline, embedded, linked | Language | Example | |
| Web page layout | Tables | CSS | iFrame | Frames | Other | Responsive | |
| Framework | Tours of Hawke's Bay | |
| Forms | Example | mailto | Add Google | |
| Misc | ||
Overview
|
By the end of this page you will be able to:
|
In early HTML the <font> tag was used to format the text in a web page. With the separation of content and style (particularly as more devices need to display a web page) the font tag is being depricated (slowly removed), and instead a style attached to an HTML element and define how it is to be displayed. For example:
<p style="color: #00FF00">Paragraph one in green</p>
Will display the paragraph in green
Paragraph one in green
Styles can be saved in an external file (called the cascading style sheet, or css) and can be attached to multiple pages. This allows one style sheet to be applied to multiple pages in your site. Changing the style definition in the css will change the HTML elements of any attached pages.
|
|
By the end of this page you will be able to:
|
Cascading style sheets
A style sheet is a set of formatting definitions that are used by a web page to display the web page data.
This means that you can customise the formatting of your web pages and this will be consistent throughout your web site. If at a later stage you want to change any of the formatting features, just changing the style sheet will cause the changes to appear in all the sites pages.
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles are normally stored in Style Sheets
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save you a lot of work
- External Style Sheets are stored in CSS files
- Multiple style definitions will cascade into one
Demonstration of capability
- The web site http://www.csszengarden.com/ showcases what can be achieved using css.
Brief history
- 1996 CSS Level 1 published (1994 W3C became involved)
- 1998 CSS Level 2 published
- 2010 CSS Level 3 is divided in several separate documents called "modules", and add new capabilities or extend CSS2 features. Four modules have been published (2011: Color; Selectors L3; Namespaces and 2012: Media Queries)
- What's possible in CSS3 ( with HTML5 and Webkit ( 2011, Jun) http://www.sencha.com/products/animator/ )
- 2013 CSS4 Level 4 is split into separate modules - however collectively they are referred to as CSS4.
Also refer to http://en.wikipedia.org/wiki/Cascading_Style_Sheets
Resources
Two of the main references for style sheets are;
- Lie and Bos (1996)[1], ( http://www.w3.org/TR/REC-CSS1-961217.html )Cascading Style Sheets, level 1
- W3C (1998)[2], ( http://www.w3.org/TR/REC-CSS2/ )Cascading Style Sheets, level 2,CSS2 Specification
Examples
- Shea,(n.d.).[3] ( http://www.csszengarden.com/ ) A selection of style sheets that can be applied to the same page.
- Gube (2008)[4], ( http://sixrevisions.com/css/20_websites_learn_master_css/ ) 20 sites to help you master CSS
What is a style
- A style is the way a particular element can be displayed in a web page.
- Styles may be applied to any element including and between the <body> tag using the style attribute in the relevant element tag.
- The style attribute can contain any number of Style properties.
- The Style syntax is made up of three parts
- selector {property:value}
For example,
- you could set the contents of an <h1> tag to have a blue color,
h1 {color: blue};- or the contents of a table (<table>) to be in a smaller font that normal.
table {font-size: small;}- or how a colour can be changed of a paragraph, and a specific part can be enlarged. Note the part enlarged retains the paragraph style.
<p style="background-color:#F6F6FA; color:#860BA8">Web pages, <b style="font-size:1.2em">the final frontier</b> these are the voyages of the Web Developer!</p>
References
- ↑ Lie, H. W. & Bos B. (1996). Cascading Style Sheets, level 1, w3C. Retrieved September 18, 2006 from http://www.w3.org/TR/REC-CSS1-961217.html
- ↑ w3C (1998) Cascading Style Sheets, level 2,CSS2 Specification. Eds. B. Bos, H.W.Lie, C. Liley & I. Jacobs. Retrieved September 18, 2006 from http://www.w3.org/TR/REC-CSS2/
- ↑ Shea, D. (n.d.) ss Zen Garden: The Beauty in CSS Design. Retrieved November 3, 2008 from http://www.csszengarden.com/
- ↑ Gube, J. (2008) 20 sites to help you master CSS. Retrieved August 30, 2008 from http://sixrevisions.com/css/20_websites_learn_master_css/
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/HTML/Basic/CSS. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 22, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/CSS (zotero)
|
