Linking to an external css stylesheet

kwts
July 1, 2012 at 9:00 pm #4940
I’m building a table and want to call on some css coding for speech bubbles so the bubbles appear in each section of the table.

When I put this code into the html editor, all looks great:
```
<link rel="stylesheet" href="

http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css">

<style type="text/css">



</style>
```
However, the code disappears when I make any alteration to the visual editor?

This may be a newbie question, but is there another way I should be linking to my speech bubble stylesheet? Or do I have to never touch the visual editor?

http://www.knowwhattosay.com/?page_id=110
Mod
Kenneth John Odle
July 1, 2012 at 10:37 pm #29987
If you are using a child theme, you can simply add those codes to the child theme’s style sheet.

 are HTML comment markers. Anything you place between them will be ignored by a browser, so there is no need to repeat that.

This code
```
<link rel="stylesheet" href="

http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css">

<style type="text/css">
```
is for creating an internal stylesheet.

You can link to an external style sheet, but you will need to use a child theme and link to it via WordPress’s wp_head() action hook. The code looks like this:
```
add_action ('wp_head', 'extstyle' );

function extstyle() {

echo "<link rel='stylesheet' id='graphene-stylesheet-css'  href='http://www.example.com/styles.css' type='text/css' media='screen' />";

}
```
The href works best if it is an absolute URL. If you understand media types, you can add style sheets for whatever device you care to support.

But seriously, if you’re going to go through that much trouble, it’s easier (and probably helps page load times) to just include that code in a child theme style sheet.
kwts
July 1, 2012 at 11:17 pm #29988

Hi Kenneth,

Thanks for this. I am using a child theme. I would much rather create internal stylesheets and put code into the child theme style sheet. I am though still a little stumped. Right now I have the code you suggested

‘<link rel=”stylesheet” href=”

http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css”>

<style type=”text/css”>,

In my Graphene Child Style Sheet.

I have the speech bubble code I am calling to, in my wordpress media library, with the url above.

I have a table produced on my shop page.

What code do I need to put in my html editor on the shop page to get the speech bubbles into the table?

Apologies if I am asking basic questions. I learnt enough to get it working, but have no idea how to fix this in wordpress!

Admin

Syahir Hakim
July 1, 2012 at 11:33 pm #29989

Quote:

I am using a child theme. I would much rather create internal stylesheets and put code into the child theme style sheet.

If you’re using a child theme, just place all of the additional CSS into the child theme’s style.css file. There’s no need to create another separate CSS file.

Mod

Kenneth John Odle
July 1, 2012 at 11:35 pm #29990

What you need to understand is that <link rel="stylesheet" href="http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css"><style type="text/css"> is HTML and not CSS, and thus doesn’t belong in your style sheet.

That code above will only work if you are inserting into the <head> of an HTML document. The only way to do that on WordPress is to use a child theme and hook it to the wp_head() action hook I mentioned above.

Quote:

What code do I need to put in my html editor on the shop page to get the speech bubbles into the table?

The only way to do this in the html editor would be to define these styles as inline styles. In other words, you would have to add the entire style information to each and every element that you are styling. This both defeats the purpose of having an external stylesheet (where you only have to define styles once) and the increase in page loading time that having an external style sheet provides.

If you do link to an external stylesheet or add this code to your child theme style sheet (which is, believe me, the way to go, for reasons I will explain in a moment) Then you simply add that class to whatever element you want styled that way, like this:

<table class="triangle-right-top">

Anything in a style sheet that starts with a “.” is a class (.triangle-right-top) and anything that starts with a “#” is an id (#container). Looking at the style sheet you’ve linked to, it looks like just about everything in it is a class.

A moment has passed. Here are those reasons I mentioned earlier:

Looking at that stylesheet, I count just over 1300 lines of code. That’s 39,487 extra bytes being loaded every time someone visits your page. Think about it. Are you really going to use every bit of code in that stylesheet? If so, link to it using wp_head(). But if you are only going to use a handful of those styles (or even only a dozen or so), it really makes more sense to simply copy those styles over to your own style sheet, to save on page loading times. It looks like the author of that style sheet really added a lot of comments (which is good, because it makes it easier for the rest of us to figure out what is going on), but that still adds to the weight of that sheet. The good news is that it is well-commented enough you could probably figure out which bits of code you can copy.

My two cents/pence, anyway. Let us know how you get on.

Ken

Mod

Kenneth John Odle
July 1, 2012 at 11:36 pm #29991

So….yes. What Syahir said.

kwts
July 2, 2012 at 12:31 am #29992

Lol, yes what Syahir said – thanks Syahir I am now fully using the child theme style sheet.

Ken, thank you so much for your help. I found the code I needed, followed the steps you laid out and all is working perfectly :o)

Sasha.

Anonymous
July 2, 2012 at 3:27 am #29993

Marking thread as resolved. You can do this yourself as well.

kwts
July 2, 2012 at 11:10 am #29994

Cheers Josh, will remember to do this next time