IMY 110 Theme 6 Cascading Style Sheets

Size: px

Start display at page:

Download "IMY 110 Theme 6 Cascading Style Sheets"

Shanon Booth
6 years ago
Views:

1 IMY 110 Theme 6 Cascading Style Sheets

2 1. Cascading Style Sheets 1.1. Cascading Style Sheets Up to now we have done styling by using the style attribute. e.g. <p style = color:blue >paragraph</p> What we were actually using was a simple form of Cascading Style Sheets(CSS) called inline styling. We are going to look at three different approaches of allying CSS styling to an HTML document: Inline External Style Sheets Embedded Style Sheet (internal) 1.2. Inline Style Sheets Inline styles Sheets is the official name for the styling that we have done up to now, and is done on a tag by tag basis. The styling is placed inside the tag. <tag style = "property:value; property:value"> </tag> e.g. <p style = "color:navy; font-size:16pt; font-family:verdana"> Lorem Ipsum make it stop!</p> 1.3. Embedded Style Sheets These style sheets are also referred to as internal or nested style sheets. To use an embedded style sheet, you define a style block in the head of the document: <style type = text/css > all styling comes here </style> 1.4. External Style Sheets You can keep your style sheet in a separate file and link to it from a document or set of documents, using a <link> tag in the <head> section of the linking document, as follows:

3 <link rel = stylesheet type = text/css href = mystyle.css /> The text file is saved as *.css

4 2. CSS Structure A CSS document or a nested CSS script consists of a list of style rules. A style rule has two parts: A selector that identifies an HTML or group of s A declaration of the style properties to be applied to that selector The generic syntax for a style rule is as follows: Instead of saying: selector {property:value; property:value; } <body> </body> <p style = color:white; font-family:arial; font-style:italic > I am a paragraph yay! </p> We can say: <head> </head> <body> </p> </body> <style type = text/css > p {color:white; font-family:arial; fontstyle:italic} </style> <p> I am the same looking paragraph yay! 2.1. CSS style sheet hierarchy The ideal use of the different types of Style sheets would be to use an external stylesheet for styling a whole website. An embedded style sheet could then be used to override or extend this styling for one document. Inline styling can be used when you want to affect the formatting of only a small number of distinct s. Here it becomes apparent that there is a CSS hierarchy of importance: 1. Inline Styles 2. Embedded Style Sheets 3. External Style Sheets

5 2.2. CSS Comments CSS comments look different from normal HTML comments. e.g. <style type = text/css > /* This is a CSS comment! */ </style> 3. Advanced CSS Styling 3.1. Selector Classes Imagine we want to have two different looking paragraph styles that we are going to use equally often. The easiest would be to define two different types of paragraph styles, woudn't it? We can achieve this with selector classes. Example: To create a paragraph class that makes the paragraph red and aligns it to the center: p.redcenter {color:red; text-align:center} To create another paragraph class that makes the paragraph bold and arial: p.boldarial {font-weight:bold; font- family: arial} Where we now create the paragraphs: <p class = redcenter > I am a friendly red centered paragraph! </p> <p class = boldarial > I am an unfriendly bold arial paragraph, for some reason... </p> We can also combine classes: <p class = redcenter boldarial > I am a confused red centered bold <br/> arial paragraph gasp! </p>

6 You can also omit the tag name in the selector to define a style that will be used by all HTML s that have that class:.centeritalic { text-align:center; font-style:italic} Now different types of tags can have the same style: <h1 class = centeritalic > I m HEADING italically towards the center, get it?! </h1> <p class = centeritalic > Look at me I m centered and italic! </p> 3.2. Pseudo-Classes Pseudo-classes are used to add special effects to certain selectors. The syntax is as follows: selector:pseudo-class {property:value; } Or if used with normal classes: selector.class:pseudo-class {property:value; } Example: Anchor Styling Pseudo-class example with anchors: <style type = text/css > a:link {color:red} a:visited {color:green} a:hover {color:yellow} a:active{color:blue} </style> NB To be effective, these style rules MUST be in this order

7 Pseudo- class :active Purpose Adds special style to an activated :focus Adds special style to an while the has focus :hover Adds special style to an when you mouse over it :link Adds special style to an unvisited link :visited Adds special style to a visited link :first-child :lang Adds special style to an that is the first child of some other Allows the author to specify a language to use in a specified 3.3. Pseudo-Elements Pseudo-s are also used to add special effects to certain selectors. The syntax is the same as for pseudo-classes: selector:pseudo- {property:value; } Or if used with normal classes: selector.class:pseudo- {property:value; } Example: <style type = text/css > p.myclass:first-line {color:blue} p:first-letter {font-weight:bold} </style> In the <body>: <body> <p class = myclass > A lovely paragraph <br/> chopped in half! AAAH!!!

8 </p> </body> Pseudo- elemen t :first-letter Purpose Adds special style to the first letter of a text :first-line Adds special style to the first line of a text :before Inserts some content before an :after Inserts some content after an

9 4. CSS for different Elements 4.1. Background Property background backgroundposition backgroundattachment background-color A shorthand property for setting all background properties in one declaration Sets whether a background image is fixed or scrolls with the rest of the page Sets the background color of an background-color background-image background-repeat background-attachment background-position scroll fixed color-rgb color-hex color-name transparent background-image backgroundrepeat Sets an image as the background Sets the starting position of a background image Sets if/how a background image will be repeated url(url) none top left top center top right center left center center center right bottom left bottom center bottom right x y xpos ypos repeat repeat-x repeat-y no-repeat Property border border-color border-style border-width 4.2. Border A shorthand property for setting all of the properties for the four borders in one declaration Sets the color of the four borders, can have from one to four colors Sets the style of the four borders, can have from one to four styles A shorthand property for setting the width of the four borders in one declaration, can have from one to four values border-width border-style border-color color none hidden dotted dashed solid double groove ridge inset outset thin medium thick

10 Property height line-height max-height max-width min-height min-width width 4.3. Dimension Sets the height of an Sets the distance between lines Sets the maximum height of an Sets the maximum width of an Sets the minimum height of an Sets the minimum width of an Sets the width of an normal number none none Property font font-family font-size font-sizeadjust font-style 4.4. Font A shorthand property for setting all of the properties for a font in one declaration A prioritized list of font family names and/or generic family names for an Sets the size of a font Specifies an aspect value for an that will preserve the x- height of the first-choice font Sets the style of the font font-style font-variant fontweight font-size/line-height font-family caption icon menu message-box small-caption status-bar family-name generic-family xx-small x-small small medium large x-large xx-large smaller larger none number normal italic oblique font-variant font-weight Displays text in a small-caps font or a normal font Sets the weight of a font normal small-caps normal bold bolder lighter

11 Property list-style 4.5. Lists A shorthand property for setting all of the properties for a list in one declaration Sets an image as the list-item marker Sets where the list-item marker is placed in the list Sets the type of the list-item marker list-style-type list-style-position list-style-image none url inside outside none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha 4.6. Margins Property margin markeroffset list-styletype list-styleposition list-styleimage marginbottom margin-left margin-right margin-top A shorthand property for setting the margin properties in one declaration Sets the bottom margin of an Sets the left margin of an Sets the right margin of an Sets the top margin of an margin-top margin-right margin-bottom margin-left

12 4.7. Positioning Property bottom clip left overflow position right top verticalalign z-index Sets how far the bottom edge of an is above/below the bottom edge of the parent Sets the shape of an. The is clipped into this shape, and displayed Sets how far the left edge of an is to the right/left of the left edge of the parent Sets what happens if the content of an overflow its area Places an in a static, relative, absolute or fixed position Sets how far the right edge of an is to the left/right of the right edge of the parent Sets how far the top edge of an is above/below the top edge of the parent Sets the vertical alignment of an Sets the stack order of an shape visible hidden scroll static relative absolute fixed baseline sub super top text-top middle bottom text-bottom number

13 4.8. Table Property borderspacing bordercollapse caption-side Sets whether the table borders are collapsed into a single border or detached as in standard HTML Sets the distance that separates cell borders (only for the "separated borders" model) Sets the position of the table caption collapse separate top bottom left right empty-cells table-layout Sets whether or not to show empty cells in a table (only for the "separated borders" model) Sets the algorithm used to display the table cells, rows, and columns show hide fixed

14 4.9. Text Property color line-height letter-spacing text-align texttransform textdecoration text-indent text-shadow white-space word-spacing Sets the color of a text Sets the distance between lines Increase or decrease the space between characters Aligns the text in an Adds decoration to text Indents the first line of text in an Controls the letters in an Sets how white space inside an is handled Increase or decrease the space between words color normal number normal left right center justify none underline overline line-through blink none color none capitalize uppercase lowercase normal pre nowrap normal

Appendix D CSS Properties and Values

HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by