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;
}
confused with CSS. please help.
Moderator: General Moderators
Re: confused with CSS. please help.
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.
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.
Re: confused with CSS. please help.
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:
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:
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:
Same for images:
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.
Code: Select all
<style type='text/css'>
css here
</style>
Code: Select all
<link rel='stylesheet' href='style.css' type='text/css' />
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>
Code: Select all
<style type='text/css'>
.imgClass {
border:solid thin;
}
</style>
<img src='xyz.jpg' width='100px' height='100px' class='imgClass' alt='xyz' />
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
------------------------------------
Web Developer | Software Developer
https://kalebklein.com
PGP Key: https://keybase.io/pazuzu156