Difference between revisions of "CSS"
Jump to navigation
Jump to search
(remove advice to use floats, it's so 1980's (pre-CSS grid era); correct the WestCiv example; Introduce useful resources section) |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Feature | {{Feature | ||
| − | | | + | |image=CSS3 logo and wordmark.svg |
| − | | | + | |imgdesc=CSS3 logo |
| − | | | + | |title=CSS |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}} | }} | ||
| + | {{#set:feature description = 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]] }} | ||
Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML. | 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( | + | 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]. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | CSS | + | == 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 | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Latest revision as of 13:19, 16 July 2020
CSS 
| |
|---|---|
 | |
| Image shows: | CSS3 logo |
| Summary | |
| Description: | Add custom CSS to pages or sitewide |
| More | |
| Notes: | Add CSS rules into your pages. |
| Test: | See schedule colors on the Rates page. |
| Example: | CSS#Example:_mobile_layout_with_2_columns |
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 'equals' background effect.
Useful Resources[edit | edit source]
- Learn CSS from the go-to resource: Mozilla Developer Network (MDN)
- global browser usage comparison
- BEM the Block Element Modifier convention for CSS rules
- 20 tips for optimizing CSS (2018) by SitePoint
