* The font weight refers to the thickness of text elements.
* There are four keyword values: normal, bold, bolder and lighter.
* You can also enter an integer as a value, from the range of 100 to 900, with the higher the number meaning the darker the text.
* However not all user agents support this property completely therefore text can render out inconsistently across browsers.
Tuesday, July 28, 2009
Background Color
* The two main advantages for using CSS in web design are firstly that pages are easy to update and change, and secondly that you can apply a background color to more than just the few elements you can in HTML.
* If you place the declaration block background-color:#000; inside a body selector the whole of the body background will change, however if you place it inside a 'p' selector then only the background of that paragraph will change colour.
* NB: the background colour will stretch all the way across the screen as the p tag is a block element, however it will not effect the margin of the element.
* The default colour for an element is transparent.
* The colour values are usually defined as a hexadecimal value, e.g. #FF00FF - the first pair of digits relating to red, the second two relating to green and the third pair to blue (if there are only 3 digits then each digit is duplicated).
* Can also specify the background colour using RGB values, e.g.
background-color:rgb(18%, 25%, 70%);
background-color:rgb(200, 150, 50);
* The integer range is from 0 to 256.
* Can also use keywords to represent the values but this is not recommended as firstly the colours that support the keywords vary from browser to browser, and secondly because they are disallowed in the W3C accessability standards.
* If you place the declaration block background-color:#000; inside a body selector the whole of the body background will change, however if you place it inside a 'p' selector then only the background of that paragraph will change colour.
* NB: the background colour will stretch all the way across the screen as the p tag is a block element, however it will not effect the margin of the element.
* The default colour for an element is transparent.
* The colour values are usually defined as a hexadecimal value, e.g. #FF00FF - the first pair of digits relating to red, the second two relating to green and the third pair to blue (if there are only 3 digits then each digit is duplicated).
* Can also specify the background colour using RGB values, e.g.
background-color:rgb(18%, 25%, 70%);
background-color:rgb(200, 150, 50);
* The integer range is from 0 to 256.
* Can also use keywords to represent the values but this is not recommended as firstly the colours that support the keywords vary from browser to browser, and secondly because they are disallowed in the W3C accessability standards.
Class
* The class selector is one of the most popular ways of implementing styles on HTML elements as we can have a subset of elements within the document.
* An example might be: in the CSS styles we would use the selector p.bold then in the body we would put the attribute class="bold" inside the p tag.
* If we use the selector .bold instead of p.bold it then becomes a universal selector which can be applied to any element in an HTML document that has that class name as an attribute, e.g. span class="bold".
* An HTML element can also have multiple class rules, e.g. span class="bold em".
* Writing well structured class selesctors is the key to writing good CSS.
* An example might be: in the CSS styles we would use the selector p.bold then in the body we would put the attribute class="bold" inside the p tag.
* If we use the selector .bold instead of p.bold it then becomes a universal selector which can be applied to any element in an HTML document that has that class name as an attribute, e.g. span class="bold".
* An HTML element can also have multiple class rules, e.g. span class="bold em".
* Writing well structured class selesctors is the key to writing good CSS.
Background Position
* This property is used all the time when laying out an interface design with CSS.
* It allows the developer to define a starting location for background elements other than the top left corner, coordinates 0,0.
* There are five keywords that can be used in a variety of combinations to provide the values for the background-position property: center, left, right, top, bottom.
* background-position:center center; for example would place the image right in the middle of the screen.
* You can also specify the exact location of the image using length values like points, pixels, inches or centimetres.
* Best practise is to use ems or %, e.g. background-position:40% 20%; would scale to the size of the window.
* The first number of the value specifies the distance from the left, the second number of the value specifies the distance from the top.
* The background-position property is really useful when creating menu systems with the background image as the button and hypertext as the text.
* This saves band width and makes the site more accessible.
* It allows the developer to define a starting location for background elements other than the top left corner, coordinates 0,0.
* There are five keywords that can be used in a variety of combinations to provide the values for the background-position property: center, left, right, top, bottom.
* background-position:center center; for example would place the image right in the middle of the screen.
* You can also specify the exact location of the image using length values like points, pixels, inches or centimetres.
* Best practise is to use ems or %, e.g. background-position:40% 20%; would scale to the size of the window.
* The first number of the value specifies the distance from the left, the second number of the value specifies the distance from the top.
* The background-position property is really useful when creating menu systems with the background image as the button and hypertext as the text.
* This saves band width and makes the site more accessible.
Background Tip
* To save on band width avoid using large pictures or images as your background.
* A 1KB image that's repeated is just as effective as a large image that may not display properly in the intended area anyway.
* A 1KB image that's repeated is just as effective as a large image that may not display properly in the intended area anyway.
Background Repeat
* The default value of the background image is to repeat and fill the element from top left to bottom right (this is the same in raw HTML).
* We can use the background-repeat property to change this.
* There are five possible values:
1. repeat; (default)
2. repeat-y; (repeats only on y axis, down the page)
3. repeat-x; (repeats only on the x axis, across the page)
4. no-repeat; (appears only once, no tiling or repeating)
5. inherit; (inherits the value from its parent)
* We can use the background-repeat property to change this.
* There are five possible values:
1. repeat; (default)
2. repeat-y; (repeats only on y axis, down the page)
3. repeat-x; (repeats only on the x axis, across the page)
4. no-repeat; (appears only once, no tiling or repeating)
5. inherit; (inherits the value from its parent)
Background attachment
* This CSS property allows the developer to define whether the background is fixed or whether it scrolls with the document.
* The DEFAULT setting is to have it scrolling with the content.
* To keep the background static set the property's value to fixed.
* To have the background scrolling (the same as the default) set the value to scroll.
* There is also a third option: background-attachment:inherit;
* This means that it would inherit the background-attachment property's value from its parent (remember this is not the default so it would have to be explicitly specified).
* Be careful when you use the background-attachment:fixed; option though as it can be confusing for the user and make the content difficult to read.
* The DEFAULT setting is to have it scrolling with the content.
* To keep the background static set the property's value to fixed.
* To have the background scrolling (the same as the default) set the value to scroll.
* There is also a third option: background-attachment:inherit;
* This means that it would inherit the background-attachment property's value from its parent (remember this is not the default so it would have to be explicitly specified).
* Be careful when you use the background-attachment:fixed; option though as it can be confusing for the user and make the content difficult to read.
Background Image
* When assigning a background image to an element you add the following declaration block inside the CSS for that element: background-image:url(address);
* The image appears tiled across the area of that element, displaying from top left to bottom right.
* The background image will not effect the margins of the element.
* It's mostly good practise to specify a background colour as a back up in case your image doesn't load as no error message will be displayed, just a blank screen.
* We set an image as a background image in the style sheet if it is purely there for aesthetics.
* If the image relates to the content of the page then it should be embedded into the HTML document.
* The image appears tiled across the area of that element, displaying from top left to bottom right.
* The background image will not effect the margins of the element.
* It's mostly good practise to specify a background colour as a back up in case your image doesn't load as no error message will be displayed, just a blank screen.
* We set an image as a background image in the style sheet if it is purely there for aesthetics.
* If the image relates to the content of the page then it should be embedded into the HTML document.
Saturday, July 25, 2009
Week 1, Reading 3:
"Better CSS Font Stacks" by Nathan on 6.26.08
One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.
When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate. From there, the path of your choices may fork depending on the context:
Titles [ greater than 12px ]:
font-family: Ideal, Alternative, Common, Generic;
1. Ideal - Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
2. Alternative - When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
3. Common - At this point, you just need something similar that is not going to break your layout.
4. Generic - Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.
Paragraphs [ less than or equal to 12px ]:
font-family: Ideal, Fit, Common, Generic;
1. Ideal - Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.
2. Fit - Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.
3. Common - Something similar in flavor and well-represented.
4. Generic - Again, finish with the generic classification.
One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.
When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate. From there, the path of your choices may fork depending on the context:
Titles [ greater than 12px ]:
font-family: Ideal, Alternative, Common, Generic;
1. Ideal - Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
2. Alternative - When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
3. Common - At this point, you just need something similar that is not going to break your layout.
4. Generic - Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.
Paragraphs [ less than or equal to 12px ]:
font-family: Ideal, Fit, Common, Generic;
1. Ideal - Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.
2. Fit - Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.
3. Common - Something similar in flavor and well-represented.
4. Generic - Again, finish with the generic classification.
Week 1, Reading 2:
"What is Web 3.0?"
Web 1.0 - "the mostly read only web"
That Geocities & Hotmail era was all about read-only content and static HTML websites. People preferred navigating the web through link directories of Yahoo! and dmoz.
Web 2.0 - "the wildly read-write web"
This is about user-generated content and the read-write web. People are consuming as well as contributing information through blogs or sites like Flickr, YouTube, Digg, etc. The line dividing a consumer and content publisher is increasingly getting blurred in the Web 2.0 era.
Web 3.0 - "the portable personal web"
This will be about semantic web (or the meaning of data), personalization (e.g. iGoogle), intelligent search and behavioral advertising among other things.
Web 1.0 - "the mostly read only web"
That Geocities & Hotmail era was all about read-only content and static HTML websites. People preferred navigating the web through link directories of Yahoo! and dmoz.
Web 2.0 - "the wildly read-write web"
This is about user-generated content and the read-write web. People are consuming as well as contributing information through blogs or sites like Flickr, YouTube, Digg, etc. The line dividing a consumer and content publisher is increasingly getting blurred in the Web 2.0 era.
Web 3.0 - "the portable personal web"
This will be about semantic web (or the meaning of data), personalization (e.g. iGoogle), intelligent search and behavioral advertising among other things.
Week 1, Reading 1:
"Why File Naming is More Important Than You Think" by Craig Buckler.
* Be careful when naming the files and folders for your website as they can inadvertently be trapped by advert blocking programs.
* Avoid advert-like names within your files by thinking about the following:
1. Avoid any word featuring the text 'ad' or 'advert'.
2. Avoid combinations of words featuring
'banner'
'click'
'server'
'bureau'
'syndicate'
3. Avoid numbers with standard banner sizes
e.g. my-image-468x60.jpg
* Test your system using a variety of advert blocking software, e.g. Adblock Plus - a Firefox add-on.
* Be careful when naming the files and folders for your website as they can inadvertently be trapped by advert blocking programs.
* Avoid advert-like names within your files by thinking about the following:
1. Avoid any word featuring the text 'ad' or 'advert'.
2. Avoid combinations of words featuring
'banner'
'click'
'server'
'bureau'
'syndicate'
3. Avoid numbers with standard banner sizes
e.g. my-image-468x60.jpg
* Test your system using a variety of advert blocking software, e.g. Adblock Plus - a Firefox add-on.
Font-size
* CSS has many options for setting the size of font - you can apply keywords, relative values or absolute values.
* Relative Units are: em, ex, px, % or keywords.
* Absolute Units are: mm, cm, in, pt or keywords.
* 72pt = 1 inch in real life (not on your monitor).
* We don't usually use pts to control font size, unless we are using CSS for print, as there are cross browser compatability issues.
* Absolute Keywords are: xx-large, xlarge, large, medium, small, x-small, xx-small.
* Medium is set to the default text size for the browser (except in IE 5.5 or earlier).
* In Industry these are often referred to as T-SHIRT sizes.
* Relative Keywords are: larger and smaller.
* They measure relative to their parent element.
* For example, if the font-size of the body is set to 16px, any element with the font-size set to 'larger' will be larger than 16px.
* Be aware you can run in to problems if you nest elements, although many modern browsers do have thresholds in place.
* Relative Units are: em, ex, px, % or keywords.
* Absolute Units are: mm, cm, in, pt or keywords.
* 72pt = 1 inch in real life (not on your monitor).
* We don't usually use pts to control font size, unless we are using CSS for print, as there are cross browser compatability issues.
* Absolute Keywords are: xx-large, xlarge, large, medium, small, x-small, xx-small.
* Medium is set to the default text size for the browser (except in IE 5.5 or earlier).
* In Industry these are often referred to as T-SHIRT sizes.
* Relative Keywords are: larger and smaller.
* They measure relative to their parent element.
* For example, if the font-size of the body is set to 16px, any element with the font-size set to 'larger' will be larger than 16px.
* Be aware you can run in to problems if you nest elements, although many modern browsers do have thresholds in place.
Font-family
* Using the font-family property allows the designer to specify which font they would PREFER to be used within the HTML document.
* If the end user does not have the specified font then the designer can also specify alternatives, creating a hierarchy of preferred fonts.
* If none of these fonts are available, we can also specify one of the five generic font styles: serif, sans-serif, monospace, cursive and fantasy.
* This does not guarantee that a certain font (or even the same font) will be used in each browser, it merely guarantees that a certain font style will be used.
* If you do include a generic font in your font family options, make sure it is the last option as no font afterwards will be used as a generic one should always be available.
* If none of the specified fonts are available and the designer has not included a generic font in the list, the user agent will render the text using the default generic sans-serif font.
* If the end user does not have the specified font then the designer can also specify alternatives, creating a hierarchy of preferred fonts.
* If none of these fonts are available, we can also specify one of the five generic font styles: serif, sans-serif, monospace, cursive and fantasy.
* This does not guarantee that a certain font (or even the same font) will be used in each browser, it merely guarantees that a certain font style will be used.
* If you do include a generic font in your font family options, make sure it is the last option as no font afterwards will be used as a generic one should always be available.
* If none of the specified fonts are available and the designer has not included a generic font in the list, the user agent will render the text using the default generic sans-serif font.
First CSS Rule
* This video was basically just a recap of the ones before to give us a chance to write a few CSS rules.
* We used the selector 'h1', the property 'color' and the value 'red' to change the colour of all of the header 1 text entries to red, and we used the property 'font-size' and the value '3em' to adjust the size of the header 1 text as well.
* Similarly we used the selector 'p', the 'color' property and the 'blue' value to change the colour of the text inside the paragraph tag.
* We were also reminded to put a semi-colon at the end of each declaration block.
* We used the selector 'h1', the property 'color' and the value 'red' to change the colour of all of the header 1 text entries to red, and we used the property 'font-size' and the value '3em' to adjust the size of the header 1 text as well.
* Similarly we used the selector 'p', the 'color' property and the 'blue' value to change the colour of the text inside the paragraph tag.
* We were also reminded to put a semi-colon at the end of each declaration block.
Inheritance
* This is a core feature of CSS.
* The structure of an HTML document is similar to a family tree and each element can inherit properties from its parent.
* If we insert a style tag into the head tag and enter some rules, for example that all text in the body should be blue, then this value will be inherited by all the elements inside the body tag.
* NB: not every property in CSS is automatically inherited by its child (e.g. border) as it would not make sense. Only the ones that make sense are inherited.
* We can override the inheritance by specifying a new rule, e.g. that all text inside a 'p' tag should be orange.
* Inherited values will always lose out to explicitly specified values.
* The structure of an HTML document is similar to a family tree and each element can inherit properties from its parent.
* If we insert a style tag into the head tag and enter some rules, for example that all text in the body should be blue, then this value will be inherited by all the elements inside the body tag.
* NB: not every property in CSS is automatically inherited by its child (e.g. border) as it would not make sense. Only the ones that make sense are inherited.
* We can override the inheritance by specifying a new rule, e.g. that all text inside a 'p' tag should be orange.
* Inherited values will always lose out to explicitly specified values.
Tuesday, July 21, 2009
CSS Syntax
* CSS is not case sensitive in all matters under its control.
* Some things are not under its control, e.g. end user's operating system or browser.
Embedded CSS
* Code is written inside a style tag placed inside the head tag.
* The CSS rules are then written within the opening and closing style tags.
* It is good practise to put comment tags around the rules.
* This is because some older browers and mobile browers don't support CSS.
* Each RULE SET contains a selector and one or more declaration blocks.
* Each declaration block has a property and a value, e.g. color:#00CC33
* Each declaration block is followed by a semi colon.
* Values can be keywords, strings, colours, numbers, URLs, links, precentages, etc.
* Many CSS properties can have a keyword as a value.
* The keyword is called an IDENTIFIER.
* The IDENTIFIER must never be surrounded by quotation marks.
* Some things are not under its control, e.g. end user's operating system or browser.
Embedded CSS
* Code is written inside a style tag placed inside the head tag.
* The CSS rules are then written within the opening and closing style tags.
* It is good practise to put comment tags around the rules.
* This is because some older browers and mobile browers don't support CSS.
* Each RULE SET contains a selector and one or more declaration blocks.
* Each declaration block has a property and a value, e.g. color:#00CC33
* Each declaration block is followed by a semi colon.
* Values can be keywords, strings, colours, numbers, URLs, links, precentages, etc.
* Many CSS properties can have a keyword as a value.
* The keyword is called an IDENTIFIER.
* The IDENTIFIER must never be surrounded by quotation marks.
CSS - Cascading Style Sheets
* Main purpose - to control the appearance of MULTIPLE HTML documents.
* It separates the structure of the site from the presentation of the site.
* The structure of the site relates to the content of the document - text, images, etc.
* The presentation of the site relates to its appearance.
* We create a set of STYLES or RULES in one CSS file.
* Then we link this CSS file to all our HTML files using a line of code inside the head tag:
link href="styles.css" rel="stylesheet" type="text/css" (inside a self-closing tag)
* 'rel' and 'type' just specify what type of document is being linked.
* If you change a rule in the CSS file, the change will 'cascade" through all the HTML pages.
* It separates the structure of the site from the presentation of the site.
* The structure of the site relates to the content of the document - text, images, etc.
* The presentation of the site relates to its appearance.
* We create a set of STYLES or RULES in one CSS file.
* Then we link this CSS file to all our HTML files using a line of code inside the head tag:
link href="styles.css" rel="stylesheet" type="text/css" (inside a self-closing tag)
* 'rel' and 'type' just specify what type of document is being linked.
* If you change a rule in the CSS file, the change will 'cascade" through all the HTML pages.
XML - Extendable Markup Language
XML is like HTML but with some key differences. It is not designed to replace HTML as it was designed with different goals in mind.
* XML was designed to CARRY data not display data like HTML.
* XML has no predefined tags, the user must define their own tags.
* XML was designed to be self descriptive.
* XML is endorsed by W3C.
* XML was designed to CARRY data not display data like HTML.
* XML has no predefined tags, the user must define their own tags.
* XML was designed to be self descriptive.
* XML is endorsed by W3C.
Naming Conventions
* Do not use spaces in file names.
* Browsers will replace the spaces with %20.
* Better practise is to use _ or - instead of spaces.
* Or even better just use one word.
* Also try and avoid using & or @ or % symbols or similar.
* Avoid using capital letters for readability as some browsers are case sensitive.
* There is no real difference between .htm and .html file names.
* Just be consistent with your naming.
* Browsers will replace the spaces with %20.
* Better practise is to use _ or - instead of spaces.
* Or even better just use one word.
* Also try and avoid using & or @ or % symbols or similar.
* Avoid using capital letters for readability as some browsers are case sensitive.
* There is no real difference between .htm and .html file names.
* Just be consistent with your naming.
Subscribe to:
Comments (Atom)
