I have HTML editor, and trying to learn CSS.
I go to File > New CSS Page.
Of course opens up with Body {}, and look at a CSS tutorial and copy code from that site and paste into the Body {} of HTML editor.
I go to PREVIEW to look at the result, and always "Style Sheet Test Page".
The code turns various colors, so, I would assume it would be correct format.
I have beginners experience in HTML, so I feel confident but this is frustrating.
CSS Newbie - Post ID 175741
Kevin Johnson
Registered User
2 posts
Inger
Senior Advisor
14,649 posts
Online Now
Good luck to you, Kevin.
You haven't asked any questions, but if you run into problems, we can help you solve them.
You haven't asked any questions, but if you run into problems, we can help you solve them.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
paintbrush
Ambassador
3,816 posts
I go to PREVIEW to look at the result, and always "Style Sheet Test Page".
Is this the issue? I know nothing about it, don't know if it needs to be saved and/or uploaded to see it without the test page title???
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
paintbrush
Ambassador
3,816 posts
Just had a look in the editor, saw the test page notice. There's also this:
So, maybe saving, uploading and linking will change it.
Where are all the HTML Editor pros?
You must be viewing .html files which contain style sheets in either Netscape Navigator 4.0+ or in Microsoft's Internet Explorer 3.0+, otherwise you will not be able to view the effects of the Style Sheet.
So, maybe saving, uploading and linking will change it.
Where are all the HTML Editor pros?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Per
Senior Advisor
1,850 posts
Kevin,
The preview of a CSS stylesheet will always be a "Style Sheet Test Page". To see anything more meaningful, in terms of the effects of your stylesheet, you must associate it with some actual content in an HTML page. Then you see the effects of the styling, formatting, positioning, etc. of your CSS by previewing that HTML page.
The preview of a CSS stylesheet will always be a "Style Sheet Test Page". To see anything more meaningful, in terms of the effects of your stylesheet, you must associate it with some actual content in an HTML page. Then you see the effects of the styling, formatting, positioning, etc. of your CSS by previewing that HTML page.
Per
www.mingas.com
www.mingas.com
Kevin Johnson
Registered User
2 posts
Hi Per and Paintbrush,
Thank you for your suggestions.
Below is a CSS file that I just tried. I pasted it into HTML Editor ensuring a CSS file (File > New CSS Page)
I pasted the following file to the Code Editor page, and then went to the Preview page, of course I got the "Style Sheet Test Page".
Guess I am just use to paste a file into the Code Editor Page, and then going to the Preview page, and immediately seeing the "fruits of my labor".
OPERATOR ERROR...SORT OF....
The file has to be saved first....After changes made to the Code Editor Page, then Save, then go to the Preview page, and I can see the fruits of my labor.
Thank you for the all the help, and I can hear the snickering of the HTML/CSS pros...ha ha ha ha...thats ok....
Thank you again all....geezzz (back into the corner and continue working on website....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thank you for your suggestions.
Below is a CSS file that I just tried. I pasted it into HTML Editor ensuring a CSS file (File > New CSS Page)
I pasted the following file to the Code Editor page, and then went to the Preview page, of course I got the "Style Sheet Test Page".
Guess I am just use to paste a file into the Code Editor Page, and then going to the Preview page, and immediately seeing the "fruits of my labor".
OPERATOR ERROR...SORT OF....
The file has to be saved first....After changes made to the Code Editor Page, then Save, then go to the Preview page, and I can see the fruits of my labor.
Thank you for the all the help, and I can hear the snickering of the HTML/CSS pros...ha ha ha ha...thats ok....
Thank you again all....geezzz (back into the corner and continue working on website....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Per
Senior Advisor
1,850 posts
Kevin Johnson wrote:
....Below is a CSS file that I just tried. I pasted it into HTML Editor ensuring a CSS file (File > New CSS Page)...
....Below is a CSS file that I just tried. I pasted it into HTML Editor ensuring a CSS file (File > New CSS Page)...
Glad to see that you're getting past some initial hurdles, so that you can now see the interaction between the html (content) and the CSS (styling).
The code you included in your post is actually a pure HTML file and should be treated and saved as such, i.e. with an .html file extension. It happens to include an "internal CSS style sheet" in the <head></head> section, but it is still an html file... The first couple of lines in the file defines it as such: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01... ...>
Only an external style sheet, which contains only CSS, is saved as a .css file. It is then referred to in the html file.
I would strongly suggest that you take a look at the tutorials at this link: http://www.w3schools.com/css/default.asp
It is the reference site for all things css and html, and much more. You can do a lot of simple, quick, interactive experimenting there, with how changes in the css affects the html, and you will quickly get a good 'feel' for it all!
Have fun, and post back with any questions you may have!
Per
www.mingas.com
www.mingas.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
