CSS - Changing text in External so it automatically changes in web pages

[AndyK]

Hi Guys,

I am new to CSS and I am having a little trouble.

All I am trying to do is changed the year date at the bottom of my web pages using "External" as I have many pages to change as I have a few web sites. I created a .css document called ex1.ccs and wrote this text in it: (Note: I haven't including anything else in there but this)


<style type="text/css">
p.arial {font-family: arial}
p.{font-size: 70%}
p.{text-align: center}
p class="footer">

{
<p class="footer">Copyright © 2004-2008 ARK Interiors. All rights reserved.</p>
}
</style>


Then in the HTML web pages I placed this in between the headers:


<link rel="stylesheet" type="text/css"
href="ex1.css" />


Then in the "Body" I placed:

<p class="footer">Copyright © 2004-2007 ARK Interiors. All rights reserved.</p>

at the bottom of the page.

Do I even need to write "footer" to just change the date?

Any help would be great!

The web site if you need to view the html code is:
www.ark-interior.com/contactus.html
Have also attached the .CSS file.

Thanks AndyK

[boogyman]

you are doing your style sheet incorrectly



p.arial {font-family: arial}


is the only declaration that is valid in your post, and it would be interpreted as this html statement


<p class="arial">




p.

is not a valid declaration. below is a "Convention Guide" if you will about declaring css styles



firstly you could assign a style on any element


element {
property: value;
}

in html that would be represented by


<element>


okay so now you have assigned the basic styles to your document, however you would like to enhance one of that elements tags. This enhancement occurs only once on this page, thus you use the id property
html that would like


<element id="unique">

the css for this element would be


element#unique {
property: value;
}



that is great... upon later development though, it is decided that more of this style should be implemented on this page. Therefore we have multiple occurances on this once page, so first we need to change our existing id to class and be sure to call all elements that we wish to use this one style the same.
The new html would look like


<element class="unique">


and now to assign the multiple values in our css we would need to change the # sign to a ., which would look like


element.unique {
property: value;


Above described the process of how to assign each in both html and css. One thing to note is that it is not generally advised you use id's and class's with the same name. Although it is not illegal, it can create problems when troubleshooting a stylesheet as well as get confusing for the developer to remember which was which. So be sure to use descriptive but unique names for each type and occurance. meaning do not put

id1
id2
id3

because those are not descriptive, but at the same time you cannot have

class1
class2
class3

because those are referencing different classes.

now as for your situation it appears you are focusing on the footer element. Since there should only be 1 footer per page we should be using the id property and footer is a descriptive and unique value that shouldn't be confused with another element easily.

so you try it... update your stylesheet using the above as a template and if you have any other problems let us know.




PS. welcome to the forums and for future reference when posting code please use
tags

[Twey]

Try a CSS tutorial (http://www.howtocreate.co.uk/tutorials/css/introduction).

[AndyK]

Thank you for your help.
I have looked over and over and over at your reply and I have tried to use it in the CSS sheet but I am very confused at what to have in there now as you said only one thing was right and I am not sure how to write anything now. I have been working on it for hours and it's becoming overwhelming.

Could you make it even simplier for me and write the exact code for the CSS sheet and then the HTML code for the web page. So I could just insert it. It would be a great help.

Sorry to be a pain and ask.

AndyK

[BLiZZaRD]

Okay, a couple things. first you have a css file ex1.css with this in it:



<style type="text/css">
p.arial {font-family: arial}
p.{font-size: 70%}
p.{text-align: center}
p class="footer">

{
<p class="footer">Copyright © 2004-2008 ARK Interiors. All rights reserved.</p>
}
</style>


the style tags are not needed (and cause problems) the browser knows it is a css sheet by the extension. That would be like using a javascript tag inside a .js file.

Second, you don't need to specifically declare paragraph tags, you can make classes and IDs and assign them in the HTML to what ever you want.

Usually a basic CSS sheet will contain the following:

body style: this is your overall look of the page, from font stuff, to back ground colors, indents, etc.
ul/li lists: you will define your unorder list elements, in these, are there bullets or not, how are they displayed, etc.
links: everything from active, hover, visited for your links will also be defined. Highlights, colors, etc.
address: you can define an address design, make font smaller, italic, etc. etc.

With just that you can design the overall look of your page. Then comes the "more detail". Using div's, paragraphs, body elements, and the like with similar attributes. you define classes (noted by a period before the name - .lowerClass - ) or IDs (noted by the pound sign - #upperId - ) in which you can redefine the colors, actions, states, etc.

a simple css might look like this:



body {
padding-left: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 600;
color: #BBBBDD;
background-color: #000000;
}

ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}

h1 {
font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}

h2 {
font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}

h3 {
font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}

hr {
border: none 0;
border-top: 3px double #CC0000;
width: 100%;
height: 3px;
margin: 10px auto 0 0;
text-align: left;
}

ul.navbar li {
color: blue;
background: #336699;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
}

ul.navbar a {
text-decoration: none;
}

a{
outline: none;
}

a:link {
color: #FF3030;
background: #000000;
}

a:hover {
color: #228B22;
background: #000000;
}

a:visited {
color: #CD2626;
background: #000000;
}

address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted;
}

img {
border-style: none;
}


#images {
text-align: center;
z-index: -100;
}

.first{
background: #CCCCCC;
border: thin dotted #FFF8DC;
font-family: serif;
font-size: 14px;
font-style: normal;
color: navy;
}

.second
{
background: #CCCCFF;
border: thin solid #9F2D41;
font-family: serif;
font-size: 15px;
font-style: normal;
color: red;
}


As you can see, if you go down line by line, I have defined a lot of things, colors, fonts, font styles, back grounds, background colors, etc.

To utilize this CSS I might have a page look like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tess Css Page!</title>
<link rel="stylesheet" type="text/css" href="CSSName.css">
</head>

<body>
<div id="images">

<h2>Testing of the page!</h2>

<div class="first">
This div is a different style than the body.<br>

Here we might add a photo:
<br>
<img src="image.gif" title="picture" alt="picture">

</div>
<div class ="second">
This div is even more different than the body or the other div<br>
Here we might have a link or two:

<a href="http://dynamicdrive.com">Dynamic Drive</a>

<a href="http://cleverwasteoftime.com">CWoT</a>

</div>
<hr>
I can then include my address as defined in the CSS:
<address>
mymail@me.com
</address>
</div>

</body>
</html>


Then you will want to run your HTML page through a validator service (http://validator.w3.org/) as well as your CSS (http://jigsaw.w3.org/css-validator/) to find and help fix any errors.

[AndyK]

Thank for all your help. It seems a lot of work just to change one sentence. But it will be worth it.
I will also read the CSS tutorial. I had already read http://www.w3schools.com/css/default.asp but I need to read more today.
Thanks for all your help and I will let you know how I get on.

[BLiZZaRD]

It does a lot more for your pages than change one sentence. It will make the view-ability and read-ability and code-ability ( I am making up words now) better for you and your visitors. And later in the year when you want to change again, you just need to edit the CSS file and it is done. ;)

Enjoy.

[AndyK]

Hello Blizzard,

Again thanks for your help. I think I need to buy CSS for dummies or should I say CSS for I have no brain at all. Lol.

So where is this code going, in the CSS and web page I take it? And do I need to change anything to it and what code do I put in the web page in front of "Copyright © 2004-2008 ARK Interiors. All rights reserved." the same thing?

I.E.: CSS would look like this:


body
p.arial {font-family: arial}

{
var beer:Number=1;
var hands:Number=2;
if (_root.beer <= _root.hands) { _root.beer +=1; }; Copyright © 2004-2008 ARK Interiors. All rights reserved.
}
</body>


And my web page would look like this:


<head>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="arkex1.css" />
</style>
</head>

<body>
<var beer:Number=1;
var hands:Number=2;
if (_root.beer <= _root.hands) { _root.beer +=1; };Copyright © 2004-2008 ARK Interiors. All rights reserved.
</body>


It doesn't need any tables, colors, margins, etc, I just want to change the 2007 to 2008, 2009 and so on every year. Nothing else.

Cheers AndyK

[BLiZZaRD]

Wow.. okay no.. that "code" is in my signature. It has nothing to do with anything except stating in ActionScript that I need another beer.

:D

I guess I will have to change that siggie..

[AndyK]

Ok now I am completely and utterly lost. Thanks for your help, I will figure it out.

Cheers AndyK

[JohnRostron]

Putting a line of text into each of your pages is beyond CSS2/CSS2.1. There is are pseudo-selectors :before and :after which should allow you to insert content, but these are not widely supported.

You really will need to insert some text into each of your pages. If you are using php, all you need is to include an insert statement for the text to include. Otherwise most HTML editors will allow you to make a global search and replace, which will allow you to insert a block of text site-wide.

In your case you would replace

</body>

by

<p>Copyright © 2004-2008 ARK Interiors. All rights reserved.</p>
</body>

John

[Twey]

They are widely supported -- the only browser that doesn't support them is IE.

sed (http://unixhelp.ed.ac.uk/CGI/man-cgi?sed)(1) is your friend for the latter option.