Difference between revisions of "Cascade Style Sheets"

From Got Opinion Wiki
Jump to navigation Jump to search
 
(41 intermediate revisions by the same user not shown)
Line 1: Line 1:
Cascade Style Sheets (CSS)
== Cascade Style Sheets (CSS) ==
 
== Cascade Style Sheets ==


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.
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.
Line 19: Line 17:
h3 {font-style:italic;}</pre>
h3 {font-style:italic;}</pre>


=== 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.
 
[[Selectors]]
 
== Adding Styles to Web pages ==
 
[[Adding Styles to Web pages]]
 
== Psuedo Elements and Classes ==
 
[[Psuedo Elements and Classes]]
 
== Cascade and Rule Declarations ==
 
[[Cascade and Rule Declarations]]
 
== Styling Fonts and Text ==
 
[[Styling Fonts and Text]]
 
== Positioning Elements aka ''The Box'' ==
 
[[Positioning Elements]]
 
== Basic Page Layout ==
 
[[Basic Page Layout]]
 
== Tips creating styles ==
 
To eliminate the difference between user agents always zero out margins and padding on all elements.
 
Example:
<pre>* {margin:0; padding:0;}</pre>
 
== Helpful links ==


===== Contextual selector examples =====
[http://www.w3.org/Style/CSS/ Cascading Style Sheets home page]
<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>


<h1>Contextual selectors are <em>very</em> selective.</h1>
[http://www.w3.org/Style/CSS/current-work Cascading Style Sheets Current Work]


<p>This example shows how to target a <em>specific</em> tag using the document hierarchy.</p>
[http://www.w3.org/TR/CSS21/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]


<p>Tags only need to be descendants <span>in the <em>order stated</em> in the selector</span>; other tag can be in between and the selector still works.</p>
[http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2 CSS2 Specification]
</body>
</html>
</pre>


NOTE: The only difference between example html sheets is the style sheet that links them which is noted below for convenience.
[http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1 CSS1 Specification]


<pre>em { color:red }</pre>
[http://www.cssmenumaker.com/ CSS Menu Maker]
[http://www.gotopinion.info/styles/contextual_selector_1.html Contextual example 1]
<pre>p em {color:red }</pre>
[http://www.gotopinion.info/styles/contextual_selector_2.html Contextual example 2]
<pre>p span em {color:red}</pre>
[http://www.gotopinion.info/styles/contextual_selector_3.html Contextual example 3]


=== Adding Classes & IDs ===
== Interesting CSS resources ==


Adding classes & IDs to the tags in XHTML enables you to style without regard to document hierarchy.
[https://svgontheweb.com/ SVG on the Web] A Practical Guide


Simple use of a class p42.
[https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ Viewport Units vm vh vmin vmax]


CSS contents:
[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>
p { font-family: Helvetica, sans-serif; }
.specialtext {font-weight:bold; }
</pre>


[http://www.gotopinion.info/styles/simple_use_example.html Simple Use Example]


<center>[[web development|Back to Web Development]]</center>
<center>[[web development|Back to Web Development]]</center>

Latest revision as of 17:54, 22 September 2018

Cascade Style Sheets (CSS)

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

Selectors

Adding Styles to Web pages

Adding Styles to Web pages

Psuedo Elements and Classes

Psuedo Elements and Classes

Cascade and Rule Declarations

Cascade and Rule Declarations

Styling Fonts and Text

Styling Fonts and Text

Positioning Elements aka The Box

Positioning Elements

Basic Page Layout

Basic Page Layout

Tips creating styles

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

Example: 

* {margin:0; padding:0;}

Helpful links

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

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"