HTML Style Sheet - GraceLand
HTML Mock-Up
| |Page Template |
| | |
| | |
| | |
| | |
| | |
| ENTER YOUR WINDOW TITLE HERE | |
| | |
| or | |
| | |
|…all style rules here… | |
| | |
| | |
| | |
| | |
| | |
|ENTER ALL YOUR | |
|WEB PAGE CONTENT HERE | |
| | |
| | |
| | |
|Validate: | |
|HTML5 | |
|CSS3 | |
| | |
| | |
| | |
| | |
|p |The font-size |
|{ |
|font-size: 14pt; |al=small |
|} | |
[pic]
|Sans-Serif |Font Families |
|Arial, sans-serif; | |
|Helvetica, sans-serif; | |
|Gill Sans, sans-serif; | |
|Lucida, sans-serif; | |
|Helvetica Narrow, sans-serif; | |
|sans-serif; | |
|Serif | |
|Times, serif; | |
|Times New Roman, serif; | |
|Palatino, serif; | |
|Bookman, serif; | |
|New Century Schoolbook, serif; | |
|serif; | |
|Monospace | |
|Andale Mono, monospace; | |
|Courier New, monospace; | |
|Courier, monospace; | |
|Lucidatypewriter, monospace; | |
|Fixed, monospace; | |
|monospace; | |
|Cursive | |
|Comic Sans, Comic Sans MS, cursive; | |
|Zapf Chancery, cursive; | |
|Coronetscript, cursive; | |
|Florence, cursive; | |
|Parkavenue, cursive; | |
|cursive; | |
|Fantasy | |
|Impact, fantasy; | |
|Arnoldboecklin, fantasy; | |
|Oldtown, fantasy; | |
|Blippo, fantasy; | |
|Brushstroke, fantasy; | |
|fantasy; | |
|] | |
| { | |
|background-color: #E6E6FA; |Page Background |
|color: #191970; |Text Color |
|font-family: Arial, Verdana, sans-serif; |Text Font |
|} | |
|Text |Inline (somewhere in body) |
|h1 | |
|{ | |
|background:blue; |Headline background color |
|color:yellow; |Headline text color |
|} | |
|h1 |CSS border Property |
|{ | |
|border-width:2px; |If used with a BLOCK ELEMENT (e.g., h1, h2, p, div, ...), the border |
|border-style:solid; |extends to browser’s margin (or specified width) |
|border-color:#ff0000; | Heading with Border |
|} | |
| |If used with an INLINE ELEMENT (e.g., a, i, em, b, span, ...), the border |
| |closely outlines the element content |
| | This anchor tag has a border |
|h2 |Configuring Specific Sides of a Border |
|{ | |
|border-bottom-width: 2px; |Use CSS to configure a line on one or more sides of an element |
|border-bottom-style: solid; |border-bottom |
|border-bottom-color: red; |border-left |
|} |border-right |
| |border-top |
| |The CSS padding Property |
| | |
| |Configures empty space between the content of the HTML element and the |
| |border |
| |Padding is set to zero by default |
| | |
|h2 | |
|{ | |
|border:2px solid #ff0000; |Example: Without Padding |
|} | |
| | |
|h2 | |
|{ | |
|border:2px solid #ff0000; |Example: With 5px of Padding |
|padding:5px; | |
|} | |
|h2 |Use CSS to configure padding on one or more sides of an element |
|{ |padding-bottom |
|border: 2px solid #ff0000; |padding-left |
|background-color: #cccccc; |padding-right |
|padding-left: 5px; |padding-top |
|padding-bottom: 10px; | |
|padding-top: 10px; | |
|} | |
|.new |Use class selector |
|{ |It applies CSS to a certain "class" of elements on a Web page |
|color:#FF0000; |Does not associate the style to a particular tag element |
|font-style: italic; |Configure with .classname (prefixed with a dot) |
|} |The sample creates a class called “new” with red italic text. Note: the |
| |dot (.) is not part of the id’s name. |
| |To use the class above , code the following HTML: |
| | |
| | This is text is red and in italics |
|#new |id selectors in CSS |
|{ | |
|color: #FF0000; |Use id selector - Applies a CSS rule to ONE element on a Web page (unique |
|font-size:2em; |ID) |
|font-style: italic; |Configure with #idname (prefixed with #) - The sample creates an id called|
|} |“new” with red, large, italic text. Note: the # is not part of name. To |
| |use this id, code the following HTML (without #): |
| | |
| | This is text is red and in italics |
|p {…} - Applies to all p elements (only one element selector) |Selector Variations |
|h1,h2,h3 {…} - Applies to all h1,h2, and h3 elements (multiple elements) | |
|.note {…} - Applies to any element that has class="note" | |
|p.note {…} - Applies to any p element that has class="note" | |
|#footnotes {…} - Applies to the one element that has id="footnotes" | |
|p#footnotes {…} - Applies to whichever p element has id="footnotes" (This| |
|would be weird since there is little point in including the p) | |
|footer |CSS Contextual Selector Example |
|{ | |
|color:green; |To use this id, code the following HTML (without #): |
|} | |
| | |
| |Questions? |
| | |
| | |
| |(Key Concept—Contextual selectors help us reduce the number of classes and|
| |ids) |
|#container |Centering Page Content with CSS |
|{ | |
|margin-left: auto; | |
|margin-right: auto; | |
|width:80%; | |
|} | |
|Embedded style examples: |Margin Sizes - Margin sizes (like other size properties) can be given in |
| |units of pt, in, cm or px |
|body | |
|{ | |
|margin-top:50px; | |
|margin-bottom:50px; | |
|margin-left:100px; | |
|margin-right:100px; | |
|} | |
| | |
|Inline style examples (alternative to 3rd example above) | |
| | |
| | |
|img |Browsers automatically add a border to image links, but you can configure |
|{ |CSS to eliminate the border |
|border-style:none; | |
|} | |
|figure |Configure border & padding for an image |
|{ | |
|width: 640px; | |
|border: 1px solid #000000; | |
|padding: 5px; | |
|} | |
|figcaption |Configure a caption for an image |
|{ | |
|text-align: center; | |
|font-family: Papyrus, fantasy; | |
|} | |
|body |Configures a background-image = |
|{ | |
|background-image: url(background1.gif); | |
|} | |
|h2 { |Using background-repeat |
|background-color: #d5edb3; | |
|color: #5c743d; | |
|font-family: Georgia,Times New Roman,serif; | |
|padding-left: 30px; | |
|background-image: url(trilliumbullet.gif); | |
|background-repeat: no-repeat; | |
|} | |
|body |Multiple Background Images |
|{ | |
|background-color: #f4ffe4; | |
|color: #333333; | |
|background-image: url(trilliumgradient.png); | |
|background: url(trilliumfoot.gif) | |
|no-repeat bottom right, | |
|url(trilliumgradient.png); | |
|} | |
|h1 |Rounded Corners |
|{ |-webkit-border-radius (for Safari & Chrome) |
|-webkit-border-radius: 15px; |-moz-border-radius (for Firefox) |
|-moz-border-radius: 15px; |border-radius (W3C syntax) |
|border-radius: 15px; | |
|} | |
|#wrapper |box-shadow Property |
|{ | |
|-webkit-box-shadow: 5px 5px 5px #828282; | |
|-moz-box-shadow: 5px 5px 5px #828282; | |
|box-shadow: 5px 5px 5px #828282; | |
|} | |
|h1 |opacity Property |
|{ background-color: #FFFFFF; |- Configure the opacity of the background color |
|opacity: 0.6; |Opacity range: |
|} |0 Completely Transparent |
| |1 Completely Opaque |
| |horizontal offset, |
| |vertical offset, blur radius, |
| |and valid color value |
|{ |Relative Positioning - Changes location of an element in relation to where|
|position: relative; |it would otherwise appear |
|left:30px; | |
|font-family:Arial,sans-serif; | |
|} | |
|{ |Absolute Positioning - Precisely specifies the location of an element |
|position: absolute; |within the browser window |
|left:200px; | |
|top:100px; | |
|font-family:Arial,sans-serif; | |
|width:300; | |
|} | |
|h1 { |float Property |
|background-color:#cccccc; | |
|padding:5px; |Elements that seem to “float" to the right or left side of the window or |
|color: #000000; |an element within it are often configured using the float property. |
|} | |
|p { | |
|font-family:Arial,sans-serif; | |
|} | |
|#yls { | |
|float: right; | |
|margin: 0 0 5px 5px; | |
|border: solid; | |
|} | |
| |Navigation links in an Unordered List |
| | |
|Home | |
|Menu | |
|Directions | |
|Contact | |
| | |
| | |
|#leftcolumn ul { list-style-type: none; } |CSS removes the list marker and underline |
|#leftcolumn a { text-decoration: none; } | |
| |Navigation links in an Unordered List |
| | |
|Home | |
|Menu | |
|Directions | |
|Contact | |
| | |
| | |
|HTML Attribute |CSS Property |
|.shadow |The box-shadow property can specify one or more drop shadows. The |
|{ |components of each shadow are interpreted as follows: |
|box-shadow: 3px 3px 5px 6px #ccc; |Required: The first length is the horizontal offset of the shadow. A |
|} |positive value draws a shadow that is offset to the right of the box, a |
| |negative length to the left. |
| |Required: The second length is the vertical offset. A positive value |
| |offsets the shadow down, a negative one up. |
| |Optional: The third length is a blur distance. Negative values are not |
| |allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise,|
| |the larger the value, the more the shadow's edge is blurred. |
| |Optional: The fourth length is a spread distance. Positive values cause |
| |the shadow shape to expand in all directions by the specified radius. |
| |Negative values cause the shadow shape to contract. |
| |Optional: The color is the color of the shadow. |
| |Optional: An inset keyword, if present, changes the drop shadow from an |
| |outer shadow (one that shadows the box onto the canvas, as if it were |
| |lifted above the canvas) to an inner shadow (one that shadows the canvas |
| |onto the box, as if the box were cut out of the canvas and shifted behind |
| |it) |
|background-image1 |Background image (left is default) |
|{ | |
|background-position:top center | |
|} | |
|background-image2 | |
|{ | |
|background-position:top right | |
|} | |
|Pseudo-class |Purpose |
|:first-of-type |Applies to the first element of the specified type |
|:first-child |Applies to the first child of an element (CSS2 selector) |
|:last-of-type |Applies to the last element of the specified type |
|:last-child |Applies to the last child of an element |
|:nth-of-type(n) |Applies to the “nth” element of the specified type |
| |Values: an integer number, odd, or even |
|tr: nth-of-type(even) { |To Zebra Stripe a Table |
|background-color: #eaeaea; | |
|} | |
|#nav ul { list-style-type: none;} |CSS that removes the list marker and underline, adds padding, and |
|#nav a { text-decoration: none; |configures items for inline display (horizontal) |
|padding-right: 10px; } | |
|#nav li { display: inline; } | |
|#nav ul { list-style-type: none;} | |
|#nav a { text-decoration: none; | |
|padding-right: 10px; } | |
|#nav li { display: inline; }- horizontal display | |
| | |
| | |
| | |
|background-color: #8FA5CE; |Gradients |
|background-image: |a smooth blending of shades from one color to another |
|-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), |Use the background-image property |
|to(#8FA5CE)); |linear-gradient() |
|background-image: -moz-linear-gradient(top, #FFFFFF, #8FA5CE); |radial-gradient() |
|filter: progid:DXImageTransform.Microsoft.gradient | |
|(startColorstr=#FFFFFFFF, endColorstr=#FF8FA5CE); | |
|linear-gradient(#FFFFFF, #8FA5CE); | |
|body |CSS background-image Property |
|{ | |
|background-image: url(background1.gif); | |
|} | |
|h2 { |Using background-repeat |
|background-color: #d5edb3; | |
|color: #5c743d; | |
|font-family: Georgia,Times New Roman,serif; | |
|padding-left: 30px; | |
|background-image: url(trilliumbullet.gif); | |
|background-repeat: no-repeat; | |
|} | |
|body { |CSS3 Multiple Background Images |
|background-color: #f4ffe4; | |
|color: #333333; | |
|background-image: url(trilliumgradient.png); | |
|background: url(trilliumfoot.gif) | |
|no-repeat bottom right, | |
|url(trilliumgradient.png); | |
|} | |
|#yls { |float Property |
|float: right; | |
|margin: 0 0 5px 5px; | |
|border: solid; | |
|} | |
|a:link {color:#000066;} |Pseudo-classes and the anchor element - and more than just the color can |
|a:visited {color:#003366;} |be changed (font style, size, background image, and most anything) |
|a:focus {color:#FF0000;} | |
|a:hover {color:#0099CC;} | |
|a:active {color:#FF0000;} | |
[pic]
| |hgroup element |
| | |
|Lighthouse Island Bistro | |
|the best coffee on the coast | |
| | |
| | |
| |Elative Link |
|Contact | |
| | |
| |Opening a Link |
|Yahoo! |in a New Browser Window |
| | |
|{ |Placing background image – default is left |
|background-position:top center/right | |
|} | |
|Left-column navigation |Three Column Layout |
|float: left; width:150px; |[pic] |
|Right-column content | |
|float: right; width: 200px; | |
|Center column | |
|No float/width – uses remaining available width that’s unused by the | |
|floating columns | |
|margin: 0 210px 0 160px; | |
|Footer – clears the float | |
|clear: both; | |
HTML Code
| |Line Break |
|Heading Level 1 |The Heading Elements |
|Heading Level 2 | |
|Heading Level 3 | |
|Heading Level 4 | |
|Heading Level 5 | |
|Heading Level 6 | |
| …paragraph goes here… |The Paragraph Element |
| | |
| Sentence1. Sentence2. …more sentences… | |
|Last sentence. | |
| | |
| |The blockquote |
|…text goes here… | |
| | |
|Text |div element - Configures a structural block area or “division” on a web |
| |page with empty space above and below. |
| |HTML Unordered List - Displays itemized information with bullet points. |
|Item 1 | |
|Item 2 | |
|Item 3 | |
|Item 4 | |
| … | |
| | |
| |HTML Ordered List –Numbered List |
|Item 1 | |
|Item 2 | |
|Item 3 | |
|Item 4 | |
| … | |
| | |
| |HTML Description List - Useful to display a list of terms and definitions |
|Question |or a list of FAQ and answers. Each term/phrase starts on a new line. Each |
|Answer |description (following the term) is indented |
|Question | |
|Answer | |
|Question | |
|Answer | |
| | |
|Yahoo |Absolute link - Link to other Web sites |
|Home |Relative link - Link to pages on your own site |
| |Email Links |
|me@ | |
| |Inline (somewhere in body) |
|Useful for Windows, Mac, Other, and Generic choices: |The font-family Property |
|font-family: Arial, Geneva, Helvetica, sans-serif | |
|font-family: Times New Roman, Times, serif | |
|font-family: Courier New, Courier, fixed, monospace | |
|font-family: Comic Sans, Comic Sans MS, cursive | |
|Margin:0 auto 0 auto |Margins |
| | |
|Top left bottom right | |
| |Configures a horizontal line |
|.name | |
|#name | Text (Applies a CSS rule to ONE element on a Web page) |
|background-color |Some common CSS properties (see table 3.1) |
|color | |
|line-height | |
|margin | |
|text-align | |
|text-decoration | |
|width | |
|font-weight - Configures the boldness of text | |
|font-style - Configures text to an italic style | |
|font-size - Configures the size of text | |
|font-family - Configures the default typefaces of text | |
| |HTML Image Element |
| | |
| |src attribute – identifies the file name of the graphic |
| |alt attribute – Configures alternate text content (description) |
| |height attribute – sets the height of the graphic in pixels |
| |width attribute – sets the width of the graphic in pixels |
| | |
| |Required: Configure the alt attribute |
| |Alternate text to convey meaning/intent of the image |
| |Don’t use the file name of the image (non-descriptive) |
| |Use alt="" for purely decorative images (no text) |
| |Image Links |
| ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.