CSS: Difference between revisions

(4 intermediate revisions by the same user not shown)

Line 2:

|image=CSS3 logo and wordmark.svg

|imgdesc=CSS3 logo

|title=

|title=CSS

}}

{{#set:feature description = Add custom CSS to pages or sitewide }}

Line 10:

Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML.

WestCiv provides some really useful tools and examples of CSS in action. For example, you can make an [http://www.westciv.com/tools/gradientsnustyle/index.html#background-image:%20linear-gradient(~~90deg,~~%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect].

WestCiv provides some really useful tools and examples of CSS in action. For example, you can make an [http://www.westciv.com/tools/gradientsnustyle/index.html#background-image:%20linear-gradient(%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect].

https://~~caniuse~~.~~com is~~ the ~~site to~~ go to ~~for browser support~~ (~~and~~ global usage)

== Useful Resources ==

* [https://developer.mozilla.org/en-US/docs/Learn/CSS Learn CSS] from the go-to resource: Mozilla Developer Network (MDN)

* [https://caniuse.com/usage-table global browser usage comparison]

* [http://getbem.com/introduction/ BEM] the Block Element Modifier convention for CSS rules

* [https://www.sitepoint.com/optimizing-css-performance/ 20 tips for optimizing CSS] (2018) by SitePoint

~~<br clear="all">~~

~~== Example: mobile layout with 2 columns ==~~

A change to use percentages and 'em's instead of hard pixel widths or font size would achieve a more fluid layout. Basically, always use em for font size. Only use px when you know the exact dimensions of something (like setting a negative margin for a graphic)

To really get what you want (a responsive layout that is designed to work well in print and a variety of devices), you should use the 'media' selector, in combination with 'media queries' <ref>good list of various approaches at https://gist.github.com/dustinboston/3867516 </ref>

~~CSS like the following would be good:~~

~~<source lang="css">~~

~~@media (min-width: 55em)~~

{

~~.main~~

{

~~float: left;~~

~~width: 65%;~~

~~margin-right: 5%;~~

~~margin-bottom: 1em;~~

}

~~.aside~~

{

~~float: left;~~

~~width: 30%;~~

~~margin-bottom: 1em;~~

}

~~</source>~~

Note how both columns are floated "left" which means that when your math or the browser isn't broken and the percentages <=100% they are side by side. This side-by-side layout is only applied to devices that have a screen width of 880 pixels <ref> 55em translates to 880px for the browser default font size of 16px. https://css-tricks.com/css-font-size/</ref>

~~Example at http://maxdesign.com.au/jobs/css-layouts/12-example-layout-two-full/ and source at~~

~~https://github.com/russmaxdesign/example-layout-two-full~~

@@ Line 2: / Line 2: @@
 |image=CSS3 logo and wordmark.svg
 |imgdesc=CSS3 logo
-|title=
+|title=CSS
 }}
 {{#set:feature description = Add custom CSS to pages or sitewide }}
@@ Line 10: / Line 10: @@
 Cascading Style Sheets is one of the primary technologies used in the web.  CSS provides the style/appearance aspect of your HTML.
-WestCiv provides some really useful tools and examples of CSS in action.  For example, you can make an [http://www.westciv.com/tools/gradientsnustyle/index.html#background-image:%20linear-gradient(90deg,%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect].
+WestCiv provides some really useful tools and examples of CSS in action.  For example, you can make an [http://www.westciv.com/tools/gradientsnustyle/index.html#background-image:%20linear-gradient(%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect].
-https://caniuse.com is the site to go to for browser support (and global usage)
+== Useful Resources ==
+* [https://developer.mozilla.org/en-US/docs/Learn/CSS Learn CSS] from the go-to resource: Mozilla Developer Network (MDN)
+* [https://caniuse.com/usage-table global browser usage comparison]
+* [http://getbem.com/introduction/ BEM] the Block Element Modifier convention for CSS rules
+* [https://www.sitepoint.com/optimizing-css-performance/ 20 tips for optimizing CSS] (2018) by SitePoint
-<br clear="all">
-== Example: mobile layout with 2 columns ==
-A change to use percentages and 'em's instead of hard pixel widths or font size would achieve a more fluid layout.  Basically, always use em for font size.  Only use px when you know the exact dimensions of something (like setting a negative margin for a graphic)
-To really get what you want (a responsive layout that is designed to work well in print and a variety of devices), you should use the 'media' selector, in combination with 'media queries' <ref>good list of various approaches at https://gist.github.com/dustinboston/3867516 </ref>
-CSS like the following would be good:
-<source lang="css">
-@media (min-width: 55em)
-{
-	.main
-	{
-		float: left;
-		width: 65%;
-		margin-right: 5%;
-		margin-bottom: 1em;
-	}
-	.aside
-	{
-		float: left;
-		width: 30%;
-		margin-bottom: 1em;
-	}
-}
-</source>
-Note how both columns are floated "left" which means that when your math or the browser isn't broken and the percentages <=100% they are side by side.  This side-by-side layout is only applied to devices that have a screen width of 880 pixels <ref> 55em translates to 880px for the browser default font size of 16px.  https://css-tricks.com/css-font-size/</ref>
-Example at http://maxdesign.com.au/jobs/css-layouts/12-example-layout-two-full/ and source at
-https://github.com/russmaxdesign/example-layout-two-full