Difference between revisions of "CSS"
Jump to navigation
Jump to search
(Created page with "Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML. {{Feature |explains= CSS |description=Add cu...") |
(remove advice to use floats, it's so 1980's (pre-CSS grid era); correct the WestCiv example; Introduce useful resources section) |
||
| (17 intermediate revisions by 2 users 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. | ||
| + | |||
| + | 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]. | ||
| + | |||
| + | == 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 | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | {{References}} | ||
| + | |||
| + | [[Category:Web Development]] | ||
| + | [[Category:Design]] | ||
| + | [[Category:UI]] | ||
| + | [[Category:Style]] | ||
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
