Trying to make sure I understand what brackets they are talking about

[AmyR7]

I know that you all have said I don't really need to worry much about the coding since I'm using the editors and not Notepad. I also know you all have said to me and others who have asked if we need to understand all this stuff to make a site and said that if we know a little of it that it can help things be easier.
Anyways, I think I understand the coding mostly, it's not that hard for me to understand. I go back over things from time to time and make sure I really understand things and remembering things. With all my learning disabilities too, I have problems with reading comprehension and vocabulary is one areas I have alot of problems in, but of course getting better over the years too. Some ways authors word things are harder to understand than others. I found this one site that seems to also not crash or freeze the computer everytime I go to it, it has quizzes you can take, and I've been getting them all right too. Anyways, there is this one little thing I'm trying to understand, and maybe someone can help me understand if I'm correct about what they mean, here is the page I'm reading http://www.createafreewebsite.net/html_tutorial/style_sheets.html
Here is what I'm not sure if I understand
First they say this,
"
Selectors take the form of the html tag without its enclosing brackets."

Then they give example-
"
Examples:

    * Tag: <p> CSS: p { declaration }
    * Tag: <h2> CSS: h2 { declaration }
    * Tag: <a href> CSS: a { declaration }
"

Now, what brackets are they talking about? Are they talking about these < >
So, here is my other question. If so, then are they saying to type out the code like this p{declaration}
or do we need to put <p> type the css and then the p without the closing tag </p>
So, then is this what they are trying to say
<p> CSS:p{declaration}
or not even type the opening tag <p> at all? or are they trying to say just type the opening tag without the brackets around it? so just type a p and then the curly brackets and then the declaration
which I understand that the declaration consists of an attribute and value and that you use a colon to separate the attribute and value and you can define more than 1
attribute for the selector but you separate them with a semicolon.
Also, I think I understand too you see how they say here are some attributes that you can use. Then they list things under the attribute. Are those things that they list the values? So, like under font-family I see all the fonts that they list, so I assume those are the values? Arial, etc.. ?
Oh and one other thing, it's hard to tell whether there are suppose to be a space between the attribute and the colon?


Thanks,
Amy

[kpac]

Now, what brackets are they talking about? Are they talking about these < >

Yes.

If so, then are they saying to type out the code like this p{declaration}

That's the CSS code that corresponds to the <p> tag in HTML.

For example, if this is your HTML code:

Code: [Select]

<p>This is a paragraph</p>
And then you have this CSS code:

Code: [Select]

p {
  font-family: verdana;
  font-weight: bold;
  font-size: 15px;
}
That will make all paragraphs use the Verdana font, the text will be bold, and it will be 15px in size.

Are those things that they list the values? So, like under font-family I see all the fonts that they list, so I assume those are the values? Arial, etc.. ?

Yes. In my example above, "verdana", "bold", and "15px" are the values. "font-family", "font-weight", and "font-size" are the properties or attributes.

it's hard to tell whether there are suppose to be a space between the attribute and the colon?

Doesn't matter, either way works.

[AmyR7]

A couple other quick questions. I thought that we have to put these brackets <> around the words/tags. But sometimes I see things like this:

Code: [Select]

body,td,a,p,.h{font-family:arial,sans-serif}body{color:#333;margin:3px 8px 2em}img,table{border:0}#sf{width:100%}
#frame{width:564px;margin:auto 12px}#gbar{height:22px}.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}
.gbh{height:0;position:absolute;top:24px;width:100%}#gbi,#gbs{background:#fff;left:0;position:absolute;top:24px;visibility:hidden;z-index:1000}
#gbi{border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;z-index:1001}#guser{padding-bottom:7px !important;text-align:right}
#gbar,#guser{font-size:13px;padding-top:1px !important}@media all{.gb1,.gb3{height:22px;margin-right:.5em;vertical-align:top}
#gbar{float:left}}.gb2{display:block;padding:.2em .5em}a.gb1,a.gb2,a.gb3{color:#00c !important}.gb2,.gb3{text-decoration:none}
a.gb2:hover{background:#36c;color:#fff !important}Now why do they have no < > around like body and also, why does it have another body typed in the codes later on? As I thought that we were only to have one opening body tag on the whole page. so like like this is the opening body tag

Code: [Select]

<body>and then the closing body tag at the end of the document

</body>

I also thought that all the stuff we put on the page, the text/words, pictures, links to other sites or parts of the current site etc... are to be typed out between the body tags. So, like after the first opening body tag is where you put all the stuff I just mentioned that we start putting it all right after this > symbol. since that is the right bracket in the opening body

Code: [Select]

<body>So type like this

Code: [Select]

<body>start putting everything here</body>
Thanks.

[harry 48]

go to below and you may get help there as well

http://www.computerhope.com/forum/index.php?topic=69260.0

[kpac]

Amy, this is CSS we're talking about. Not HTML.

BTW, fixed width problems.

[AmyR7]

Do you mean the link that Harry told me to go to is CSS and not HTML or are you saying the codes I asked about is the CSS?
Fix width problem? Where? Do you mean the #sf thing?

[kpac]

Do you mean the link that Harry told me to go to is CSS and not HTML or are you saying the codes I asked about is the CSS?

The codes you were talking about is CSS.

Code: [Select]

Fix width problem? Where? When you enter a long line of code using the code tag on the forum, it stretches all the layout of the page and makes things awkward to look at.

[AmyR7]

The thing I don't understand is why when you go to pages about HTML it seems to be using the same words like CSS does- body, p, all that stuff?
Also, I don't know if I understand what is meant to put the CSS on a different page than Html, it looks like it all is on the same page.
Is the only difference that CSS uses these brackets {} and HTML uses these < >?
Then what are we doing when we do other brackets [] and ()?

Also, just one other thing too I'm wondering. Is does the settings we have in our browser for all the fonts, can that make a difference in the way we are viewing sites?
Is there a way I can make sure I have the correct settings? If I go up to Tools and then to options, and Content, under there is where all the font settings seems to be and here is what we have-
for fonts & colors we have Default font Times New Roman and then Size 16.
Then if we click on Advanced here is what is marked-
Fonts for Western is what we have for the very top part
Then for the other sections we have for Proportional: Serif Size 16
Serif: Times New Roman
Sans-Serif: Arial
Monospace: Courier New and then Size 13
Then for minimum font size none is marked
and then there is a box at the bottom that is checked that says Allow pages to choose their own fonts, instead of my selections above.

Then if we click on Colors here is what we have marked
Background- White
Text- Black
Unvisited Links- Blue
Links- Purple
Then we also have checkmarks by both Use System Colors, Underline Links and a checkmark by Allow pages to choose their own colors, instead of my selections above.

[kpac]

The thing I don't understand is why when you go to pages about HTML it seems to be using the same words like CSS does- body, p, all that stuff?

That's because the tags you use in CSS have to correspond to the HTML tags you have used.

Also, just one other thing too I'm wondering. Is does the settings we have in our browser for all the fonts, can that make a difference in the way we are viewing sites?

No. Sites that don't already have a font chosen will use the font that you choose.


If I were you, I wouldn't be bothered learning CSS. But if you want to, have a look here: http://www.w3schools.com/css/

[AmyR7]

Just want to say thank everyone for all the help on explaining things to me.
Still is a few things I'm not sure if I fully understand. Yes, I've been to that w3school site(doesn't always work for me for some reason), and to other sites too. Which some of my questions, still really haven't found any answers to.

Here is what is marked when I look under:
Tools, Options, General, Web Options
Rely on CSS for font formatting under Browsers tab is marked


One thing too, the codes look like a bunch of formulas too. See I'm really good with math, science, even business type classes too. Only areas in life I've always struggled with is English classes due to vocabulary, reading comprehension problems. So, the way people word things are sometimes a little confusing to me, because I have to go and lookup the vocabulary words sometimes to try and help me understand what they are trying to say. I am getting better though with vocabulary stuff though and reading comprehension with all the practice of things I'm doing in life to try and help like doing more reading and stuff. See on the college entrance test I scored off the charts in the math section. High enough to take classes like Calculus, Trig, etc.. But have to take remedial reading stuff before even taking English classes.

One of the things I'm sort of trying to understand, is when I read stuff like this
"CSS Media types and printer friendly pages

"Surfing the web" has traditionally meant staring at a computer monitor, though things are changing, and quickly. As the web evolves, it is becoming a lot more diverse, accessible to devises even Al Gore probably couldn't have predicted. We're all familiar with printing a page for offline viewing, though the support is now in place to make webpages viewable in handhelds, projection screens, TVs, for people with disability, and more. All this is great, but it doesn't just happen on its own. Conscious effort has to be made by us, the webmaster, to add this support, and one exciting way is through CSS. In this tutorial I'll discuss media types in CSS, and more specifically, how CSS can be used to transform ordinary webpages to become printer friendly"


Well, here is what I'm trying to understand about this, if someone doesn't have these other kind of devices, how do they do coding that is for a device they don't even have? Like for example, I know that you don't put a cd into a vcr because cd's are only intended for disc drives and vcr's are for vcr tapes and you can't put a vcr tape in a disc drive.

Sorry too if I'm asking too many questions or anything. Ever since August/September of last year, I've been having to relearn so many things in my life and still even have some difficulties with things due to problems still happening from getting sick from Hep A, seems to have caused some permanent brain problems it looks like. One of the main things I'm scared about is forgetting how to do things that I really enjoy doing too, which one of those things is creating things, so websites is one of them.
Still are a few more things I'm trying to figure out the best way to word my questions so that I don't confuse anyone on what I'm trying to make sure I understand.

Can't remember if I mentioned the reason for needing things like a spellchecker. I create quizzes on a bunch of different sites. They said to please use a spellchecker is one of the things it says in the rules.
Thanks,
Amy

[rockerest]

"Surfing the web" has traditionally meant staring at a computer monitor, though things are changing, and quickly. As the web evolves, it is becoming a lot more diverse, accessible to devises even Al Gore probably couldn't have predicted. We're all familiar with printing a page for offline viewing, though the support is now in place to make webpages viewable in handhelds, projection screens, TVs, for people with disability, and more. All this is great, but it doesn't just happen on its own. Conscious effort has to be made by us, the webmaster, to add this support, and one exciting way is through CSS. In this tutorial I'll discuss media types in CSS, and more specifically, how CSS can be used to transform ordinary webpages to become printer friendly

Basically, what it is saying is:

Using CSS, the person making the web page can decide before hand what each visitor sees.

For example, if I visit a webpage on a computer, I should see all the pictures and backgrounds and everything.

But if I visit the same page on a mobile phone, I shouldn't have to download all that data, so the webmaster can specify before that when someone (like me) visits the site from a mobile phone (or any other device) they will see a site that has different styles (like no pictures or smaller area).

So the way they code for all the devices is they imagine what each device would be able to look at, and then they limit the website to only display what each device can handle.

-rock

[BC_Programmer]

accessible to devises even Al Gore probably couldn't have predicted

Al Gore had nothing to do with the introduction of the internet.

[rockerest]

Al Gore had nothing to do with the introduction of the internet.

thanks......for........that.......

....and now we'll go back to the topic...

[AmyR7]

Basically, what it is saying is:

Using CSS, the person making the web page can decide before hand what each visitor sees.

For example, if I visit a webpage on a computer, I should see all the pictures and backgrounds and everything.



-rock

Ok, this is making me more confused now. I didn't think I was downloading anything unless I go to a site and hit a download button and then download software needed. Didn't think that by just going to a website I was downloading something.
I still don't understand what you are talking about since I don't have a mobile phone. So, CSS is for mobile phones then?

[kpac]

I still don't understand what you are talking about since I don't have a mobile phone. So, CSS is for mobile phones then?

Amy, I already said that CSS is used for anything that can view the Internet. Computers, laptops, mobiles, PDAs etc.

I didn't think I was downloading anything unless I go to a site and hit a download button and then download software needed. Didn't think that by just going to a website I was downloading something.

Yes, technically visiting a Website requires you to download the HTML and the files associated with the page (scripts, CSS etc) and these files are then stored in your browser's cache. So because the files are copied from the Website to your computer, it is downloading.

However, if the browser cannot read or open the type of file (for example .exe, .scr), then you see a box open asking you if you want to open or save the file - which is what you are talking about.