Jump to content

Need some help on the following html/css


Recommended Posts

I need some help on whether or not the following code is correct.


Here's the code:





<div class="free_fly_line"><span class="free">FREE </span><span style="font-family: 'Open Sans',sans-serif; font-weight: 400; color: #000000; font-size: 15px;">fly line with this fly rod purchase [ $75 value <a title="Free Fly Line Details" href="http://mysite.com/freelineimage.jpg" target="_blank">details</a> ]</span></div>





display: inline-block;

font-family:arial, sans-serif;


font-size: 17px;

line-height: 20px;

height: 20px;

padding: 3px 7px 4px 8px;

background-color: #818f02;

color: #ffffff;

margin:0px 5px 0px 0px;













I need to know if I am using things properly to achieve the results I want. I'm also learning pretty fast that I should define EVERYTHING with css so if I need to make a change sitewide I can. As I am creating pages and each is slightly different I get lazy and just make some text say bold/italic/green but I don't define it with a class, I make it inline, thus if it keeps appearing as I develop pages and I want to change styles later I have to go back manually...Lesson learned.

In the code above I did not define this line of text with a class"fly line with this fly rod purchase [ $75 value details]" I feel like I should as it's currently a span and I don't think I have control over it in my css if I want to change it later as it keeps reappearing on lots of pages. Do I make it a p tag and then add another css style, something like this to my css and obviously get rid of the inline style in the html:


.free_fly_line p {

font-family: 'Open Sans',sans-serif;

font-weight: 400;

color: #000000;

font-size: 15px;






Any help is appreciated.






Link to comment
Share on other sites

You would take style= and all its attributes out of the HTML

file. HTML is just for structure and content. CSS is for display.


Your best bet is to start at the beginning of the video series

and follow along step-by-step. That means pause the video and

do each step yourself. It's a great way to learn.

Link to comment
Share on other sites

Mick, thanks.


I have been learning as I go. I started off going through the w3 online info a few years ago and reading and learning as much as I can. Obviously asking questions here as well.

As I keep designing I keep learning.


My problem is I don't know how to streamline my css.


So, thats why I am asking this question. I'm looking for the best css approach to this situation without using the css incorrectly or creating css thats bloated and implemented improperly.


I could just make a class called X for the span, but I don't know if I should use the div class to my advantage somehow in this instance.



Link to comment
Share on other sites

Andrea here is the page. Still major work to do.




The part starts at the green FREE box and ends at details]. My goal is to have full control over that part and implement the correct html/css. I know how to do it, I just don't know the right way and the most efficient less bloated way.




Link to comment
Share on other sites

Is that a theme that you designed? Wordpress makes it a little more involved than just a regular website.

Taking an initial glance at the source on your index page, I note the following - and styling that line you're talking about, may not be the most pressing issue you have.


There is a whole lot of internal styling in your head section - split up on numerous style tags: (Note the missing 'b' for the background url line


<style type="[url=""]text/css[/url]">
header .site-logo { margin-top: 10px; }
</style> <style type="[url=""]text/css[/url]">
header .site-logo { margin-bottom: 0px; }</style>
<style type="[url=""]text/css[/url]">
#wrap { background: url(http://streamsofdreams.com/wordpress/wp-content/themes/
mondeo/skins/images/backgrounds/bg-9.png); }</style> 
<style type="text/css">#container{ 
ackground: url(http://streamsofdreams.com/wordpress/wp-content/uploads/2012/10/bgtest9.jpg)
repeat-y; background-position:center; padding:0px 0px 50px 0px; }  .
This part goes on and on, deleted it, not essential for this point
. } </style> <style type="[url=""]text/css[/url]">a { color:#de3f00}a:hover { color:#818f02}</style> <style type="[url=""]text/css[/url]">header nav ul li a { color:#ffffff}</style> <style type="[url=""]text/css[/url]">body { color:#474747}</style> <style type="[url=""]text/css[/url]">body {  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }</style> <style type="[url=""]text/css[/url]">h1 {  font-size: 20px; }</style> <style type="[url=""]text/css[/url]">h2 {  font-size: 18px; }</style> <style type="[url=""]text/css[/url]">h3 {  font-size: 16px; }</style> <style type="[url=""]text/css[/url]">h4 {  font-size: 14px; }</style> <style type="[url=""]text/css[/url]">h5 {  font-size: 12px; }</style> <style type="[url=""]text/css[/url]">header nav ul li {  font-size: 13px; }</style> <style type="[url=""]text/css[/url]">.post-text {  font-size: 14px; }</style> <style type="[url=""]text/css[/url]">.footer-widgets .widget h3 {  font-size: 17px; }</style> <style type="[url=""]text/css[/url]">.footer-copyright {  font-size: 12px; }</style>


[copy and paste of the code from 'View Source' to here messed things up - but I think you get the point]


As to the part in question, I'd incorporate that line into the entire 'itemright' division like so: (you have some spaces in the text between apostrophes and the 's' that don't belong there)


<div class="itemright">
<h3>Thomas and Thomas Heirloom Fly Rods</h3>
<div id="benstatement">
<p>Replicating the sweet action of bamboo with durable fiberglass. 
For today's angling purists, who delight in a fly rod that "paints" the fly on the water,
T&T created the Heirloom Series. Heirloom’s action is beyond sweet and subtle; just close your
eyes while casting and you’ll feel the smooth recovery of high-end bamboo. Achieved by using the 
latest generation of high-tech glass fibers, our Heirloom Series is designed to replicate bamboo’s
classic action in rich fly fishing tradition.</p>
<p><span class="free">FREE </span>fly line with this fly rod purchase [ $75 value 
<a title="Free Fly Line Details" href="http://streamsofdreams.com/wordpress/free-fly-line-details/" target="blank">





and in your CSS, just style .free and #benstatement a:


If this particular part only appears right here on this one page like that, then you can style it inline, internal, or external, but if it's used more than once, then don't go inline. The basic rules are:


External is NEVER wrong.


If used multiple times on just one page, the internal or external are ok.


If used just one time on one page, either one of these 3 is ok.

Link to comment
Share on other sites

Andrea, thank you.


The errors you see, for instance, the missing b, was a test for the bg but will be removed, thank you. I omitted the b so i could turn off the styling rather than deleting the whole css until I'm sure I won't use it.


Yes this is a wp theme. I did not make it. I just stylized it to fit my needs.


Once I am set on the site I will remove the inline styling from the head and add it to the core css. Right now the theme has an option to add your own styling in the cp. I use that to overwrite the linked css core site styling so I can see the changes without screwing up the original css. I will merge them when iI am done.


I see your fix, but how do i style this part"fly line with this fly rod purchase [ $75 value"

If i do it like you have it, it will appear as a regular p tag with p tag styling. (i think)I want to set off that line of text, maybe as bold etc and have control over it with css if i decide to change styling later. There are a lot of fly rods on the site and that FREE etc line will appear multiple times. So how do I do add css styling to that line. I have control over the FREE part with the span class="free" but not over the other text.





Link to comment
Share on other sites

The words "fly line with this fly rod purchase [ $75 value" look the same to me as the paragraph right above it. Granted, I didn't' compare to see what font, etc, you used, but it looks exactly the same.


If you do want it differently than the paragraph above, just add a different class to the p tag and style that one.

Link to comment
Share on other sites

Thanks Andrea.


Thats what I needed. I just thought there was a lot of css involved to accomplish a simple task. I guess that's the simplest way.


It's amazing how time consuming something like a simple box with text and then a link etc can be to accomplish.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...