Changes

|explainsimage=CSSCSS3 logo and wordmark.svg|descriptionimgdesc=Add custom CSS to pages or sitewideCSS3 logo|notestitle=Add CSS rules into your pages.|tests=See schedule colors on the [[Rates]] page.|examples=<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>

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]. https://caniuse.com is the site to go to for browser support (and global usage)  <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>

== Useful Resources ==* [https://developer.mozilla.org/en-US/docs/Learn/CSS Learn CSS like ] from the following would be goodgo-to resource:<source lang="css">@media Mozilla Developer Network (min-width: 55emMDN){ * [https://caniuse.maincom/usage-table global browser usage comparison] { float* [http: left;//getbem.com/introduction/ BEM] the Block Element Modifier convention for CSS rules width* [https: 65%; margin//www.sitepoint.com/optimizing-right: 5%; margincss-bottom: 1em; }performance/ 20 tips for optimizing CSS] (2018) by SitePoint