Cascade Style Sheets: Difference between revisions

From GotOpinion
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 16: Line 16:


h3 {font-style:italic;}</pre>
h3 {font-style:italic;}</pre>
== Selectors ==


[[Selectors]]
[[Selectors]]
Line 21: Line 23:
== 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>

Latest revision as of 20:54, 22 September 2018

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[edit | edit source]

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[edit | edit source]

Styling Fonts and Text

Positioning Elements aka The Box[edit | edit source]

Positioning Elements

Basic Page Layout[edit | edit source]

Basic Page Layout

Tips creating styles[edit | edit source]

To eliminate the difference between user agents always zero out margins and padding on all elements.

Example: 

* {margin:0; padding:0;}

Helpful links[edit | edit source]

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

Interesting CSS resources[edit | edit source]

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
Retrieved from "https://wiki.gotopinion.info/wiki/index.php?title=Cascade_Style_Sheets&oldid=1822"