Cascade Style Sheets: Difference between revisions

From GotOpinion
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
 
(29 intermediate revisions by the same user not shown)
Line 17: 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.


Example: The p is targeted tag. Only p tags within div tags will be red.
[[Selectors]]
<pre>div p {color:red;}</pre>


== Adding Styles to Web pages ==


=== Contextual selector examples ===
[[Adding Styles to Web pages]]
<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]
== Psuedo Elements and Classes ==


You can further specify by adding more tags.
[[Psuedo Elements and Classes]]


The fourth line states '''span tag within a paragraph with "specialtext" class will be italicized'''
== Cascade and Rule Declarations ==


<pre>
[[Cascade and Rule Declarations]]
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]
== Styling Fonts and Text ==


=== Skipping the restrictions of hierarchy ===
[[Styling Fonts and Text]]
The line states '''span tag can be a descendant of any tag with specialtext class'''
<pre>.specialtext span { color:blue; }
</pre>


== IDs ==
== Positioning Elements aka ''The Box'' ==


ID synax is similar to classes except a hash (#) symbol is used versus a class's period.
[[Positioning Elements]]


== Difference between Classes & IDs ==
== Basic Page Layout ==


The ID can only be used once per page and a class may appear many times.
[[Basic Page Layout]]


If you want to identify a unique piece of your page's markup use an ID.
== Tips creating styles ==


If you want to apply rules to multiple tags in same page or many pages use a class.
To eliminate the difference between user agents always zero out margins and padding on all elements.


== Universal Selector ==
Example:
<pre>* {margin:0; padding:0;}</pre>


The asterisk (*) means anything so this rule means all text will be blue.
== Helpful links ==
<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.
[http://www.w3.org/Style/CSS/ Cascading Style Sheets home page]
<pre>p * em { font-weight:bold; }</pre>
 
== Adding Styles to Web pages ==


Three ways to add styles to your pages.
[http://www.w3.org/Style/CSS/current-work Cascading Style Sheets Current Work]


=== Inline ===
[http://www.w3.org/TR/CSS21/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]


Add to a tag using <code>style</code> attribute
[http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2 CSS2 Specification]


<pre><p style="enter CSS"></p></pre>
[http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1 CSS1 Specification]


=== Embedded ===
[http://www.cssmenumaker.com/ CSS Menu Maker]


Add styles in the <code>head</code> of XHTML document
== Interesting CSS resources ==


<pre><style type="text/css">enter CSS</style></pre>
[https://svgontheweb.com/ SVG on the Web] A Practical Guide


=== Linked ===
[https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ Viewport Units vm vh vmin vmax]


Style is in another document and the markup is linked to the style.
[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><link href="style_sheet.css" media="screen" rel="stylesheet" type="text/CSS" /></pre>


<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"