Difference between revisions of "CSS"
(remove advice to use floats, it's so 1980's (pre-CSS grid era); correct the WestCiv example; Introduce useful resources section) |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 2: | Line 2: | ||
|image=CSS3 logo and wordmark.svg | |image=CSS3 logo and wordmark.svg | ||
|imgdesc=CSS3 logo | |imgdesc=CSS3 logo | ||
| − | |title= | + | |title={{PAGENAME}} |
}} | }} | ||
{{#set:feature description = Add custom CSS to pages or sitewide }} | {{#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. | 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]. | + | 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> | ||
| + | |||
| + | 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 | ||
Revision as of 10:23, 20 May 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.
https://caniuse.com is the site to go to for browser support (and global usage)
Example: mobile layout with 2 columns[edit | edit source]
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' [1]
CSS like the following would be good:
@media (min-width: 55em)
{
.main
{
float: left;
width: 65%;
margin-right: 5%;
margin-bottom: 1em;
}
.aside
{
float: left;
width: 30%;
margin-bottom: 1em;
}
}
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 [2]
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
References[edit source]
- ↑ good list of various approaches at https://gist.github.com/dustinboston/3867516
- ↑ 55em translates to 880px for the browser default font size of 16px. https://css-tricks.com/css-font-size/
