Integrating Css Code In Webpage Style sheet without a href

mrdee · February 6, 2011

Hello,

I found some stylesheets for making tables with rounded corners.

Everything seems to work well (except in Internet Explorer, of course, but that is no big surprise) but I have one problem:

In the HTML code, within the <head></head> tags, there is obviously a reference to the CSS that goes with the HTML code, and the code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="css/curvedCorners-finished.css" rel="stylesheet" type="text/css" /></head><body>...... (rest of the HTML code)

As you can see, the CSS code is not written in the same page, but is called with

<link href="css/curvedCorners-finished.css" rel="stylesheet" type="text/css" />

That is fine for using in a webpage, where you have the CSS code in a folder on your server, but what I would like to know is:

How can I integrate the CSS code in that same page?

The reason I ask is: I am trying to use that code in a newsletter, which I send as a HTML email, so I don't really see how I can refer to that folder, or should I just attach it to the email?

I tried the following:

I changed

<link href="css/curvedCorners-finished.css" rel="stylesheet" type="text/css" />[/quote] to [quote]<style type="text/css" />relevant CSS</style>

but when I previewed the page that did not work.

So, is there a way of integrating the CSS code into the same page as the HTML, and if so, how do I do that?

If not, how can I make the correct style appear in my email?

All advice will be very much appreciated.

Edited May 22, 2012 by moderator (see edit history)

kobra500 · February 6, 2011

Hello,
I found some stylesheets for making tables with rounded corners.
Everything seems to work well (except in Internet Explorer, of course, but that is no big surprise) but I have one problem:

In the HTML code, within the <head></head> tags, there is obviously a reference to the CSS that goes with the HTML code, and the code looks like this:

As you can see, the CSS code is not written in the same page, but is called with

That is fine for using in a webpage, where you have the CSS code in a folder on your server, but what I would like to know is:

How can I integrate the CSS code in that same page?

The reason I ask is: I am trying to use that code in a newsletter, which I send as a HTML email, so I don't really see how I can refer to that folder, or should I just attach it to the email?

I tried the following:
I changed to
but when I previewed the page that did not work.

So, is there a way of integrating the CSS code into the same page as the HTML, and if so, how do I do that?

If not, how can I make the correct style appear in my email?

All advice will be very much appreciated.

Unfortunately Email support for CSS is limited, Gmail is one of the worst offenders of poor support for CSS. If you would like to use CSS code in your site you need to use inline styles, I found this website: https://www.campaignmonitor.com/css/ which lists the supported features.

Incase you are unsure that would work like the following:

<HTMLELEMENT style="CSSSELECTOR: CSSPROPERTY;>BLAH BLAH BLAH</HTMLELEMENT>

as I said that's how you would have to do it, and check out the link for the supported features, remember to have an external version of the newsletter that runs in the browser that people can click on if the email is not displaying correctly. This will allow any styling of course.

mahesh2k · February 6, 2011

Unfortunately Email support for CSS is limited, Gmail is one of the worst offenders of poor support for CSS

I second that. I have found yahoo and hotmail showing CSS effectively than gmail. Gmail also has issues with showing images even after you enable it. I don't think the support is limited but more like they're limiting those ad based emails from some newsletter companies.
Coming back to OP. You can use that stylesheet simply by saving that webpage and then copying the CSS code in your own css file. If you know the path then you can also link to that external stylesheet by following the valid URL. But in some cases hotlinking is likely to be disabled, so it's better to save the page and get CSS code for it.

mrdee · February 6, 2011

First of all, thank you for your quick reply, my friends.

I appreciate that some email clients do have problems with displaying styles correctly, as do some browsers.

At the moment, none of the code I have mentioned has been uploaded to any web space, I have the HTML and CSS stored on my hard drive for testing purposes, and when I open the HTML page in my browers (Firefox, Google Chrome), it works perfectly.

As I mentioned in the beginning, Internet Explorer seems to be ignoring a great deal of the CSS, but, that is of course not unusual.

(Although, it appears that the upcoming version of Internet Explorer, version 9, will support CSS3).

It is a good idea to put the newsletter online, as well as in the email, I have often seen that in newsletter emails where it said "If this newsletter does not display correctly, please click here", where th hyperlink then sent you through to a web site where you could read the newsletter in all its glory.

However, there is one thing that might need a bit more clarification (forgive my ignorance if the following question sounds dumb, but I am not an expert, certainly not on CSS):

Kobra500 mentions the following line of code:

<HTMLELEMENT style="CSSSELECTOR: CSSPROPERTY;>BLAH BLAH BLAH</HTMLELEMENT>

So, would that mean that I can do the following:

<HTMLELEMENT style="curvedCorners-finished.css: curved1;>CSS and HTML code here</HTMLELEMENT>?

Is that what you mean I could do to let it do the trick?

I'll do a bit more experimenting too, but, for the time being, thank you so much for your input so far.

Baniboy · February 6, 2011

So, would that mean that I can do the following:
<HTMLELEMENT style="curvedCorners-finished.css...

Unlike kobra500 said, you don't use CSS Selectors for inline CSS (unless for things like :hover or :focus), what he probably meant was you use property: value;. Probably mixed them up. Selectors are ways to target elements (for example I use "div {...}" to target div elements) and you use properties to modify the elements behavior. Properties then contain values, for example: "background: white;". Here "background" is the property and "white" is the value. I know you probably didn't need this, but the terms are damn confusing anyway, someone else might find this helpful if you don't.

Here's an example of inline CSS (XHTML):

<div style="font-family: Tahoma, Arial, Helvetica; border: none;">lallalaalaalallalaa</div>

Hope you found this helpful.

PS. Here's a link to clear up which are properties and which are selectors: W3Schools CSS reference.
Edited February 6, 2011 by Baniboy (see edit history)

kobra500 · February 6, 2011

Unlike kobra500 said, you don't use CSS Selectors for inline CSS (unless for things like :hover or :focus), what he probably meant was you use property: value;. Probably mixed them up. Selectors are ways to target elements (for example I use "div {...}" to target div elements) and you use properties to modify the elements behavior. Properties then contain values, for example: "background: white;". Here "background" is the property and "white" is the value. I know you probably didn't need this, but the terms are damn confusing anyway, someone else might find this helpful if you don't.
Here's an example of inline CSS (XHTML):
<div style="font-family: Tahoma, Arial, Helvetica; border: none;">lallalaalaalallalaa</div>
Hope you found this helpful.

PS. Here's a link to clear up which are properties and which are selectors: W3Schools CSS reference.

You are correct, I did mean property, while my CSS knowledge isn't bad my general terminology knowledge is. But yes, Baniboy illustrated it better than me, I was giving a general formula, Baniboy gave a specific example which for all intensive purposes shows the same thing.

mrdee · February 6, 2011

Gentlemen,

this has really helped me so much.

Thank you so much for putting up with my probably idiotic questions and having the patience for posting such accurate and detailed replies.

This has really made so much difference, I have now managed to code a centred box with rounded corners with text inside it.

Maybe my coding still looks clumsy, but at least I am on my way to achieving what I was looking for.

I have one more question now: I shall post the code below, like I said, I have made a box with rounded corners and text in it, the only thing that bothers me slightly is that it has "preset" sizes, which is ok for me where the width is concerned, but what I would like is for the box to have a height that grows or shrinks as more or less text is put into it.

So, below is the HTML code, like I said, it might still look clumsy and unstructured, but at least it works.

I hope there is enough information to help you help me.

Here it goes, hope you can see a way to finish off the trouble I have already been through.

And, once again, thank you ever so much.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/;

<html xmlns="http://www.w3.org/1999/xhtml/;

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body bgcolor="#FFFFFF">

<div style="background:#D4ffD4;

height:300px;

width:320px;

float:center;

background:#D4ffD4;

width:650px;

height:500px;

padding:30px;

margin-left:auto;

margin-right:auto;

margin-top:50px;

-moz-border-radius:30px;

-webkit-border-radius:30px;">

<div align="center"><strong><u>Boom boom</u></strong></div><br />

Unlike kobra500 said, you don't use CSS Selectors for inline CSS (unless for things like :hover or :focus), what he probably meant was you use property: value;. Probably mixed them up. Selectors are ways to target elements (for example I use "div {...}" to target div elements) and you use properties to modify the elements behavior. Properties then contain values, for example: "background: white;". Here "background" is the property and "white" is the value. I know you probably didn't need this, but the terms are damn confusing anyway, someone else might find this helpful if you don't.<br />

First of all, thank you for your quick reply, my friends.

I appreciate that some email clients do have problems with displaying styles correctly, as do some browsers.

At the moment, none of the code I have mentioned has been uploaded to any web space, I have the HTML and CSS stored on my hard drive for testing purposes, and when I open the HTML page in my browers (Firefox, Google Chrome), it works perfectly.

As I mentioned in the beginning, Internet Explorer seems to be ignoring a great deal of the CSS, but, that is of course not unusual.

(Although, it appears that the upcoming version of Internet Explorer, version 9, will support CSS3).

It is a good idea to put the newsletter online, as well as in the email, I have often seen that in newsletter emails where it said "If this newsletter does not display correctly, please click here", where th hyperlink then sent you through to a web site where you could read the newsletter in all its glory.

However, there is one thing that might need a bit more clarification (forgive my ignorance if the following question sounds dumb, but I am not an expert, certainly not on CSS):

Kobra500 mentions the following line of code:

</div>

</body>

</html>

And there is also a screenshot to show what it looks like.

Baniboy · February 7, 2011

<div style="backgrou...

You have set the 'height:' property for this element which wraps around your main text content. By giving a value (other than auto, which is default, so you don't even need to set that. Not sure if it's exactly 'auto', tho.), you limit sizes. Box elements such as div automatically fill the whole row (meaning they don't normally allow other elements beside them and fill up all space, which can be changed by using the 'float' property). But the height is adjusted to the content, meaning it automatically adjust to how much text/other content you have in it. That doesn't work if you have specified a height to it, though. Remove the height property line, and it should be fine (see, that rhymes). If you want to set a minimum height for the div, you can:

1. Use the "min-height:" property in CSS. (doesn't work with Internet Explorer)
2. Create another div in the content wrapper (we'll call this spacer div), for which you define absolute height (or relative, whichever you want). This causes the outer DIV to have content with height in it. Content causes it to have minimum height of the height of your spacer div (excluding the borders).

By the way, in your code you have defined height, width and background color two times for the same element. They override each other so you might as well just keep the later one.

Hope I could help.

mrdee · February 7, 2011

You have definitely been very helpful, Baniboy.

Of course, at my level, stupid things like defining the same thing twice are to be expected.

One thing does surprise me, though:

as you can see from the screenshot, I had my box nicely centered.

When I adjusted HEIGHT from 500 to auto, it had all of a sudden jumped to the left.

I also tried to add float: left; but that does not seem to make any difference.

I shall post my latest version of the HTML again, hoping you might be able to see where I went wrong.

But, in the mean time, thank you ever so much for the help you have already given me.

I have really learned a lot.

<HTML xmlns="http://www.w3.org/1999/xhtml/;

<HEAD><TITLE>Untitled Document</TITLE>

<META content="text/html; charset=utf-8" http-equiv=Content-Type>

</HEAD>

<BODY bgColor=#ffffff>

<CENTER><H2>The new Berkshire Music Institution Newsletter</H2></CENTER>

<DIV style="PADDING-BOTTOM: 30px; MARGIN-TOP: 50px; PADDING-LEFT: 30px; WIDTH: 650px; PADDING-RIGHT: 30px; BACKGROUND: #d4ffd4; HEIGHT: auto; FLOAT: center; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; PADDING-TOP: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px">

<DIV align=center><STRONG><U>Boom boom</U></STRONG></DIV><BR>

Unlike kobra500 said, you don't use CSS Selectors for inline CSS (unless for things like :hover or :focus), what he probably meant was you use property: value;. Probably mixed them up. Selectors are ways to target elements (for example I use "div {...}" to target div elements) and you use properties to modify the elements behavior. Properties then contain values, for example: "background: white;". Here "background" is the property and "white" is the value. I know you probably didn't need this, but the terms are damn confusing anyway, someone else might find this helpful if you don't.<BR>

First of all, thank you for your quick reply, my friends.

I appreciate that some email clients do have problems with displaying styles correctly, as do some browsers.

At the moment, none of the code I have mentioned has been uploaded to any web space, I have the HTML and CSS stored on my hard drive for testing purposes, and when I open the HTML page in my browers (Firefox, Google Chrome), it works perfectly.

As I mentioned in the beginning, Internet Explorer seems to be ignoring a great deal of the CSS, but, that is of course not unusual.

(Although, it appears that the upcoming version of Internet Explorer, version 9, will support CSS3).

It is a good idea to put the newsletter online, as well as in the email, I have often seen that in newsletter emails where it said "If this newsletter does not display correctly, please click here", where th hyperlink then sent you through to a web site where you could read the newsletter in all its glory.

However, there is one thing that might need a bit more clarification (forgive my ignorance if the following question sounds dumb, but I am not an expert, certainly not on CSS):

Kobra500 mentions the following line of code:

</DIV>

</BODY></HTML>

mrdee · February 8, 2011

I think I have sussed out what the problem in the above post is.It is simply that my newsletter software and HTML editor both show their preview based upon that browser from that company worth billions, the company that always know better.My e-mail client (Windows Live Mail, made by... yes, you guessed it) is of course no different.I have even (only for testing purposes, mind you) downloaded the beta of version 9 of that almighty browser, the one that claims it can now handle CSS3 (it even mentions rounded corners especially), it also claims to support HTML5 now.To be quite honest, I have not seen much of what they claim.I even tried to do what they advise: ie. not to use a vendor name in front of your "border-radius" line, so, instead of coding "-moz-border-radius: 30px;" or "-webkit-border-radius: 30px"", you are just supposed to put in "border-radius: 30px;".Tried that, did not make the slightest bit of difference.It also appeared that in the past, you used to have to preceed the code with "-ms", so "-ms-border-radius: 30px;".Tried that, guess what, no luck, of course.The browser version might still be in beta stage, but it already claims to support CSS5, well, I can't see it, or maybe I am using a different kind of PC.Note to the mods: this post has been written a few minutes ago, and I got the message it will need to be approved first, please ignore it, it happened because I didn't realise I was not signed in when I posted.Thank you.

Baniboy · February 8, 2011

I see nothing wrong when I try your code out in Opera and Firefox. Height is automatically auto, you don't have to define it again, so I'd remove that from the code, IE/Windows Live Mail could be freaking out because of this. You have also written "float: center;". The float property can only handle 'none', 'left', 'right' and 'inherit' values. Inherit makes it inherit the value from its parent element. So get rid of that too because it causes a syntax error.

Overall we end up with this:

<DIV style="PADDING-BOTTOM: 30px; MARGIN-TOP: 50px; PADDING-LEFT: 30px; WIDTH: 650px; PADDING-RIGHT: 30px; BACKGROUND: #d4ffd4; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; PADDING-TOP: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px">

Also, I see you use the XHTML syntax. Unlike in HTML, in XHTML we only use lowercase letters for the tags. You can use them for element attributes tho. (Attribute examples: alt="..", title="...", href="...."). Browsers shouldn't in any normal circumstances be annoyed by the uppercase tags tho, I've only seen the W3C validator whine about them. Speaking of attributes, there are attribute selectors in CSS that allow you to select an element based on what attributes it has and what are the values of them.
You might also want to group your inline (or any other type of) styling so that is easier to read, for example all paddings, margins sizes etc in their own groups.

But, in the mean time, thank you ever so much for the help you have already given me.I have really learned a lot.

No problem. Glad I could help. It's Xisto after all. If nobody helped anyone, it would be spamsutra.

And yeah, for a moment I actually thought that MS was trying to make a good browser. After saying to myself it would suck, I felt like racist or something (what would you call me... a browcist?), because I was bashing it with no reason. Well, by what I hear from people I was right. Browcism ftw.

mrdee · February 9, 2011

Well,

maybe I caused a bit of browscism for nothing maybe.

In my HTML editor (Coffeecup), when you make a new page, you have a choice of which opening tag (hope that's the right term) you can use, there is a whole list, such as HTML5 (<Doctype html>), html 4.01 transitional, html 4.01 strict, xhtml 1.o transitional (default), SVG, MathML, HTML+MathML etc. etc., the list goes on and on.

I noticed that, when I used the wrong DOCTYPE (that's the right word), things did not display properly in IE9.

Of course, with the HTML standards changing, and some browsers supporting it better than others, and given the fact that the Doctype makes a difference too, it is still somewhat confusing to me, and I need to do quite a bit of experimenting.

I also noticed that, sometimes the browsers shows a certain feature, only to magically stop showing it without making any changes ti the code, then to appear again like it should be.

That is what confused me about the "float" function, as, sometimes, it did actually centre my box.

So, should I just use <div align="center></div> then?

Oh, and finally, looking at your signature, are you a musician?

If you are, we might even have much more to discuss here.

Anyway, thanks again for all your help so far.

Baniboy · February 11, 2011

Yea it sucks with the gray areas in markup and styling when it comes to browsers. Sometimes you just don't know what the output is going to be.

That is what confused me about the "float" function, as, sometimes, it did actually centre my box.So, should I just use <div align="center></div> then?

Oh, and finally, looking at your signature, are you a musician?
If you are, we might even have much more to discuss here.

If you have "margin-right: auto;" and "margin-left: auto;" the browser should automatically center the box element.

I play drums in a band and a little bit of piano.

mrdee · February 12, 2011

That last sentence sounds quite interesting to me.At the risk of going off-topic:Do you play any particular style?I am always interested in talking to a fellow musician, I am a professional musician who has worked all over Western Europe.I was classically trained (in my day you had no choice), with the organ as main instrument, but then I started playing popular music and got an interest in jazz too.After playing on my own (as an organist) for years, I then started putting my groups together, I used to have a Dixieland group (I played piano in that, and when we did street parades I played trombone or bass tuba) and I also had my jazz trio (piano, bass, drums) and jazz quartet (trio with addition of sax, trumpet or vocals).In the last 12 years or so, I have not performed that much, as I have been doing more work in music education (teaching privately, teaching in secondary schools and colleges).I must say I sometimes miss going on the road, but none of us get any younger. :blink: I would love it, though, if I could find something like doing a cocktail lounge job in a hotel (some cool, easy-listening stuff), or get a Dixieland Band up and running again.That is why I am organising auditions now, and if I find suitable people, I might well get started again.Another ambition I have, though, is one in education: since I have taught at almost all levels, I would very much like to end up lecturing at university, but you have to be very lucky to work your way in there, it is often a case of "It is not what you know, but WHO you know".But, anyway, let me know what kind of music you play, what you are interested in, and what you want to achieve with music.We might have some interesting talks about that. Who knows what it might lead to, and, we might be able to post some interesting topics on here.

Baniboy · February 12, 2011

I started a new thread about the topic, since it doesn't seem appropriate continue code discussion with a music discussion looking at the rules around here. Click

Sign In

Integrating Css Code In Webpage Style sheet without a href

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information