Hi Dear Friends, I am also beginer. I understand the html almost. I am learning with w2school. This is the easiest site I found for beginers.Like someone said about the Html Cheat sheet he is right we can easily memorize these codes. Now I can design a simple page including the images and links. I feel dificulty in layouts. In frontpage I can make a good page using tables. Css looks so easy but frankly it is so confusing I am still trying to figerout how it works or how it relat to the Paragraph. We have to put styles in head section only? I read some where that we can also put the Css style within the Paragraph this is the most dificulty I am facing right now. Some one said we have to use class= or id=. Supose we have 20 paragraph on the page and they all are different from each other,like diferent font, size,color,background etc.So how we can control using just one style in head section? Do we have to put 20 different styles in the head section? If we put 20 styles for each paragraph then how we relate that specific style to specific paragraph this is big confusen.I understand that if we use <h1>this is text</h1> so that means all the h1 headings we can control within whole page.but what about if some h1 headings font color, face are diferent than other?This is very confusing me.This is all about how we relate the styles to Paragraph? Please help me. I am strongly agree that practical is very important to learn.I can't find simple html pages which can help me to understand.Almost every page using confusing codes. eventhough I try to look at evey web site's html code and learn some usefull codes.without the Css we can not make a nice page which I can make using frontpage. I just hate to use Frontpage I just want to use my own html code.Script also very important. Is there are Css Style Sheet cheat sheep available on the net? I would really appreciate if you can help me to understand Css. thanks.
Hello again, First thing first, It would be easier to read your post if you split the long paragraphs up. Don't worry, everybody starts somewhere and it is good that you are actually trying to learn. www.htmldog.com Is another very good site for HTML and CSS. My advise, don't ever open Frontpage again, the only thing you can learn from that is how not to code. CSS is not easy, don't listen to people who tell you it is. CSS not only relates to the paragraph text. It relates to all of your HTML. Basically, you should use CSS to style your HTML. Use it to add color, control the layout add background images and a whole heap of other usefull things. Yes and no. You CAN place all of your CSS in the head section of your website if you want, but it will save you time if you place it in an external file. Here is an example. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> External Sheet Test </title> <link rel="stylesheet" href="screen.css" type="text/css"> </head> <body> <h1> The main heading. </h1> </body> </html> HTML: What this basically does is import all of your CSS styles from a file called screen.css This way you can place all of your styles in this document and then this code will import them into each of your HTML documents. For example, place this in the screen.css file and using the above HTML you will see the results. h1 { color: red; } Code (markup): You see how the <h1> element in the HTML document now gets coloured red. Yes you can, but it is considered bad practice. Here is an example, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Inline Styles </title> </head> <body> <h1 style="color: red;"> A red title </h1> <p style="color: blue; text-decoration: underline;"> This text that is inside your paragraph will be blue and underlined. </p> </body> </html> HTML: If that was me, sorry if I confused you. It's usually better to do it with classed and ID's but is not compulsory. Ok, for this example I will limit the 20 paragraphs to just three to save on typing, and instead of placing your styles in the <head> section, place them in a external stylesheet as I showed you how to before We will give each paragraph a unique class in our HTML, here is the HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> 3 Different Paragraphs </title> <link rel="stylesheet" type="text/css" href="screen.css"> </head> <body> <p class="first"> This is the first paragraph. The class is "first" so anything in the external css file with .first relates to this paragraph. </p> <p class="second"> Similarily, this paragraph has a class of "second" </p> <p class="third"> This is the paragraph with class of "third" </p> </body> </html> HTML: There you go. You must give each element (in this case <p> for paragraph) a class if you want to relate it to properties in your CSS file. Now for the CSS file. You need to create this file called screen.css and place it in the same directory that the HTML file is in. .first { color: red; font-family: Verdana; } .second { color: blue; font-family: Arial; } .third { color: green; font-family: Tahoma; } Code (markup): Now can you see how you relate the elements to the styles? In the above file you say that the elements with class of first (you do this with a dot/period/full stop depending on what you call it. ".ClassName") then you open the curly braces "{" then you list the properties and finally close the curly braces "}". Then you can give the <h1> a class and style only specific <h1? that have that class. For example, <body> <h1> Default heading </h1> <h1 class="headingTwo"> The second heading </h1> <h1 id="headingThree"> The third heading </h1> <h1 class="headingTwo"> This is the fourth heading, but it will have the same styles as the second as the class is the same. </h1> </body> HTML: Then in your css file. (Or head of your document). h1 { color: black; } h1.headingTwo { color: red; } #headingThree { /* you use a # as we declared an ID not a class */ color: blue; } Code (markup): I hope most of that code is self explanatory now, the only new syntax introduced is h1.classname This basically says style all the <h1> tags that have the class of classname. There are cheat sheets available, however they may be a bit complex just now. The sitepoint reference may help you more, http://reference.sitepoint.com/css That may be a bit hard to understand though. If any of that didn't make sense (which is quite likely, as it is very late here) then don't be afraid to ask questions. In fact, I would like to hear any questions you may have.