But, NO, the WP WYSIWYG Editor repeatedly changed all the “b” box codes to “strong”. Go figure!
Here’s an outside link so you can see the demonstration for creating round corner boxes with CSS Only
I still use tables ….. WHAT? But NOT for what you think. I use tables when I have to show some kind of a schedule, or data presentation….. and I style my tables with CSS, so I don’t have to mark up each <tr> and <td> tag to present them…….
You must have heard by now that designing with tables is becoming obsolete. CSS is the professional easy way to design web pages, and it has quickly become a must-have for standards-compliant websites.
At first new web designers think OMG Rules! But, these rules make it easier in the end, which is what? Designing a web page that can be viewed in any web browser and can be accessed by anyone who may need screen-readers, braille devices, or who want to print information or receive via a cell phone or i-pod. This is ALL available now by using standards-compliant (X)HTML for markup and content, and CSS for design. No more "transparent gif’s" to create white space between your page elements.
CSS (Cascading Style Sheets) allow you to separate the content of your website from the design, making both much easier to update and much friendlier to search engines. Search Engines look for CONTENT, not endless redundant and empty <tr> and <td> tags.
Tables require much more mark-up in the
of your web page This means it takes longer to download, and more bandwidth useage.Tables are usually slower to layout for the browser because tables require mathematical calculations by the browser engine which means it takes longer for people to actually view your pages.
Tables usually prevent incremental rendering. In other words your page is loading away in the background revealing nothing but a blank white screen with little parts showing up bit by bit.
Tables may require you to chop single, logical images into multiple ones. You’ve seen those web designs where the header image is all in small pieces designed to fit within a table cell. Very difficult to change the look of your page.
Once you know CSS, table-based layouts usually take more time to implement. Over the past few years I have created simple templates. One-column, Two-column, and Three column, as well as some unusual ones that mimic a frames layout.
Tables are semantically incorrect mark-up for layout because tables describe the presentation, not the content – which is what people came to your page to see… CONTENT.
People who use screen-readers have a terrible time with table-based layouts. Wouldn’t you want to make your website content available to everyone?
Tables lock you into the current design and make re-designs MUCH harder than semantic
I created this unusual graphic effect in only a couple of minutes, using a background image I already had on my computer. The topmost box is NOT a graphic but is styled with special background color, and special border styles, heights, and colors – to make it look like a picture frame.
Here’s how you do it:
div.outerbox
{
margin:0 auto;
width:500px;
height:250px;
background:url(img/roses.jpg) no-repeat;
border:4px solid black;
border-color:#eee #aaa #ccc #ddd;
}
div.innerbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#fff;
border:10px solid black;
border-color:#eee #aaa #ccc #ddd;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.innerbox h1
{
margin:30px 20px;
font-weight:bold;
color:#000;
text-align:center;
}
Continue Reading »
I have had requests from a lot of people who still hang on to their table-based layouts to help them align images on their pages. Somehow the table structure does weird things to image and text placement.
Using CSS properties to place images on a page is so easy that I can’t understand why those people still cling desperately to placing images in table data cells and hope they don’t break their layout.
First of all, I create a rule for the img Selector:
img
{border:0;}
If you are using banners or images as links on your pages, this will ensure that that ugly blue border doesn’t appear. The other bonus of this is that you don’t have to add border=”0″ to each <img /> tag on your page.
Next I create two “img classes” which will place the images either on the left or right side of the page.
img.left
{
float:left; /* the float property places image on left side */
margin:5px 30px; /* top and bottom margins are 5px, left and right 30px; */
margin-right:5px; /* overrules the right-margin declaration of 30px so there is less white space between the image and the text */
}
img.right
{
float:right; /* the float property places image on right side */
margin:5px 30px; /* top and bottom margins are 5px, left and right 30px; */
margin-left:5px; /* overrules the left-margin declaration of 30px so there is less white space between the image and the text */
}
This last class a “clearing class” which can be used if you want your text to not wrap around the image, but instead drops down under the image, back in the normal flow of the page.
.clear
{clear:both;}
So much easier than trying to fit images into table data cells.
The (X)HTML
<img class=”left” src=”someimage.gif” title=”description of your image” alt=”description of your image” />
You can automatically capitalize the text of your h1 – h6 tags in your code using the rule -
text-transform:capitalize;
How to Use This Rule
h1, h2, h3, h4, h5, h6
{text-transform:capitalize;}
(X)HTML
<h1>the first heading on my web page</h1>
Using the “text-transform” declaration will automatically capitalize the first letter of each word in your <h1> tag.
I have seen a LOT of people purporting that they know how to create websites with CSS. But, when I see style rules such as:
img
{border:none;}
I cringe. The criteria for any style rule whether it be an element, class or id: If it has a NUMBER associated with it such as; 1px the value associated with that, if you want that value to be NOTHING is “0″, not “none”.
So, basically this is how that would work: Continue Reading »
Learn to write neat, easy to read Style Rules and HTML Code. You will save yourself a LOT of work and frustration by always doing things the same way every time and organize your Style Sheets. This is how I organize mine so if I need to edit or find some error, it’s way easier to work with:
Style Sheets:
By organizing your Style Sheets in this order ALL THE TIME, you create a pattern that you can follow for every website you design. Continue Reading »
This is HOW I got started using CSS to design my websites.
My very first website was green, red and white. I had hyperlinks on the pages that were the “default” bright blue. Being an aesthetic kind of person, that bright blue color looked gawd-awful. While I was surfing around the Internet I found some pages that had links on them, but, guess what? They were NOT bright blue. I had to find out how they did that.
I “viewed the source” and discovered some weird “style” stuff in the <head> of the web page. So, Continue Reading »
Let me ask you a question. How would you normally define the main elements of your website?
Like This?
<body bgcolor=”#FFFFFF” link=”#0000FF” vlink=”#800080″ alink=”#FF0000″ font face=”Arial, Helvetica, Sans Serif” size=”+2″ color=”#000000″>
OR – Like This:
<body>
The first example is the “old-fashioned” HTML – WYSIWYG way of defining how the main elements of the body will display on a web page.
The second example is how the HTML would appear if you “styled your body (tag)” in a Style Sheet.
OK – How does the browser know what to display, based on an opening <body> tag like that?
In the <head> of your document you add this: Continue Reading »
The worst way to create well-designed web pages is to use a WYSIWYG Editor. They may look like they’re doing the job, but what is happening is the code created by these monstrosities is almost unreadable and uneditable.
By creating NEAT organized Styles in a stylesheet, you have effectively removed about 75% of the junk out of your webpage. JUNK that will drive you nuts.
Some webmasters who create CSS Stylesheets, copy and paste code from a bunch of different websites because they don’t know how to create their own style rules. The result is a mish-mash of messy hard to read style rules.
There are 3 steps to good web page organization: Continue Reading »
