My Kitchen Sink of HTML Markups and CSS Styling

This is the file I use to jot down some of the HTML elements that I have to use on my websites. Another file, the Template Lorem, to check and change my styling for a site after the layout is done.

It started off with a 100% Lorem Ipsum text and has developed into more than a Dummy Text Template over the years. It serves as a self-help guide so I need not go online to search for help.

You may want to create one yourself. It will come in handy when some day you need to use the tag again but have forgotten about how to go about doing it. Now that I am releasing it for public viewing, I'll have to rewrite the comment else it may make no sense to you.

  • Make changes to your css file and see how it looks like here.
  • Copy this template and make necessary changes as you wish. You may want to remove the right sidebar if there's no need for it.
  • Go to Lorem Ipsum if you need more dummy text.
HTML5 logo CSS3 logo

H2 Heading class=titlebg

h3 heading

h4 heading

h5 heading
h6 heading

MultiColumn=4

  1. Reset
  2. Font-Face
  3. Paragraph 1
  4. List
  5. Definition List
  6. Boxes
  7. Google Font
  8. Headings
  9. Labels
  10. Images
  11. Position
  12. Quotes
  13. Tables
  14. Google Search
  15. RWD

 

Setting of Multi-Columns

.multi-column {
-moz-column-count: 4;
-moz-column-gap: 10px;
-o-column-count: 4;
-o-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
column-count: 4;
column-gap:10px; }

Link to a specific section

  • For link within a page - <a href="#reset">reset</a>
  • To link to a name of another file - <a href="filename.php#reset">reset</a>
  • Target <a name="reset">Reset</a>

Reset

Reset? What's that?

In the past, I used only one browser and obviously, when you are using only one browser, you won't know how your site looked like on other browsers. Until someone showed you your website on another browser.

But despite the differences, I told them that they've got to use the browser I was using to view my site. I didn't know there was a hack then.

Later on, I followed the recommended universal reset which set all margins and paddings to zero. It went on for years until I was trying to create a child theme from the WordPress TwentyEleven Theme.

From then on, I use the reset from that style sheet. That was actually a Eric Meyer Reset. I do not know if that was an original or a modified copy. It doesn't matter anyway.

So, which CSS Reset should you use?

See the difference

Articles on reset
What is CSS Reset
HTML5 Reset
CSS Reset
Eric Meyer's CSS Reset
5 things to do after CSS Reset

Font-Face

In my earlier version, I use "LeagueGothic" for headings. In current version I use Liberation as body text but set as 2nd choice after Georgia.

@font-face {
font-family: 'liberation_monoregular';
src: url('../_fonts/LiberationMono-Regular-webfont.eot');
src: url('../_fonts/LiberationMono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../_fonts/LiberationMono-Regular-webfont.woff') format('woff'),
url('../_fonts/LiberationMono-Regular-webfont.ttf') format('truetype'),
url('../_fonts/LiberationMono-Regular-webfont.svg#liberation_monoregular') format('svg');
font-weight: normal;
font-style: normal;
}

article{font-family:georgia, 'liberation_serifregular',times, serif; }

Text

p class="para1"

This is the first paragraph which has font size slightly larger than the usual text. This is the template I use to check my formatting and styling.

Font Size

When starting this page, I set the font-size to 62.5%. Before this page was completed, it was reverted to 100%. It made sense and simplier though I am used to the earlier setting as it is easier to calculate the actual font size. It may take some time to get use to it. Read here - Leave body font alone.

Strong Em Mark ABBR

STRONG
Sed strong lorem, nec varius velit gravida posuere.

bold
bold normal

EM -
Phasellus ut urna lectus. Integer turpis sapien, malesuada et velit.

i
italic normal

MARK
Donec massa quam, mark mark mark aliquet at tempor eu, mattis id lectus.

ABBR
ABBR for abbreviation and acroym

<small>
<small> - now use for small print normal text

strike
strike

del
del

sup
2nd day of March

sub
Normal subscript Normal

Codes and Pre

CODE -

<html>

<head>

<body>

</body>

</head>

</html>

Code single line
PRE - 
Suspendisse tempus  
dapibus enim malesuada.
turpis. Aenean eleifend 
raesent in molestie ipsum. 
ut commodo ac, sodales  
Proin iaculis hendrerit .
 PRE CODE 
<html>
   <head>
      <body>
      
      </body>
   </head>
</html>

BLOCKQUOTE

Aliquam quis dolor dui. Donec fringilla ligula eget enim egestas imperdiet. Ut id aliquet nisi. - websdiy

Etiam adipiscing, mi et interdum euismod, nulla erat faucibus eros, sed convallis nunc risus eu risus. Aliquam dictum, sapien id tempus viverra, nibh tortor gravida lectus, nec cursus mi diam non tellus.

Fusce in libero lectus. Cras nec ultrices orci. Cras dictum mauris lacus, at viverra lorem.

BLOCKQUOTE 2

Fusce in libero lectus. Cras nec ultrices orci. Cras dictum mauris lacus, at viverra lorem. Mauris pharetra ipsum vitae est - websdiy

List

Unordered Nested List

  • first level
  • lobortis non ipsum.
    • second level
      • third level
        • lobortis non ipsum.
        • lobortis ultricies ante.
          • fourth level
          • Nam urna ipsum, pellentesque et dignissim at
          • sed consectetur augue orci sed lacus
            • fifth level
            • Morbi pharetra porttitor malesuada.
            • lobortis non ipsum.
          • back to 4th level
          • Nulla facilisi. Quisque eget congue enim.
        • back to 3rd level
        • Morbi pharetra porttitor malesuada.
        • Sed rutrum metus vitae lacus fermentum sed cursus est rhoncus.
    • back to 2nd level
    • Ut lacinia tincidunt ultrices.
    • Nam urna ipsum, pellentesque et dignissim at
    • sodales sed elit.
  • back to 1st level
  • Fusce aliquam, tortor id laoreet scelerisque

Ordered List

  1. turpis leo tempus ligula
  2. sed consectetur augue orci sed lacus
    1. <li value="21"> level 2
    2. Morbi pharetra porttitor malesuada.
    3. lobortis non ipsum.
      1. < li value="231"> level 3
      2. sed consectetur augue orci sed lacus
    4. back to level 2
  3. back to level 1
  4. Morbi pharetra porttitor malesuada.
  5. lobortis non ipsum.

definition list <dl>

<dt>Lorem ipsum dolor sit amet</dt>
<dd>One Sentence </dd>
Nulla ligula orci, scelerisque sed dignissim ac,
Sentence 1 - gravida posuere ipsum. Sed porttitor vehicula lorem,
Sentence 2 - nec varius velit gravida posuere.
Vestibulum et lectus ipsum, laoreet ultrices arcu.
One Paragraph - Etiam ut velit erat, et luctus arcu. Quisque vel justo magna. Duis sollicitudin quam a urna adipiscing at vehicula nisi porttitor. Etiam diam nisi, euismod quis vehicula a, lobortis eget tortor. Vivamus ac ante neque.
Phasellus ut urna lectus.
Paragraph 1 - Integer turpis sapien, facilisis vel egestas nec, malesuada et velit. Donec massa quam, aliquet at tempor eu, mattis id lectus. Morbi non neque lacus. Proin quis mauris eget magna imperdiet tempus id facilisis neque. Nam ut tortor magna, non egestas nisl. In quis velit risus, mollis lacinia odio. Sed a sapien neque, sit amet laoreet elit.
Paragraph 2 - Cras quis sapien nec turpis blandit elementum. Etiam adipiscing, mi et interdum euismod, nulla erat faucibus eros, sed convallis nunc risus eu risus. Aliquam dictum, sapien id tempus viverra, nibh tortor gravida lectus, nec cursus mi diam non tellus. Aliquam quis dolor dui. Donec fringilla ligula eget enim egestas imperdiet. Ut id aliquet nisi.

Boxes

Boxes classes .explain, .contnote, screen .signup, .announce, .broadcast, .special

I've created too many boxes over the years that they're becoming confusing. Most of the time, I use this box and forget about the rest. As other boxes are no longer necessary, it's time to delete the rest.

Currently, I am experimenting with multiple classes for boxes that will make coding of boxes easier.

A paragraph after the box Div to code the margin below the box.

signup

Original used to invite visitors to sign up my newsletter. May no longer be necessary.

Pellentesque convallis vestibulum urna, ut varius nisl fringilla malesuada. Aenean in eleifend diam.

screen

This is the box used for showing result of how the screen should look like in coding HTML segment.

See My First Web Page

Aliquam non sapien nisi. In tortor risus, pretium a dignissim quis, scelerisque a lectus.

Announce

Used for announcement in one of my sites. Over at tpgc, I used big font to announce club closed for holiday. Or AGM - attendance by members only.

broadcast - merged into announce

This box has become redundant as usage is the same as box for announcement. I may have created Announce for one site and Broadcast for another and thus the confusion.

Quisque dapibus sodales lacus quis dapibus.

Special

Three boxes may just be needed.

One for Expain, another of Screen and lastly one for Special Offers

One box div with multiple classes to replace all other boxes

New Box

<div class="box w80pc rad10 pad3pc bgannounce mar30a">

This is a box of text I sometimes use to replace the larger font of Paragraph one. It may look better than the larger font since no images are used in the upper fold.

With this box under heading one, the h1 looks better. With larger font for paragraph 1, it may be necessary to increase the size ot the heading, But then again, it may look OK for the home page, but not every page.

Sed rutrum metus vitae lacus fermentum sed cursus est rhoncus. Praesent neque est, pulvinar et feugiat vitae, lobortis ultricies ante. Ut lacinia tincidunt ultrices.

Images and Advertising class=linebot

Nam cursus neque non ante lobortis eu rhoncus nisl blandit. Vivamus facilisis, felis quis volutpat ullamcorper, ligula orci porttitor nisl, eu pulvinar leo turpis a sem. In in enim nibh.

Phasellus dictum, justo id feugiat condimentum, orci ligula semper elit, ut scelerisque metus turpis vitae arcu. Pellentesque elementum, mauris eu ullamcorper sollicitudin, purus leo congue justo, ac eleifend quam nisl ac purus. Sed volutpat porttitor nibh, ac lacinia enim hendrerit et. Phasellus vel eros eu nulla ultrices dapibus. Proin vehicula, nisl eu sollicitudin posuere, enim velit rutrum enim, ac sodales ipsum magna tempus dolor. Donec dictum tellus et ipsum molestie at pretium ipsum interdum. Pellentesque in rutrum elit. Fusce venenatis sapien ut sem rhoncus eget egestas nisl sollicitudin. Sed congue cursus leo non imperdiet. Mauris quam lectus, sagittis ut aliquet commodo, iaculis laoreet ipsum. Vestibulum pulvinar laoreet urna vel posuere. Duis sodales libero id lorem tincidunt vel condimentum sem sollicitudin. Nam tincidunt, tortor ut consequat commodo, justo enim mattis tellus, at lacinia nibh mi at est.

Morbi ac mi lacus, in consectetur arcu. Nunc viverra nulla id neque luctus sit amet auctor lorem fermentum. Vivamus vel egestas nunc. Duis a diam sapien, id bibendum turpis. In a elit vel massa ullamcorper euismod. Phasellus at turpis lectus, sit amet viverra augue. Maecenas odio ipsum, eleifend consequat dapibus ullamcorper, porta rutrum nisl. Sed sem eros, faucibus tempus condimentum a, malesuada at metus. Quisque id consectetur lorem. Aliquam vitae est nibh, ac lobortis odio. Nunc justo elit, dapibus ut blandit varius, fermentum sit amet metus. Cras malesuada vulputate ullamcorper. Nam id erat sed mauris rutrum porttitor vitae a quam.

Proin viverra lorem id nisl ultricies nec ultrices diam placerat. Praesent turpis massa, fermentum et sollicitudin a, tristique vel eros. Suspendisse porta, leo non dapibus pharetra, lorem lorem luctus risus, ut varius leo diam non metus. Vivamus venenatis consectetur metus, sit amet facilisis tortor cursus sit amet. Phasellus consectetur gravida nisl, eu vestibulum sapien faucibus sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec fermentum urna sed dui semper ac aliquam turpis dictum.

Nulla ac libero vitae erat porta luctus quis et ante. Donec feugiat fermentum sem ac pellentesque. Donec quis orci eu magna porta pretium. Maecenas gravida nisl in tellus tincidunt id hendrerit metus luctus. Cras non tellus in mi imperdiet suscipit nec ultrices lacus. Suspendisse eu neque at sem mattis suscipit. Etiam tincidunt lorem ac velit ornare et dignissim ipsum egestas. Suspendisse potenti. In vitae nulla ut mauris pharetra euismod. Suspendisse quis arcu id mi viverra eleifend non at massa. Cras tincidunt fermentum dignissim. Suspendisse vehicula pulvinar mauris vitae tempor.

Donec semper sodales dignissim. Mauris pellentesque egestas odio, eget rutrum odio tempus ac. Donec viverra nibh in nisl dictum ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra semper adipiscing. Maecenas non mauris ipsum. Morbi suscipit fermentum arcu, eget consequat ligula interdum vel.

Form Labels Button Search

H3 Radio Button Choice

Google Search

To adjust width of Google Search so as to fit into smaller screen. The Google's original code is left untouched:

input[type=text] { width:50%; /*google search*/}

 

Table

<caption>Caption</caption>

is coded immediately after <table>

Caption
Proin viverra Proin viverra viverra lorem
id nisl ultricies nec id nisl ultricies nec id nisl ultricies nec id nisl ultricies nec
ultrices diam placerat ultrices diam placerat ultrices diam placerat ultrices diam placerat
Praesent turpis massa Praesent turpis massa Praesent turpis massa Praesent turpis massa
libero dictum consequat libero dictum consequat libero dictum consequat libero dictum consequat

To Add

  1. webkit
  2. slide
  3. canvas
  4. videos
  5. boxes with shadows

Responsive Web Design

And lastly, if you are building from scratch or doing a redesign, consider this seriously - build your site for multiple devices. Be it Responsive or Adaptive, more users are accessing your site with a mobile device.

In fact, this should be the first consideration. I put this last as this is not a topic on Responsive Web Design. It's about setting your presentation. Nevertheless, consider this seriously. You'll spend more time now on the CSS file, but the effort is worth it. You'll save time on redesign or degrading the styling for media queries later.

Sooner or later, you'll have to come back to this!


See more Lorem Ipsum at:

Templates
Single Column
Download Squeeze page
websdiy home page
websdiy 2nd home page
404 not found
subdomain
Two Column
9 steps
HTML template
FAQs template
Three Column
Resources template
Sitemap template
Blog template - child of twentyeleven
Templates Help
DummyText Template
How to copy template from this site
How to customize any template
Best template for your website
Professional Templates
Template Monsters

SBI!


eskay ng

by eskay ng