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].
{{Feature
|explainsimage= CSS|description=Add custom CSS to pages or sitewide|notes=Add CSS rules into your page with a parser hook: <nowiki>{{#css:rules here}}</nowiki>CSS3 logo and wordmark.svg|testsimgdesc=CSS3 logo|examplestitle=the [[Rates]] page uses custom table layout and coloring. Without the CSS extension, this would be much harder to do.
}}
<br clear{{#set:feature description ="all">Add custom CSS to pages or sitewide }}{{#set:feature notes =Add CSS rules into your pages. }}{{#set:feature tests = See schedule colors on the [[Rates]] page. }}{{#set:feature examples = [[{{FULLPAGENAME}}#Example: mobile layout with 2 columns ==_mobile_layout_with_2_columns]] }}A change to use percentages and 'em's instead Cascading Style Sheets is one of hard pixel widths or font size would achieve a more fluid layoutthe primary technologies used in the web. Basically, always use em for font size. Only use px when you know CSS provides the exact dimensions style/appearance aspect of something (like setting a negative margin for a graphic)your HTML.
To WestCiv provides some really get what you want (a responsive layout that is designed to work well in print useful tools and a variety examples of devices)CSS in action. For example, you should use the 'media' selector, in combination with 'media queries' <ref>good list of various approaches at httpscan make an [http://gistwww.githubwestciv.com/dustinbostontools/3867516 <gradientsnustyle/ref>index.html#background-image:%20linear-gradient(%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect].
== 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
.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
