CSS code to reference a style sheet

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I hav some HTML code in a HTML widget. I would like to add code that will reference an external style sheet I have on my server. What is the proper syntax I should enter in the HTML widget that will reference the CSS style sheet. When I make changes to the CSS style sheet, I want it to change all the files I have that reference that style sheet.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • forgetful regarding this code.

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--If you have this at the top of the page

<link rel="stylesheet" type="text/css" href="http://yourdomain.com/whatever.css" title="css1"/>

any code that has a reference to a class in the css will react when the above link is on the page.

Lee -->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You beat me to it Lee! :) Thanks for your quick and ever helpful presence!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
So I can just create a CSS style sheet, put it on my server and then just put the code you mentioned into all of the HTML widgets I want to reference the CSS style sheet?

Sounds pretty simple. Do I have to do anything special in the CSS Style sheet or can I just put some CSS stuff like Alignment, font color, font size etc...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
You only add the above code once, on the top of the page.
You have to have an element on the page that has a class attached to it.
Also remember that the css file will not be in the same folder as the yola set up so if you have any url's in your css use the full url to locate the resource.

good site - http://www.w3schools.com/css/
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
If you go to my site (www.mcran.com), click on the Bennett Snippets tab, you will see a horizontal alphabet. I want to find out what the best way is to increase the font size etc.. I think I would have to paste the CSS code you mentioned earlier into 52 HTML widgets because each letter has two HTML widgets.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
what are you trying to do? If your just changing the link colour you wont need to edit anything. Unless you have specified that colour then it wont work.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I made an error in my previous post. I meant I would have to change 26 widgets (one for every occurrence on the alphabet widget and not 52. I wnt to post the code I am using but I keep forgetting the special code I have to wrap it in so that I can post the code properly here.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This is the code I am using. So, for each of the alphabet widgets on each page, I have this code. What I would like to do is have some CSS control this code so that if I need to make a change to this code, every occurrence of this code in my Yola project will be updated accordingly.

<br/><br/><br/> <a href="http://www.mcran.com/a.php&quot;&gt;A...; •&nbsp; <a href="http://www.mcran.com/b.php&quot;&gt;B...; •&nbsp; <a href="http://www.mcran.com/c.php&quot;&gt;C...; •&nbsp; <a href="http://www.mcran.com/d.php&quot;&gt;D...; •&nbsp; <a href="http://www.mcran.com/e.php&quot;&gt;E...; •&nbsp; <a href="http://www.mcran.com/f.php&quot;&gt;F...; •&nbsp; <a href="http://www.mcran.com/g.php&quot;&gt;G...; •&nbsp; <a href="http://www.mcran.com/h.php&quot;&gt;H...; •&nbsp; <a href="http://www.mcran.com/i.php&quot;&gt;I...; •&nbsp; <a href="http://www.mcran.com/j.php&quot;&gt;J...; •&nbsp; <a href="http://www.mcran.com/k.php&quot;&gt;K...; •&nbsp; <a href="http://www.mcran.com/l.php&quot;&gt;L...; •&nbsp; <a href="http://www.mcran.com/m.php&quot;&gt;M...; •&nbsp; <a href="http://www.mcran.com/n.php&quot;&gt;N...; •&nbsp; <a href="http://www.mcran.com/o.php&quot;&gt;O...; •&nbsp; <a href="http://www.mcran.com/p.php&quot;&gt;P...; •&nbsp; <a href="http://www.mcran.com/q.php&quot;&gt;Q...; •&nbsp; <a href="http://www.mcran.com/r.php&quot;&gt;R...; •&nbsp; <a href="http://www.mcran.com/s.php&quot;&gt;S...; •&nbsp; <a href="http://www.mcran.com/t.php&quot;&gt;T...; •&nbsp; <a href="http://www.mcran.com/u.php&quot;&gt;U...; •&nbsp; <a href="http://www.mcran.com/v.php&quot;&gt;V...; •&nbsp; <a href="http://www.mcran.com/w.php&quot;&gt;W...; •&nbsp; <a href="http://www.mcran.com/x.php&quot;&gt;X...; •&nbsp; <a href="http://www.mcran.com/y.php&quot;&gt;Y...; •&nbsp; <a href="http://www.mcran.com/z.php&quot;&gt;Z...; •&nbsp; <br/><br/><br/>