* 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.
Subscribe to:
Posts (Atom)
