confused with CSS. please help.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jdoe
Forum Newbie
Posts: 14
Joined: Sun Sep 12, 2010 8:50 pm

confused with CSS. please help.

Post by jdoe »

Hi guys.

I am new to CSS. I downloaded a CSS template and below are the default values given in the CSS file.
However, in my web I need to put an icon/image which :

1. is clickable (<A HREF=...
2. does not have any of the border formatting (including the underline of a link) which is inherited from the default CSS values.

Can you teach me how?

Thanks.


Below are the default CSS values.

/* links */
a {
background: inherit;
color: #EC981F;
}

a:hover {
background: inherit;
color: #806B4D;
}

img {
border: 2px solid #CCC;
}
a img {
border: 2px solid #EC981F;
}
a:hover img {
border: 2px solid #806B4D !important; /* IE fix*/
border: 2px solid #EC981F;
}
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: confused with CSS. please help.

Post by califdon »

http://www.w3schools.com/css/default.asp
You can learn how to use CSS and even try things interactively.

For example, if you don't want a border around ANY of your images, you can just change the style in your CSS for "img" to "border:none;" Likewise, change the style for "a" to "text-decoration:none;" But if you only want to change it for a particular <img> or <a> element, you can either use an inline style like: <img src='xyz.jpg' style='border:none;' /> or, better yet, give it an "id='xyz'" and add a style in your CSS for #xyz.

The tutorial above will show you all this and more.
User avatar
Pazuzu156
Forum Contributor
Posts: 241
Joined: Sat Nov 20, 2010 9:00 pm
Location: GA, USA
Contact:

Re: confused with CSS. please help.

Post by Pazuzu156 »

In agreeing with the post above, define image borders and links in the css and apply the class to them. Saving you a heap of trouble in the long run. If u need to include the css into your page, do so like so:

Code: Select all

<style type='text/css'>
css here
</style>
OR, link an external css. Say it's names style.css and you want to apply the same css template to all your pages, linking saves you so much trouble, plus you can change the css file itself and it will apply to all pages linked with the css automatically. Use this:

Code: Select all

<link rel='stylesheet' href='style.css' type='text/css' />
With images, there is no need for borders unless it goes with your webpage. With link decorations, keep them default if you have a white page background. If you want to change them according to the style of your page, do it like so:

Code: Select all

<style type="text/css">
body, html {
background-color:#DFDFDF;
}
a:link { color:#333333; text-decoration:none; }
a:visited { color:#333333; text-decoration:none; }
a:hover { color:#FFFFFF; text-decoration:underline; }
a:active { color:#333333; text-decoration:none; }
</style>
Same for images:

Code: Select all

<style type='text/css'>
.imgClass {
border:solid thin;
}
</style>
<img src='xyz.jpg' width='100px' height='100px' class='imgClass' alt='xyz' />
Note, according to rules from the W3Consortium, you MUST include an alt attribute within the img tag for handicap accessibility.
Hopefully this will help you as well as give you a short tutorial in css.
- Kaleb Klein
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156
Post Reply