This isn't an exhaustive guide to CSS, its just a few useful notes used to enhance Pier.
Notes from a CSS book by Eric Meyer. Most of the notes are written as examples.
It can either be added in the head section, or as part of an html element (which may be deprecated soon). In the head section, it can be used as:
<style type="text/css">
@import url(ExternalFile.css);
h1 {color: maroon;}
body {background: yellow;}
/*Example Comment*/
</style>
<link rel="stylesheet" type="text/css" href="ExternalFile.css" media="all" />For the media option above (
media="all"), other options are:CSS files are made of import directives, followed by rules. Rules are made of selectors followed by a declaration block. Declarations are made of property: value pairs. An example would be:
h1 {color: red; background: yellow;}Here h1 is the selector, the curly braces start and end the declaration block, and color: is the first property, and yellow is the last value.
Here is an example: <span style="color: red; background: yellow"> inline CSS from page 21 and colors from page 24</span>, and it looks like: inline CSS from page 21 and colors from page 24.
Selectors can include a class selector, such as:
span.classSelectorExample1 {font-weight: bold}This would make html such as: <p>This text contains an <span class="classSelectorExample1">example of a classSelectorExample1</span> from page 32.</p>look like:
This text contains an example of a classSelectorExample1 from page 32.
Some elements may match more than one rule. For example consider the following rules: =.multipleClassesWarning {font-weight: bold;}
.multipleClassesUrgent {font-style: italic;}
.multipleClassesWarning.multipleClassesUrgent {background: silver;}with the following html:
<blockquote>This sentence is normal. <span class="multipleClassesWarning">This sentence is a warning.</span> <span class="multipleClassesUrgent">This sentence is urgent.</span> <span class="multipleClassesWarning multipleClassesUrgent">This sentence is both warning and urgent.</span> <span class="multipleClassesUrgent multipleClassesWarning">This sentence is both urgent and warning.</span></blockquote>
which will look like:
This sentence is normal. This sentence is a warning. This sentence is urgent. This sentence is both warning and urgent. This sentence is both urgent and warning.
These only seem useful for a single element, such as:
<ul><li>first item</li><li id="idExampleForItem">ID example from page 36</li></ul>Then a CSS file with:
#idExampleForItem {color: green;}
would render the list as:
These are very general, however they aren't supported by IE prior to version 6. This is a test of your browser: html:
<ul>
= <li class="attrSelectorSimple">Simple Attribute from page 38</li> = <li class="attrSelectorClassId" id="test">Has class and id Attributes from page 39</li> = <li class="attrSelector PatternMatch">This one has an attribute that matches the word "PatternMatch" - from page 41</li> = <li class="attributeSelectorStart">This one has an attribute that starts with "attribute..." - from page 42</li>
</ul>
CSS:
li[class] {font-weight: bold;}
li[class][id] {color: red;}
li[class~="PatternMatch"] {font-style: italic;}
li[class^="attribute"] {background: green;} /* ^= means starts with; $= means ends with; *= means contains */
/* |= means start with X or X-, ie [lang!=en] matches 'lang="en"' or 'lang="en-..."' /*Rendered:
This allows decendents and children. As an example, consider this CSS:
/* From the Decendant selectors on page 46 */
blockquote.DescendentSelectorExample em {background: pink;}
/* Any emphasize found anywhere within a descendantExample blockquote is pink*/With this html:
<blockquote class="DescendentSelectorExample"> <em>First child</em> of the preformatted is an em.<br /> <span>The <em>second child</em> is a line break, <em>third child</em> is a span.</span> </blockquote>
it will show:
First child of the preformatted is an em.
The second child is a line break, third child is a span.
/* From selecting children on page 48 */
blockquote.ChildSelectorExample > em {background: red;}
/* Any emphasize child of a childExample blockquote is red */With the same html (with the blockquote class changed):
First child of the preformatted is an em.
The second child is a line break, third child is a span.
/* From the Sibling selectors on page 48 */
blockquote.SiblingSelectorExample em \+ em {background: green;}
/* Any emphasize found following another emphasize within the siblingExample blockquote is green */
For the following html:
<blockquote class="SiblingSelectorExample"> <em>This is the first em. </em><em>Followed by another em. </em> Some text inbetween. <em>Another em</em> <br /><em> A fourth em which is followed by </em><em>the last em.</em> <br /><span>IE6 <em>doesn't</em> support <em>sibling selectors</em><span> </blockquote>this is shown:
This is the first em. Followed by another em. Some text inbetween. Another emIf you just look at the tags, the structure is:
A fourth em which is followed by the last em.
IE6 doesn't support sibling selectors
<blockquote> <em> This is the first <em> Followed by another <em> Another em <br> <em> A fourth em which <em> the last em <br> <span> IE6 <em> doesn't <em> sibling selectors
Classification based on what is done with a document - ie visited links or what has focus.
Example CSS:
/* Pseudo starts on page 51 - for links, think LVHA (LoVe HA!) */
blockquote.psuedoExample a:link {text-decoration: none;} /* all unvisited links are like text - pg 91*/
blockquote.psuedoExample a:visited {text-decoration: line-through;} /* visited links are strike-through */
blockquote.psuedoExample a:hover {text-decoration: underline;} /* visited links are strike-through */
blockquote.psuedoExample a:active {background: yellow;} /* links that are clicked have a yellow background */
blockquote.psuedoExample input:focus {background: silver; font-weight: bold;}
blockquote.psuedoExample p:first-child {text-transform: capitalize;}
blockquote.psuedoExample p:first-child {text-transform: capitalize;}
blockquote.psuedoExample p:first-letter {font-size: 200%;}
blockquote.psuedoExample h1:before {content: "Please note: "; color: red;}
Example html:
<blockquote class="psuedoExample"> <p>This is a paragraph with <a href="http://www.google.com">google links</a> and <a href="http://www.notarealsite.net">not so common links</a>.</p> <h1>The "not so common link" above doesn't go anywhere.</h1> <p>Plese let us know what you think: <form> Name: <input type="text" name="name"> <br /> What I think: <input type="text" name="opinion"> </form> </p> </blockquote>Results:
This is a paragraph with google links and not so common links.
The "not so common link" above doesn't go anywhere.
Plese let us know what you think:
CSS 2.1 rules are applied by creating a 4 group number, read left to right. Two conflicting rules may have the specificity of 0,1,0,0 and 0,0,9999,9; however the first rule will be applied because it has a 1 in the 3rd significant digit. The significant digits are populated by:
an inline html specifier is worth \+ 1,0,0,0an ID attribute is worth \+ 0,1,0,0an ID attribute is worth \+ 0,1,0,0a class attribute is worth \+ 0,0,1,0an element selector is worth \+ 0,0,0,1
/* Example from page 64 */
<span>This is span text <em>which contains emphasized text</em> inside.</span>
This is text on the outside of the span.
<p>This is another paragraph.</p>
<p style="color: black; background: white">This paragraph has an inline specification.</p>
</blockquote>
This would generate:
This is span text which contains emphasized text inside. This is text on the outside of the span.This is another paragraph.
This paragraph has an inline specification.
This outweights all other considerations. Example CSS are:
/* Examples of important rules, from page 67 */
blockquote.importExample h1 {color: red !important; font-size: 200%;}
blockquote.importExample h2, blockquote.importExample p {color: orange !important; font-size: 400%;}
blockquote.importExample h3, blockquote.importExample h4, blockquote.importExample h5 {color: blue !important; font-size: 900%;}
blockquote.importExample h4, blockquote.importExample h5 {color: purple !important; font-size: 900%;}
blockquote.importExample * {color: green; font-size: 12px !important;}
With the following HTML:
<blockquote class="importExample"> <h1>Reader important declarations</h1> <h2>Author important declarations</h2> <h3>Author normal declarations</h3> <h4 style="color: black">Reader normal declarations</h4> <h5 style="color: brown !important">User agent declarations</h5> </blockquote>This generates:
Reader important declarations
Author important declarations
Author normal declarations
Reader normal declarations
User agent declarations
When an element inherits a properity from its parent, the specificy is less than zero, consider the following CSS/HTML example:
/* Example of why inheritance has less specificity than '*' - from page 69 */
blockquote.inheritanceExample * {color: gray;}
blockquote.inheritanceExample h5 {color: black;}
HTML:<blockquote class="inheritanceExample"> <p><h5>H5 Text - black <em>Em text inherits from H5, but the universal specifier wins out</em</h5> Other paragraph text</p> </blockquote>This generates:
H5 Text - black Em text inherits from H5, but the universal specifier wins out
Other paragraph text
Page 83 - For websafe colors, use color: #xxyyzz where xx,yy,zz are factors of 33 (hex).
Measurements:
Fonts should not be confused with text.
For the following CSS/HTML:
/* Example from page 107-110 */
blockquote#fontSizeExample span.one {font-size: xx-small;}
blockquote#fontSizeExample span.two {font-size: x-small;}
blockquote#fontSizeExample span.small {font-size: small;}
blockquote#fontSizeExample span.three {font-size: medium;}
blockquote#fontSizeExample span.four {font-size: large;}
blockquote#fontSizeExample span.five {font-size: x-large;}
blockquote#fontSizeExample span.six {font-size: xx-large;}
blockquote#fontSizeExample span.larger {font-size: larger;}
<blockquote id="fontSizeExample">
<span class="one">extra-extra small<span><br />
<span class="two">extra small</span><br />
<span class="small">small</span><br />
<span class="three">medium</span><br />
<span class="four">large</span><br />
<span class="five">extra large</span><br />
<span class="six">extra-extra large</span><br />
<span class="six"><span class="larger">larger than extra-extra large</span></span><br />
<span class="two"><span class="larger">larger than extra small</span></span>
<span class="two"><span class="larger">larger than extra small</span></span> <span class="small"> is similar to small</span>
</blockquote>
This renders:
extra-extra small
extra small
small
medium
large
extra large
extra-extra large
larger than extra-extra large
larger than extra small is similar to small
For the following CSS/HTML:
/* Example from page 114 */
blockquote#fontStyleExample h2.italic {font-style: italic;}
blockquote#fontStyleExample h2.oblique {font-style: oblique;}
<blockquote id="fontStyleExample">
<h2 class="italic">This is italic font, </h2><h2 class="oblique">which can be compared to slanted text (oblique).</h2>
</blockquote>
This generates:
This is italic font,
which can be compared to slanted text (oblique).
For the following CSS/HTML:
/* Example from page 116 */
blockquote#fontVariantExample span.small-caps {font-variant: small-caps;}
blockquote#fontVariantExample span.inherit {font-variant: inherit;}
<blockquote id="fontVariantExample">
<span class="small-caps">Text in the small-caps group, <span class="inherit">now inherit small-caps</span></span>,
<span class="inherit"> now inherit outside of small-caps</span>
</blockquote>
This generates:
Text in the small-caps group, now inherit small-caps, now inherit outside of small-caps
/* Example from page 120 and 121 */
blockquote#fontPropertyExample span.shorthandLong {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}
blockquote#fontPropertyExample span.shorthandShort {font: bold italic 24px Verdana, Helvetica, Arial, sans-serif;}
blockquote#fontPropertyExample span.shorthand3 {font: 1.5em snas-serif;}
/* from page 122 */
blockquote#fontPropertyExample span.shorthandLineHeight {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}
With the following HTML: <blockquote id="fontPropertyExample"> <span>The font options are: [<font-style> <font-variant> <font-weight>]? <font-size> [ <line-height>]? <font-family>] | caption | icon |menu | message-box | small-caption | status-bar | inherit</span><br /> <span class="shorthandLong">Text in line 1 and 2 should look the same.</span><br /> <span class="shorthandShort">Text in line 1 and 2 should look the same.</span><br /> <span class="shorthand3">Another example.</span><br /> <span class="shorthandLineHeight">This line has a line-heigth setting of 1.2 so it should have a line height of 30 pixels.</span> </blockquote>This shows up as:
The font options are: [<font-style> <font-variant> <font-weight>]? <font-size> [ <line-height>]? <font-family>] | caption | icon |menu | message-box | small-caption | status-bar | inherit
Text in line 2 and 3 should look the same.
Text in line 2 and 3 should look the same.
Another example.
This line has a line-heigth setting of 1.2 so it should have a line height of 30 pixels.
To make your web page look like the users computer, try some of the following:
<p style="font: caption">Caption font is used for buttons.</p> <p style="font: icon">Icon font is used for labels.</p> <p style="font: message-box">Message-box font is used for dialog boxes.</p> <p style="font: small-caption">small-caption font is used for small controls.</p> <p style="font: status-bar">status-bar font is used for the status.</p>These are shown as:
Fonts can be downloaded using something like:Caption font is used for buttons.
Icon font is used for labels.
Message-box font is used for dialog boxes.
small-caption font is used for small controls.
status-bar font is used for the status.
@font-face {font-family: "Scarborough Fair"; src: url(http://www.example.com/fonts/ps/scarborough.ps);}
Starting on page 128.
/* Example from page 128 - 1?? */
blockquote#TextPropertyExample {width: 50%;}
blockquote#textPropertyExample p.indentEm {text-indent: 10em;}
blockquote#textPropertyExample p.indentPercent {text-indent: 10%;}
blockquote#textPropertyExample p.textAlignLeft {text-align: left;}
blockquote#textPropertyExample p.textAlignRight {text-align: right;}
blockquote#textPropertyExample p.textAlignCenter {text-align: center;}
blockquote#textPropertyExample p.textAlignJustify {text-align: justify;}
blockquote#textPropertyExample div.textLineHeight {line-height: 1.5;} /* From page 137 */
blockquote#textPropertyExample p.textLineHeight {font-size: 18px;}
blockquote#textPropertyExample em.textVerticalAlignSup {vertical-align: super;}
blockquote#textPropertyExample em.textVerticalAlignTop {vertical-align: top;}
blockquote#textPropertyExample em.textVerticalAlignTextBottom {vertical-align: text-bottom;}
blockquote#textPropertyExample p.textShadow {color: white; text-shadow: 0 0 4px black;}
Here is the example html:
<blockquote id="TextPropertyExample"> <p class="indentEm">This text is indented by a fixed amount. It should span more than one line, since the blockquote is smaller than the window. Indented text should only be indented on the first line of the paragraph, the rest should be normal. You may need to resize your browser to see that.</p> <p class="indentPercent">This text is indented by a percent. If the window is resized, then it will change its indention.</p> <p class="textAlignLeft">Text align left is generally the default for germanic and romantic languages.</p> <p class="textAlignRight">Text align right is the default for Hebrew.</p> <p class="textAlignCenter">Text align center is used for report titles.</p> <p class="textAlignJustify">This text is justified, so if it spans more than one line, the spacing will be shifted so the lines are all the same length, except for the last line, which will end where it should end.</p> <div class="textLineHeight"><p class="textLineHeight">This paragraph's 'font-size is 18px, and since the 'line-height' set for the parent div is 1.5, the 'line-height' for this paragraph is 27px (18x1.5). </p> </div> <p>The vertical alignment options only apply to inline and replaced elements, such as pictures. This sentence is <em class="textVerticalAlignSup">super alignment</em>, this is <em class="textVerticalAlignTop">top alignment</em>, and this is <em class="textVerticalAlignTextBottom">text-bottom alignment</em>.</p> <p class="textShadow">This paragraph is made of shadow text.</p> </blockquote>Results:
This text is indented by a fixed amount. It should span more than one line, since the blockquote is smaller than the window. Indented text should only be indented on the first line of the paragraph, the rest should be normal. You may need to resize your browser to see that.
This text is indented by a percent. If the window is resized, then it will change its indention.
Text align left is generally the default for germanic and romantic languages.
Text align right is the default for Hebrew.
Text align center is used for report titles.
This text is justified, so if it spans more than one line, the spacing will be shifted so the lines are all the same length, except for the last line, which will end where it should end.
This paragraph's 'font-size is 18px, and since the 'line-height' set for the parent div is 1.5, the 'line-height' for this paragraph is 27px (18x1.5).
The vertical alignment options only apply to inline and replaced elements, such as pictures. This sentence is super alignment, this is top alignment, and this is text-bottom alignment.
This paragraph is made of shadow text.
<pre> tags are block-level elements, the <code> tags make inline elements.
References: