Menu
Community /Pin to ProfileBookmark
@NogDogAug 11.2006 — #Here's a fairly simple example. It shows how all the visual layout stuff is transfered to the CSS (the <style> block in this case), leaving the actual content clean and mainly marked up with HTML elements that define the [i]meaning[/i] of the text, not its appearance.
@NogDogAug 11.2006 — #LOL - with the positive attitude and willingness to learn that you appear to have, you'll pick it up. There are a lot of possibilities, and some of it does get a bit complex. When you need inspiration, stop by www.csszengarden.com and view all the layouts there. (Note that the body content of every page is the same, all the visual differences come from the different CSS stylesheets that are used.)
For a pretty friendly tutorial, stop bywww.htmldog.com . (It's one minor drawback is that it assumes use of XHTML instead of HTML.)
CSS Newbie…Using CSS for text in a web layout…
I was going to use a normal HTML table to put text in, and it was giving me trouble, so someone suggested I post in CSS. While I know a lot of basic HTML, CSS is completely new to me. I read part of the tutorial from HTMLgoodies.com, so I know a little bit about it, but I don’t know how to get started or how I should use it.
Here’s the thing: I have a background texture on the page, and I want a text area with a background of #a9a9a9. Can someone get me started?
Sign in
to post a comment7 Comments(s) ↴
0
@NogDogAug 11.2006 — #Here's a fairly simple example. It shows how all the visual layout stuff is transfered to the CSS (the <style> block in this case), leaving the actual content clean and mainly marked up with HTML elements that define the [i]meaning[/i] of the text, not its appearance.[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
padding: 50px;
font: medium arial, sans-serif;
/* replace color and image name below with desired values */
background: #cccccc url(background_image.gif) repeat 0 0;
color: black;
}
/* the following will apply to the DIV element with id="main_text" */
#main_text {
margin: 0;
padding: 1em;
background-color: #a9a9a9;
color: black;
border: solid 3px #000000; /* change style, thickness and color as desired */
}
</style>
</head>
<body>
<div id="main_text">
<h1>Here Is the Title</h1>
<p>This is a paragraph. This is a test. It is only a test. This is
the end of the paragraph.</p>
<p>This is a paragraph. This is a test. It is only a test. This is
the end of the paragraph.</p>
</div>
</body>
</html>
[/code]0
@NogDogAug 11.2006 — #LOL - with the positive attitude and willingness to learn that you appear to have, you'll pick it up. There are a lot of possibilities, and some of it does get a bit complex. When you need inspiration, stop by For a pretty friendly tutorial, stop by