List of Class Containers & Things

There are several ways to style a website. The easiest way is to use Cascade Styling Sheets (CSS), where styling control for the entire website is centralized in a single file. The problem, as the website grows, is keeping track of all the styling classes.

DIV is a HTML tag that plays a major role in DIViding the website. For example, a DIV tag divides the site into a global wrapper, header, footer, main text area and side-bar. A DIV tag can be styled using its own identification (id) label in the CSS file. A “class” is a sub style of the DIV container. Sort of like an add-on to the DIV tag.

I’m DIViding the site text area into boxes and assigning class style to the DIV tag. What I am doing is framing the text area for thumbnail images and text, using different class styles.

For RSS Feeds no bottom margin

<DIV class="rss-box">Hello</DIV>
Hello

For image dir 20 px bottom margin

<DIV class="dir-box">Hello</DIV>
Hello

Modified Blockqoute or b-quote

<blockquote>Hello</blockquote>

Hello


Caption style

<DIV class="wp-caption">Hello</DIV>
Hello

<DIV class="rss-box">Hello</DIV>
Hello

<DIV class="rss-box">Hello</DIV>
Hello

For text 20px bottom margin

<DIV class="text-box">Hello</DIV>
Hello

For image galleries no bottom margin

<DIV class="image-box">Hello</DIV>
Hello

For a small quote text

<DIV class="block">Hello</DIV>
Hello

Yellow highlight

<DIV class="rss-box"><span class="hl">Hello</span></DIV>
Hello

<DIV class="rss-box">Hello</DIV>
Hello

<DIV class="rss-box">Hello</DIV>
Hello

The post List of Class Containers & Things appeared first on Rapunzel's Delight.


Notice: Undefined property: WPOMatic::$admin in /var/www/vhosts/j-ext.net/wp371/wp-content/plugins/wp-o-matic/wpomatic.php on line 319

Notice: Undefined property: WPOMatic::$admin in /var/www/vhosts/j-ext.net/wp371/wp-content/plugins/wp-o-matic/wpomatic.php on line 319