Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Integrating Css Code In Webpage

Started by mrdee, Feb 06 2011 02:33 AM

15 replies to this topic

#1 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 06 February 2011 - 02:33 AM

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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta 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 by moderator, 22 May 2012 - 10:52 AM.

#2 kobra500

    Inane and Inept

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 602 posts
  • Gender:Male
  • Location:UK - Kent
  • myCENT:97.63

Posted 06 February 2011 - 04:22 AM

View Postmrdee, on 06 February 2011 - 02:33 AM, said:

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: http://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.

#3 mahesh2k

    Trap Double Mocha Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 2,347 posts
  • Gender:Male
  • Location:Valley of Darkness
  • myCENT:27.17
  • Spam Patrol

Posted 06 February 2011 - 07:05 AM

Quote

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.

#4 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 06 February 2011 - 12:28 PM

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:

Quote

<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.

#5 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 06 February 2011 - 01:38 PM

View Postmrdee, on 06 February 2011 - 12:28 PM, said:

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 by Baniboy, 06 February 2011 - 01:41 PM.

#6 kobra500

    Inane and Inept

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 602 posts
  • Gender:Male
  • Location:UK - Kent
  • myCENT:97.63

Posted 06 February 2011 - 02:15 PM

View PostBaniboy, on 06 February 2011 - 01:38 PM, said:

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.

#7 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 06 February 2011 - 09:29 PM

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.

Quote

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.
Attached File  roundcorner.png   60.64K   4 downloads

#8 Baniboy

    Advocatus Diaboli

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 878 posts
  • Gender:Male
  • Location:/root
  • Interests:Everything...
  • myCENT:37.47

Posted 07 February 2011 - 08:14 PM

Quote

<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.

#9 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 07 February 2011 - 10:05 PM

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.

Quote

<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>

#10 mrdee

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 810 posts
  • Gender:Male
  • Location:Slough (UK)
  • myCENT:90.63

Posted 08 February 2011 - 11:11 AM

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.
Back to CSS (Cascading Style Sheets) · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → Computers
  4. → Programming Languages
  5. → CSS (Cascading Style Sheets)
  6. Welcome - Start here! - Free Web Hosting