Podcast: Play in new window | Download
Subscribe: RSS
After GRAMMY week, the Dry Tortugas, and a nasty bug, we’re back with a vengeance with an intro to modern web design, a visit with Timothy P. Green, and a special Announcement.
CSS Zen Garden
A really cool example of how the exact same HTML web page can be modified in a zillion artful way, simply by changing the .css file(s) to which it points. Really amazing. Just click on any one of the list of alternate designs, like “Mid Century Modern” or “Apothecary.” The underlying HTML is exactly the same, but the look of the site changes entirely! (One of my favorites, of course, is “Under The Sea!“)
HTML Example
Here is an example of what you might find in a *very* simple HTML file for a website page. Note the link in the <head> section to the CSS style sheet style.css.
<!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>This is a Headline</h1> <div class="nav-container"> <ul class="navlinks"> <li><a href="about.htm">About</a></li> <li><a href="studio_a.htm">Studio A</a></li> <li><a href="suite_t.htm">Suite T</a></li> <li><a href="equipment.htm">Equipment</a></li> <li><a href="clients.htm">Clients</a></li> <li><a href="contact.htm">Contact</a></li> </ul> <div class="logo"></div> </div> <p>Here is a paragraph of body text, surrounded by the paragraph tag.</p> </body> </html>
CSS Example
Here is an example of a CSS style sheet file (styles.css, in this example) that might go with the the above HTML file, and which would set the color and size for <h1> headline items and for items surrounded with the <p> paragraph tag.
@charset "UTF-8"; /* CSS Document */
h1 {
font-size: 24px;
font-color: purple;
font-weight: bold;
}
p {
font-size: 1em;
font-color: black;
}Incidentally, if you notice how the above examples are formatted, it’s pretty cool and simple: I simply put the tag <pre> before each example (and of course, </pre> afterward), and the .css style sheet associated with this WordPress theme (or with my Chrome browser) does all sorts of cool styling things like using a fixed width font, putting it in a grey box with a border, etc. The Chrome browser likely has a built-in style for displaying the HTML <pre> tag…which control how the text looks unless overridden by a .css file in the WordPress theme.
The way Content Management Systems like WordPress work is a little more complex than in the code examples above, where the static HTML page simply and directly links to its associated Cascading Style Sheet (in our example, “style.css”).
Modifying a WordPress Theme the Right Way
Below is an example of how I’ve modified the look of the WordPress theme called “Responsive” (which you’ll notice is itself based on the theme Omega) in order to make the links red. Instead of modifying “style.css” in the Responsive theme directory (which is installed in my WordPress installation), I’ve created a new folder “redninja” parallel to that, with its own “style.css”..which imports all of the style rules from the Responsive theme, only overriding the rule that I want to modify. In this way, if I install an update to the Responsive theme, my modifications won’t be lost. That’s the proper way to do it.
/* Theme Name: Red Ninja Description: A Child Theme of Omega Template: responsive */ @import url(../responsive/style.css);
a {
color: #AA0000;
}
Bradford has done it again.
Using Bradford’s simple and concise directions/ descriptions regarding HTML and CSS and the various components involved I was able to set up and develop my first responsive website page using WordPress complete with 960 pixel resolution using only my iPhone. All this while driving 75 mph on my interstate commute home today!
BRAVO Bradford
Robby, you seem familiar. Have we met? FYI, that 960px fixed width layout will probably give diminishing returns as time goes on…but the most important thing is that you should never ever do web design at over 55mph.