|
|
| (18 intermediate revisions by the same user not shown) |
| Line 19: |
Line 19: |
| == Selectors == | | == Selectors == |
|
| |
|
| === Contextual Selectors ===
| | [[Selectors]] |
| Contextual selectors use more than one tag in the selector. The tag closest to the declaration is the targeted tag. The additional tag(s) state where the target tag must be located in the markup up in order for target tag to be affected. Contextual selectors have spaces between them.
| |
| | |
| Example: The p is targeted tag. Only p tags within div tags will be red.
| |
| <pre>div p {color:red;}</pre>
| |
| | |
| | |
| ==== Contextual selector examples ====
| |
| <pre><html>
| |
| <head>
| |
| <title>Contextual Selector Example 1</title>
| |
| <link href="style_sheets/contextual_selector_example_1.css" rel="stylesheet" type="text/css">
| |
| </head>
| |
| <body>
| |
| </pre>
| |
| | |
| ==== Child selectors ====
| |
| | |
| Write a rule so the target tag has to be a child of a specific tag.
| |
| | |
| <pre>p>em {color:green;}</pre>
| |
| | |
| | |
| ==== Contextual Class Selectors ====
| |
| | |
| You can combine tag and class name to make a selector more specific.
| |
| | |
| The second line states '''any tags with "specialtext" class will be bold'''.
| |
| | |
| The third line states '''"specialtext" class must be within the context of p tag for rule to apply'''.
| |
| | |
| <pre>
| |
| p { font-family: Helvetica, sans-serif; }
| |
| .specialtext { font-weight:bold; }
| |
| p.specialtext { color:red}
| |
| </pre>
| |
| | |
| [http://www.gotopinion.info/styles/class_selector_example_0.html | Class Selector Example 0]
| |
| | |
| You can further specify by adding more tags.
| |
| | |
| The fourth line states '''span tag within a paragraph with "specialtext" class will be italicized'''
| |
| | |
| <pre>
| |
| p { font-family: Helvetica, sans-serif; }
| |
| .specialtext { font-weight:bold; }
| |
| p.specialtext { color:red}
| |
| p.specialtext span { font-style:italic; }
| |
| </pre>
| |
| | |
| [http://www.gotopinion.info/styles/class_selector_example_1.html | Class Selector Example 1]
| |
| | |
| ==== Skipping the restrictions of hierarchy ====
| |
| The line states '''span tag can be a descendant of any tag with specialtext class'''
| |
| <pre>.specialtext span { color:blue; }
| |
| </pre>
| |
| | |
| === IDs ===
| |
| | |
| ID synax is similar to classes except a hash (#) symbol is used versus a class's period.
| |
| | |
| ==== Difference between Classes & IDs ====
| |
| | |
| The ID can only be used once per page and a class may appear many times.
| |
| | |
| If you want to identify a unique piece of your page's markup use an ID.
| |
| | |
| If you want to apply rules to multiple tags in same page or many pages use a class.
| |
| | |
| === Universal Selector ===
| |
| | |
| The asterisk (*) means anything so this rule means all text will be blue.
| |
| <pre>* { color:blue; }
| |
| </pre>
| |
| | |
| Another use is as the inverse of a child selector. This rule means any em tag that is at least a grandchild of the p tag, but not a child, is selected.
| |
| <pre>p * em { font-weight:bold; }</pre>
| |
| | |
| | |
| === Adjacent Sibling Selector ===
| |
| | |
| Rule selects a tag that follows a specific sibling tag. p48
| |
| | |
| === Attribute Selector ===
| |
| | |
| Attribute selectors use the attributes of the tag. p48
| |
|
| |
|
| == Adding Styles to Web pages == | | == Adding Styles to Web pages == |
|
| |
|
| Three ways to add styles to your pages.
| | [[Adding Styles to Web pages]] |
|
| |
|
| ==== Inline ==== | | == Psuedo Elements and Classes == |
|
| |
|
| Add to a tag using <code>style</code> attribute
| | [[Psuedo Elements and Classes]] |
|
| |
|
| <pre><p style="enter CSS"></p></pre>
| | == Cascade and Rule Declarations == |
|
| |
|
| ==== Embedded ====
| | [[Cascade and Rule Declarations]] |
|
| |
|
| Add styles in the <code>head</code> of XHTML document
| | == Styling Fonts and Text == |
|
| |
|
| <pre><style type="text/css">enter CSS</style></pre>
| | [[Styling Fonts and Text]] |
| | |
| ==== Linked ====
| |
| | |
| Style is in another document and the markup is linked to the style.
| |
| | |
| <pre><link href="style_sheet.css" media="screen" rel="stylesheet" type="text/CSS" /></pre>
| |
| | |
| == Pseudo Classes ==
| |
| | |
| Classes that cause rules to be applied when a specific event happens. These classes are not attached to tags in markup. p50
| |
| | |
| === Anchor Link Pseudo Classes ===
| |
| | |
| Commonly used with hyperlinks. p50
| |
| | |
| Link
| |
| Visited
| |
| Hover
| |
| Active
| |
| | |
| === Other Useful Pseudo-Classes ===
| |
| | |
| This rule selects the first-child element with the name x.
| |
| <pre>x:first-child</pre>
| |
| | |
| | |
| This rule selects the focus of the user with the name x.
| |
| <pre>x:focus</pre>
| |
| | |
| == Pseudo-elements ==
| |
|
| |
|
| Provides the effect of extra markup without the markup in your code.
| | == Positioning Elements aka ''The Box'' == |
|
| |
|
| This rule selects the first letter of tag name x and applies your style.
| | [[Positioning Elements]] |
| <pre>x:first-letter</pre>
| |
|
| |
|
| This rule selects the first line of tag name x and applies your style.
| | == Basic Page Layout == |
| <pre>x:first-line</pre>
| |
|
| |
|
| This rule adds specified text before an element of tag name x.
| | [[Basic Page Layout]] |
| <pre>x:before</pre>
| |
|
| |
|
| This rule adds specified text after an element of tag name x.
| | == Tips creating styles == |
| <pre>x:after</pre>
| |
|
| |
|
| Example of x:before and x:after
| | To eliminate the difference between user agents always zero out margins and padding on all elements. |
| | |
| <pre>h1.age:before {content:"Age:"}
| |
| h1.age:after {content:"years old."}
| |
| | |
| Code <h1 class="age">36</h1> displays "Age: 36 years old."</pre>
| |
| | |
| == Cascade ==
| |
| | |
| Styles passing from higher to lower hierarchy levels.
| |
| | |
| === Cascade Rules ===
| |
| | |
| Cascade Rules p57:
| |
| # Find all declarations that apply to each element and property
| |
| # Sort by order and weight
| |
| # Sort by specificity
| |
| # Sort by order
| |
| | |
| ==== Weight of declaration ====
| |
| | |
| Define a rule as important using the exclamation point. Marking a tag as important will override the cascade.
| |
| | |
| <pre>p {color:red !important; font-size:12pt;}</pre>
| |
| | |
| == Rule Declarations ==
| |
| | |
| Declarations are made up of a property and value.
| |
|
| |
|
| Example: | | Example: |
| <pre>p {color:red;}</pre> | | <pre>* {margin:0; padding:0;}</pre> |
| | |
| color = property and red = value
| |
|
| |
|
| Values fall into three main types:
| | == Helpful links == |
| # Words
| |
| # Numerical values
| |
| # Color values
| |
|
| |
|
| === Numerical values ===
| | [http://www.w3.org/Style/CSS/ Cascading Style Sheets home page] |
|
| |
|
| Use to decribe the "distance" or height, width, depth, length, etc. for many values. p61
| | [http://www.w3.org/Style/CSS/current-work Cascading Style Sheets Current Work] |
|
| |
|
| Two main groups of numerical values:
| | [http://www.w3.org/TR/CSS21/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification] |
| # Absolute
| |
| # Relative
| |
|
| |
|
| Absolute value describes a real distance.
| | [http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2 CSS2 Specification] |
| Relative value compared to another.
| |
|
| |
|
| Absolute value chart:
| | [http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1 CSS1 Specification] |
|
| |
|
| {| border="1" cellspacing="0" cellpadding="5" align="center"
| | [http://www.cssmenumaker.com/ CSS Menu Maker] |
| ! Absolute Value
| |
| ! Unit Abbreviation
| |
| |-
| |
| | Inches
| |
| | in
| |
| |-
| |
| | Centimeters
| |
| | cm
| |
| |-
| |
| | Millimeters
| |
| | mm
| |
| |-
| |
| | Points
| |
| | pt
| |
| |-
| |
| | Picas
| |
| | pc
| |
| |-
| |
| | Pixels
| |
| | px
| |
| |}
| |
|
| |
|
| Relative value chart:
| | == Interesting CSS resources == |
|
| |
|
| {| border="1" cellspacing="0" cellpadding="5" align="center"
| | [https://svgontheweb.com/ SVG on the Web] A Practical Guide |
| ! Relative Value
| |
| ! Unit Abbreviation
| |
| ! Note
| |
| |-
| |
| | Em
| |
| | em
| |
| | Width of character in a font.
| |
| |-
| |
| | Ex
| |
| | ex
| |
| | Equivalent to the x-height of the given font.
| |
| |-
| |
| | Percentage
| |
| | %
| |
| |
| |
| |}
| |
|
| |
|
| === Color Values ===
| | [https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ Viewport Units vm vh vmin vmax] |
|
| |
|
| Hexadecimal format
| | [https://medium.com/@aniboaz/animate-svg-4fa7dd00e860 Animate SVGs with CSS] blog led me to [https://jonsuh.com/blog/animate-svg-with-css/ Animate SVG with CSS] |
|
| |
|
| <pre>#RRGGBB</pre>
| |
|
| |
| Percentages format
| |
|
| |
| <pre>R%, G%, B% </pre>
| |
|
| |
| [[Styling Fonts and Text]]
| |
|
| |
|
| <center>[[web development|Back to Web Development]]</center> | | <center>[[web development|Back to Web Development]]</center> |
Cascade Style Sheets (CSS)[edit | edit source]
A CSS is made up of two parts: the selector and declaration. The selector states which tag the rule applies. The declaration stats what happens when the rule is applied.
The declaration is made up of two elements: a property and value. A declaration must end with a semicolon.
Multiple declarations can be contained in a single rule.
Multiple selectors can be contained in a single rule. A comma must be used after each selector except the last.
h1, h2, h3 {color:red; font-weight:bold;}
Multiple rules can be applied to the same selector.
h1, h2, h3 {color:red; font-weight:bold;}
h3 {font-style:italic;}
Selectors
Adding Styles to Web pages[edit | edit source]
Adding Styles to Web pages
Psuedo Elements and Classes[edit | edit source]
Psuedo Elements and Classes
Cascade and Rule Declarations[edit | edit source]
Cascade and Rule Declarations
Styling Fonts and Text
Positioning Elements aka The Box[edit | edit source]
Positioning Elements
Basic Page Layout
To eliminate the difference between user agents always zero out margins and padding on all elements.
Example:
* {margin:0; padding:0;}
Cascading Style Sheets home page
Cascading Style Sheets Current Work
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Cascading Style Sheets, level 2 CSS2 Specification
Cascading Style Sheets, level 1 CSS1 Specification
CSS Menu Maker
SVG on the Web A Practical Guide
Viewport Units vm vh vmin vmax
Animate SVGs with CSS blog led me to Animate SVG with CSS
Back to Web Development