 The Internet
Digest |
|
CSS TutorialBasicsWhat is CSS?CSS stands for Cascading Style Sheets. A style defines how an HTML element is displayed. Style information can be stored:
Why use CSS?A web page consists of two basic components - the Content (or information you wish to display) and the Style (the way if which you wish the content to be displayed). CSS allows you to separate Content from Style. It's even possible to have more than one style sheet - thus allowing you to have more than one way of displaying a page. If all of the style information is retained within one external style sheet, it is possible to edit that one file and make sweeping changes (such as changing background and/or text colours) that affect hundreds of related web pages without having to touch a single HTML file You can define a style for any HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all relevant elements on every page are affected automatically. Multiple Styles Cascade Into OneSince you can specify CSS information in a number of ways, it is possible to utilise all three CSS methods as required. When you do utilise more than one CSS methodology (eg. using both external and inline style on the one web page), the multiple styles will cascade. This means that they will merge together to form a complete 'virtual' set of style instructions. Generally speaking, styles using the following rules in descending priority:
So, an inline style declaration has the highest priority and will override any declared internal or external style for the same HTML element and any default style properties normally applied by the browser.
Syntax
Selectors, properties & valuesCSS syntax is made up of three parts:
The way in which these are used is: You don't have to have each property/value pair on a separate line but it does increase readability - especially in long, complex style sheets. For example, to set a black background, you would use: where #000000 is the hexadecimal code for black. If the value you want to use contains white space multiple words, put quotes around the value: You can specify more than one property in a given declaration. The example below shows how to define a center aligned paragraph of italicised text. You can group selectors by separate them with commas. In the example below, all the header elements have been defined as white: However, whenever you do define a text colour, it is advisable to also define a background colour and vice versa. This can ensure that your text remain readable. Now your white header text will always be on a black background - even if the rest of your page has a white background. The class selectorWith the class selector you can define different styles for the same type of HTML element. For example, you want two types of paragraphs in your document: one italicised and one bold. Now, when you want to use either of the above styles in a web page, you can do the following However, you can only specify one class attribute per HTML element at any one time! The example below is the wrong way of trying to get bold, italicised, text: The correct method would be to define a third class selector. And then use: Making selector classes available to multiple HTML elementsIf you omit the tag name in a selector, you open it up to be used by any HTML element. For example, the following class: can be used with any tag as appropriate. can all be used in the same document. Use class selectors where you think you will need to re-apply the same style more than once in a given document. If you think that you will need to use the style with different HTML elements, don't include any tag names in the class selector declaration. The id selectorThe id selector is different from the class selector. While a class selector may be applied to many elements in a given document, an id selector can only be applied to only one element within a given document ie. it must be unique within the document. The style rule below will match a p element that has the id value 'para1': The style rule below will match the first element that has the id value 'green': So you could have: in the same document. But having: would be illegal as you would have attempted to repeat the id selector '#green'. Use id selectors for styles that you are sure you'll only need once in a given document. CSS CommentsYou can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. Comments are ignored by the browser and begin with "/*", and ends with "*/".
UsageOverviewThere are three ways of inserting style information:
External Style SheetsExternal style sheets are the best method when you want the style to be applied to many pages. With an external style sheet, you can change the look of an entire web site by changing one external style sheet file. Each HTML document that you want to apply these styles to must contain a link to the style sheet using the <link> tag inside the <head></head> section: The browser will read the style definitions from the file mystyle.css, and format the HTML document accordingly. An external style sheet can be written in any text editor and saved with a .css extension. An example of the external style sheet for this section can be seen here Internal Style SheetAn internal style sheet should be used when a single document has a unique style. You define internal styles in the <head></head> section by using the <style> tag, like this: The browser will now read the style definitions, and format the document according to it. If the document also contains a link to an external style sheet, the internal style declarations will over-ride any similar declarations within the external sheet. This can be helful when you wish to re-adjust the style of a single page - for example, alter the padding on the body tag. Inline StyleAn inline style loses many of the advantages of style sheets by mixing content with presentation. Therefore, you should use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles, you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font-style and the left margin of a paragraph: Inline style will overide both internal and external style declarations. Multiple Style SheetsIf some properties have been set for the same selector in different style sheets, the final value will be inherited according to the rules of Cascading Style For example, an external style sheet has these properties for the h3 selector: And an internal style sheet has these properties for the h3 selector: And an inline style declaration reads: The final values will be:
Example: a simple style sheet .
As a female-led consultancy, Black Widow Web Design specialises in providing web services to women managed businesses, communities and social enterprises. Their specialist skills also include designing sites with high accessibility levels.
|
|