Solved

Very basic CSS written in Dreamweaver is not working

Posted on 2007-11-21
6
206 Views
Last Modified: 2012-08-13
I am trying to create my first CSS style sheet from scratch (I've worked a little bit with pre-existing ones) and I can't figure out why it's not working.

Also, I can't figure out why the styles I create have the dot before them while the styles in the pre-existing template don't have dots. (Assuming this is of any relevance)
Also, how do I create a specific div? These seem to be the ones with # in front of them.

But for starters, why isn't the text in the Intro div picking up Intro's properties?

Thanks,
John
CSS CODE:
html {
	margin: 0;
	padding: 0;
	}
body { 
	font: 16px/1.88889 "Gill Sans MT";
	color: #000000; 
	background: #fff url(h1.jpg) no-repeat bottom left; 
	margin: 0; 
	padding: 0;
	}
.Intro {
	font-family: "Brush Script MT";
	font-size: 24px;
	font-weight: bold;
	color: #FF3399;
}
 
HTML CODE:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<script type="text/javascript"></script>
	
	<style type="text/css" media="all">
	</style>
	
    <link href="textra.css" rel="stylesheet" type="text/css" />
</head>
<body>
		<div id="Intro">
			<p class="p1">Why isn't this text showing up as 24px, Brush Script, #CC66FF, bold? <br />
</div>
 
And this one?
</body>
 
</html>

Open in new window

0
Comment
Question by:gabrielPennyback
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 23

Accepted Solution

by:
Saqib Khan earned 500 total points
ID: 20332085
> Also, I can't figure out why the styles I create have the dot before them while the styles in the pre-existing template don't have dots.

pre-existing template contains the HTML TAG names, which can not be changed, body is a valid HTML tag so CSS parser knows i am applying this to the BODY of HTML. but if you create a custom Class you put . next to it and for the IDs you use #.

 > why isn't the text in the Intro div picking up Intro's properties

in CSS nesting rule works. in your example you have..
<div id="Intro">
<p class="p1">Why isn't this text showing up as 24px, Brush Script, #CC66FF, bold? <br />
</div>

so in your CASE "p1" will be applied to the Text because it comes AFTER div id="Intro".

also in your CASE it should say #Intro in the declaration because it is a "ID".




0
 
LVL 23

Assisted Solution

by:Saqib Khan
Saqib Khan earned 500 total points
ID: 20332089
Correct Version Should be...
CSS CODE:
html {
	margin: 0;
	padding: 0;
	}
body { 
	font: 16px/1.88889 "Gill Sans MT";
	color: #000000; 
	background: #fff url(h1.jpg) no-repeat bottom left; 
	margin: 0; 
	padding: 0;
	}
#Intro {
	font-family: "Brush Script MT";
	font-size: 24px;
	font-weight: bold;
	color: #FF3399;
}
 
HTML CODE:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<script type="text/javascript"></script>
	
	<style type="text/css" media="all">
	</style>
	
    
</head>
<body>
		<div id="Intro">
			Why isn't this text showing up as 24px, Brush Script, #CC66FF, bold? <br />
</div>
 
And this one?
</body>
 
</html>

Open in new window

0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 20332093
Below is the Version for Copy and Paste (Quick Test)
<style>
 
html {
	margin: 0;
	padding: 0;
	}
body { 
	font: 16px/1.88889 "Gill Sans MT";
	color: #000000; 
	background: #fff url(h1.jpg) no-repeat bottom left; 
	margin: 0; 
	padding: 0;
	}
#Intro {
	font-family: "Brush Script MT";
	font-size: 24px;
	font-weight: bold;
	color: #FF3399;
}
</style>
 
HTML CODE:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<script type="text/javascript"></script>
	
	<style type="text/css" media="all">
	</style>
	
    
</head>
<body>
		<div id="Intro">
			Why isn't this text showing up as 24px, Brush 
 
Script, #CC66FF, bold? <br />
</div>
 
And this one?
</body>
 
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:gabrielPennyback
ID: 20332203
Thanks! you know I tried just renaming .Intro with a #, and it wouldn't take.  How did you do it?
Anyway, I didn't have to change the html at all for it to work.  also, even though referring to an external CSS file is hardly relevant for this page, I'm trying to lean the basics so I will be able to start learning how to do more sophisticated pages with CSS. So how would the HTML code go with the reference to the external stylesheet restored?

Also  if I wanted to limit the size of the Intro ID box, how would I do it.  I tried doing it with the box parameters in the style sheet, but it didn't do any good. How do I do that?

Finally where can I download something that will reallydefine and explain all of the terms for me: div, id, class, etc.

Thanks,
John
0
 
LVL 23

Assisted Solution

by:Saqib Khan
Saqib Khan earned 500 total points
ID: 20332221
ok external link to CSS is same as you have CSS code written within the same file. so that should not be a problem.

Secondly why my code worked for text is because you have a <p> tag with a class name which overwrites the INTRO id, as i said before CSS is all about nesting, HTML will apply the closet Class/ID property to it.

its time to do alot of reading on CSS

and if want to limit the wize you use width and height property.

http://www.cssbasics.com/
www.w3schools.com
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 20332300
thanks, adilkhan.  The links look great. Could be just what I need right now.

John
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question