About
Create up to 9 divs in a column layout to display how different CSS styles look. Here's an example:
| Warning: Fragile code |
| Don't edit this intermediate-level template code unless you are familiar with complex code. |
| If not, don't let this stop you from learning! Visit your sandbox (User:<insert name here>/Sandbox), copy-paste the code, and tinker as much as you'd like. |
Parameters
There are some general parameters (which apply in general) and some parameters for each CSS box (which apply to boxes individually).
General:
- Width: (width) Control the width of all boxes. This will also impact how many columns can fit on a page. (Note that it may look different for people with wider/narrower screens.)
- Container style: (containerStyle) Give the container div extra CSS styles. You likely won't use this one.
- Default div style: (defaultStyle) Apply a default style (e.g. text color) to all divs. This can be overridden by styles on individual boxes.
For individual boxes:
- Div X heading: (headingX) Add an optional bold heading above the box.
- Div X style: (styleX) Enter CSS styles to apply to the box. End with a semicolon.
- Div X content: (contentX) Enter the text that'll display inside the box. To make it show the CSS styles you applied to the box (styleX), type STYLE.
- extraX: Add some secret CSS styles that will be applied to the div. These styles won't show up if you put "STYLE" in contentX. This could be handy if you want to do something like changing the text color for contrast, but you don't want to clutter up your demo with text color code.
Example
Let's revisit our earlier example:
The code looks like this:
{{CSS demo divs
|heading1=Teal
|style1=background-color: teal;
|content1=STYLE
|extra1=color: white;
|heading2=Pink
|style2=background-color: pink;
|content2=STYLE
|extra2=color: black;
|heading3=Tan
|style3=background-color: tan;
|content3=STYLE
|extra3=color: black;
}}
As you can see:
- The headings are very optional. They just tell the reader what the code is about.
- We put "STYLE" for content1-content3. That means the box text displays exactly what style1-style3 say (respectively).
- We used the extraX option to control text colors for readability.
Feel free to play around with this in your sandbox!
More info
Base code by MissLunaRose.
Columns of divs for code demos
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Width of all divs | width | How wide each div should be (default: 255px)
| Unknown | suggested |
| Default div style | defaultStyle | Set a default style, e.g. font color. We've already got default padding.
| Unknown | suggested |
| Container style | containerStyle | Tweak the style of the outer container (rarely needed)
| Unknown | optional |
| Div 1 heading (optional) | heading1 | Optional heading to label Div 1
| Unknown | suggested |
| Div 1 style | style1 | CSS styles for Div 1. End with a semicolon
| Unknown | suggested |
| Div 1 content | content1 | Type some words or just write "STYLE" to make it display the CSS
| Unknown | suggested |
| extra1 | extra1 | Extra "secret" styles that get applied to Div 1 but won't be shown
| Unknown | optional |
| Div 2 heading (optional) | heading2 | no description
| Unknown | suggested |
| Div 2 style | style2 | CSS styles for Div 2. End with a semicolon
| Unknown | suggested |
| Div 2 content | content2 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra2 | extra2 | no description | Unknown | optional |
| Div 3 heading (optional) | heading3 | no description
| Unknown | suggested |
| Div 3 style | style3 | CSS styles for Div 3. End with a semicolon
| Unknown | suggested |
| Div 3 content | content3 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra3 | extra3 | no description | Unknown | optional |
| Div 4 heading (optional) | heading4 | no description
| Unknown | suggested |
| Div 4 style | style4 | CSS styles for Div 4. End with a semicolon
| Unknown | suggested |
| Div 4 content | content4 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra4 | extra4 | no description | Unknown | optional |
| Div 5 heading (optional) | heading5 | no description
| Unknown | suggested |
| Div 5 style | style5 | CSS styles for Div 5. End with a semicolon
| Unknown | suggested |
| Div 5 content | content5 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra5 | extra5 | no description | Unknown | optional |
| Div 6 heading (optional) | heading6 | no description
| Unknown | suggested |
| Div 6 style | style6 | CSS styles for Div 6. End with a semicolon
| Unknown | suggested |
| Div 6 content | content6 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra6 | extra6 | no description | Unknown | optional |
| Div 7 heading (optional) | heading7 | no description
| Unknown | suggested |
| Div 7 style | style7 | CSS styles for Div 7. End with a semicolon
| Unknown | suggested |
| Div 7 content | content7 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra7 | extra7 | no description | Unknown | optional |
| Div 8 heading (optional) | heading8 | no description
| Unknown | suggested |
| Div 8 style | style8 | CSS styles for Div 8. End with a semicolon
| Unknown | suggested |
| Div 8 content | content8 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra8 | extra8 | no description | Unknown | suggested |
| Div 6 heading (optional) | heading9 | no description
| Unknown | suggested |
| Div 9 style | style9 | CSS styles for Div 9. End with a semicolon
| Unknown | suggested |
| Div 9 content | content9 | Type some words or just write "STYLE" to make it display the CSS | Unknown | suggested |
| extra9 | extra9 | no description | Unknown | optional |
| Container CSS classes | class | Add special classes to the container (e.g. for link control)
| Unknown | optional |