CSS Dumbo

J

Just Askin'

New at this so bear with me. Would someone help me understand CSS please??

I understand the coding. Do you have to save a css file to your site. Or
just do html coding?
what if I want a picture or a table in a certain place, where does the
coding go? Do I make a file?

see, dumbo me!

many thanks, or if there is a good dummy link I'd appreciate it.
 
M

Murray

I understand the coding. Do you have to save a css file to your site.

There are 3 ways to use CSS in your pages -

1. Use inline styles (the worst way) - e.g., <p style="margin:10px;">
2. Use embedded styles - e.g.,

<style type="text/css">
<!--
body { margin:0; }
-->
</style>
</head>
<body>
<p>whatever</p>
</body>
</html>

3. Use a linked stylesheet - e.g.,

<link rel="stylesheet" type="text/css" href="foo.css">
</head>
<body>

Clearly, if you use method 3, then you would need to have foo.css in your
site's files.

To style page elements, you would have to understand how to use selectors.
There are 3 types of selectors -

1. Type selectors - e.g., -

body { styles }

2. Class selectors - e.g.,

..foo { styles }

3. ID selectors - e.g.,

#bar { styles }

I would use these in the following ways, respectively -

<body> (it's automatically selected by virtue of the matching type.
<p class="foo">
<ul id="bar">

Does that help?
 
J

Just Askin'

Murray,
thanks for the info. I found a few good tutorial sites I'm reading. I'm just
going to play around and try all of your ways and see which I prefer.
(exception: the inline styles).
I'm a bit confused on the 'selectors'. But will also play around with those.

Again,many thanks.


Murray said:
I understand the coding. Do you have to save a css file to your site.
Click to expand...

There are 3 ways to use CSS in your pages -

1. Use inline styles (the worst way) - e.g., <p style="margin:10px;">
2. Use embedded styles - e.g.,

<style type="text/css">
<!--
body { margin:0; }
-->
</style>
</head>
<body>
<p>whatever</p>
</body>
</html>

3. Use a linked stylesheet - e.g.,

<link rel="stylesheet" type="text/css" href="foo.css">
</head>
<body>

Clearly, if you use method 3, then you would need to have foo.css in your
site's files.

To style page elements, you would have to understand how to use selectors.
There are 3 types of selectors -

1. Type selectors - e.g., -

body { styles }

2. Class selectors - e.g.,

.foo { styles }

3. ID selectors - e.g.,

#bar { styles }

I would use these in the following ways, respectively -

<body> (it's automatically selected by virtue of the matching type.
<p class="foo">
<ul id="bar">

Does that help?
Click to expand...
 
M

Murray

Selectors are what are necessary to make your rules "cascade" into the page.

A rule is composed of -

1. a selector (single or complex)
2. a style (single or multiple)
3. a value for the style (or multiple values for it)

For example:

body { margin:0; border:2px solid red; color:#369; font-family:arial,
verdana, helvetica, sans-serif; }

The rule has a type selector (body), 4 styles (margin, border, color, and
font-family), and multiple style values.

A complex selector would be something like this -

#topmenu ul#navigation a.thisone:hover { color:#FFF;
text-decoration:eek:verbar; }

It would apply to this construction -

<div id="topmenu">
<ul id="navigation">
<li><a class="thisone">Click me</a></li>
<li><a>Not me</a></li>
</ul>
</div>

And it would apply ONLY to that construction - none other on the page.

See where this is going?

--
Murray
--------------
MVP FrontPage


Just Askin' said:
Murray,
thanks for the info. I found a few good tutorial sites I'm reading. I'm
just going to play around and try all of your ways and see which I prefer.
(exception: the inline styles).
I'm a bit confused on the 'selectors'. But will also play around with
those.

Again,many thanks.
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS and DWT 1
Can I use the Design page in FrontPage 2003 to create a CSS 1
CSS code for text style 2
Images are pixelated when saving to PDF 0
Automation of scanned file storage based on content 0
Getting Radio Buttons to work, that are inserted via AutoText 0
unpack and customize html code in xsn file - has it any problem? 0
Embed the same Excel multiple times 0

Top