Jump to content

Changing a letter throughout the page

Parkpre

By Parkpre
in CSS

 Share

Recommended Posts

Parkpre Newbie

Parkpre

Posted
Posted

right firstly Hi! :) Im using CSS to control how my links look in my pages using:

A:link {text-decoration: none; color: white;}A:visited {text-decoration: none; color: white;}A:active {text-decoration: none; color: white;}A:hover {text-decoration: underline; color: white;}

My links look like this [My Link]what id like to do is change the color of the '[' and ']' through out my pages!any suggestions how this could be done using CSS? tried searching but didnt find anything?Cheers! :)

Link to comment
Share on other sites
real_illusions Dedicated Member

real_illusions

Posted
Posted

only one way that i know is to use the span tags<span class="linkbracket">[</span>and the css would look like thisspan.linkbracket{color: #0000FF;}that would make everything within the span tags the colour blue.

Link to comment
Share on other sites
snowboard01 Member

snowboard01

Posted
Posted

Well ya one thing I must point out is

  • The Style tag is depracated!
  • Span tags are not the only way! There are divs like this
    <html><head><title>Divs</title><style type="text/css".style{color:#FF0000;display:inline;}</style></head><body><div class="style">This works</div><b class="style">So does this</b><em class="style">So does this</em>There are even more but I won't go on.</body></html>

Link to comment
Share on other sites
Tarte Newbie

Tarte

Posted
Posted
only one way that i know is to use the span tags<span class="linkbracket">[</span>and the css would look like thisspan.linkbracket{color: #0000FF;}that would make everything within the span tags the colour blue.

no need to writrespan.linkbracketyou can only write the span's name :.linkbracket{CSS}
Link to comment
Share on other sites
snowboard01 Member

snowboard01

Posted
Posted
no need to writrespan.linkbracketyou can only write the span's name :.linkbracket{CSS}
Yes that works but it is completly optional. When I Have a specific case like that were the span is only applying to one place I like to be specific like:
span.linkbracket

Just to point it out.

Link to comment
Share on other sites
SFB Member

SFB

Posted
Posted

It may not be needed (like in this situation) but sometimes it is a good idea. I always add it because sometimes by accident i will repeate a class name without noticing. like lets say i was working with a tabe and its class was title and the div in the table i may also call title unless i notice that i have alredy used title. if you place the element first table.title is different form div.title where .title and .title would confuse the browser.

Link to comment
Share on other sites
snowboard01 Member

snowboard01

Posted
Posted
It may not be needed (like in this situation) but sometimes it is a good idea. I always add it because sometimes by accident i will repeate a class name without noticing. like lets say i was working with a tabe and its class was title and the div in the table i may also call title unless i notice that i have alredy used title. if you place the element first table.title is different form div.title where .title and .title would confuse the browser.
Exactly :) esspecailly in cases like this
#title{position:absolute;width:850px;height:100px;top:0px;border-style: solid;border-width:1px;left: 0px;}.holdiv{top:110px;background-color:transparent;width:750px;position: absolute;left:110px;}#content{width: 745px;position:absolute;height: 495px;background-color: yellow;top: 0px;left:0px;padding: 5px;}#menu{height: 100px;width: 100px;position: absolute;left: 0px;top: 105px;}a.menu{font-weight: bold;display: block;color: black;background-color:blue;padding: 3px;text-decoration:none;width: 100px;}a.menu:hover{font-weight:bolder; display:block;color: yellow;background-color:red;width: 100px;}ul{list-style-type: none;padding:0px;margin:0px;}li{border-bottom-style: solid;border-bottom-width: 4px;}a.portfolio{color: blue;background-color: yellow;display: inline;font-weight: normal;padding:0px;text-decoration:underline;width:500px;height: 100px;}body{background-color:orange;}#image{height: 100px;width: 850px;}.text{padding-right:5px;padding-left:5px;}#r1 {display: block;height: 1px;background-color: yellow;margin: 0px 5px;}#r2 {display: block;height: 1px; background-color: yellow;margin: 0px 3px;}#r3 {display: block;height: 1px;background-color: yellow;margin: 0px 2px;}#r4 {display: block;height: 1px;background-color: yellow; margin: 0px 1px;}#r5 {display: block;height: 1px;background-color: yellow;margin: 0px 1px;}

Soon I will have to make r1-r5 again only with a few different properties. You know what I will probably name them? r1-r5. Had I done this:

div#r1 {display: block;height: 1px;background-color: yellow;margin: 0px 5px;}div#r2 {display: block;height: 1px; background-color: yellow;margin: 0px 3px;}div#r3 {display: block;height: 1px;background-color: yellow;margin: 0px 2px;}div#r4 {display: block;height: 1px;background-color: yellow; margin: 0px 1px;}div#r5 {display: block;height: 1px;background-color: yellow;margin: 0px 1px;

The other ones will be B#r1 ect. had I simply done .r1 it would have exausted the names and I would mess up the code. Then i'd puzzle for two hours then I'd realize that it was the names. This is the easy way to avoid hours of frustration.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...