CSS examples
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
There is not normally a need to use paragraph <p> tags if a blank line is left above and below the text. It happens automatically.
<ul>
- Free ready-to-use website publishing system
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Featherweight for simplicity and speed
<ol>
- Free ready-to-use website publishing system
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Featherweight for simplicity and speed
Note: <div> classes bg1, bg2, bg3, bg4 and bg5 are designed for text only.
<div class="bg1">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Free ready-to-use website publishing system
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Featherweight for simplicity and speed
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="bg2">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- You own the site on your web server
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Choice of site languages
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="bg3">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- You own the site on your web server
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Choice of site languages
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="bg4">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- You own the site on your web server
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Choice of site languages
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="bg5">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- You own the site on your web server
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Choice of site languages
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="box">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Free ready-to-use website publishing system
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Featherweight for simplicity and speed
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Using the above boxes for text, leave a blank line above and below:
<div class="box">
Text with blank line above and below.
</div>
<p class="box">
When class="box" is used as a paragraph class the text is centred.
Image inside <div class="box">
Emily Apple
Unlike text, leave no space above and below the image HTML:
<div class="box" style="max-width: 640px;"> <img src="img/filename.jpg" width="640" height="whatever" alt=""> <h5>Emily Apple</h5> </div>
Image class="box"
Emily Apple
Rather than put the image inside <div class="box"> use "box" as an image class:
<img src="img/filename.jpg" width="640" height="whatever" alt="" class="box"> <p class="caption">Emily Apple</p>
The "box" border is 50 pixels each side so an image 640 pixels wide (or less) fits in the 740 pixel wide column (caption optional).
<ul class="listing">
- Link text
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Link text
<ul class="boxlist">
For menu pages.
- Menu link one (no text outside <a>all text here</a>)
- Menu link two / more text
- Menu link three / more text
Markup:
<ul class="boxlist"> <li><a href="#">Menu link one / more text</a></li> <li><a href="#">Menu link two / more text</a></li> <li><a href="#">Menu link three / more text</a></li> </ul>