Unit10: CSS |
|
2009-10 |
|
Menu |
NotesWhat is or are CSS?CSS stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. Once the style is defined in cascading style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to change styles across several pages at once. For example, a Web developer may want to increase the default text size from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the same style sheet, the text size only needs to be changed on the style sheet and all the pages will show the larger text. While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page layout as well. For example, CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table's border, and the padding around images or other objects. CSS gives Web developers more exact control over how Web pages will look than HTML does. This is why most Web pages today incorporate cascading style sheets. Access on-line tutorials hereWhat on earth is the CSS Box Model?Here's a link to the TechRepulic's explanation, with illustrations to start with http://articles.techrepublic.com.com/5100-10878_11-6105783.html A nice illustration from The Red Melon http://redmelon.net/tstme/box_model/ And the best explanation of all + some useful comments about browsers! http://www.addedbytes.com/css/box-model/ What are the CSS Implementation styles?In other words, how do you actually use CSS in a web page to get it to do what you want? There are three types of CSS styles: inline styles Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to. <a href="" style="text-decoration: none;"> embedded styles Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. <style type="text/css"> external styles External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to. <link rel="stylesheet" type="text/css" href="styles.css" /> CSS best practices recommends that you use primarily external style sheets for styling Web pages so that you get the most benefit of the cascade and inheritance. Here's a good link to these methods of using CSS. Assignment task examples
|
Page updated 30 October, 2009 Content and design © Andrew Hill |
|