July 24, 201115 yr Hi everyone, Im new to this website and to coding in general. Anyway Im doing a degree in digital media and we have to do web authoring as one part of the course. So Im trying to figure stuff out as I go. At the moment I am creating a simple webpage and Ive hit a couple of bumps and cant figure out what to do next. Bump 1 - I have a heading which I need in one colour and then my paragraph starts on the same line in a different colour. example1 - THIS IS THE HEADING IN BLACK and this is my paragraph in red example2- THIS IS MY HEADING IN BLACK and this is the paragraph on the next line in red I have to use external css. As I said Im a complete noob so please explain in simple terms . Thank you
July 24, 201115 yr In its simplest form <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Headings</title> <link href="headings.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div1"> <h2>Heading 1</h2> <p>Some text here</p> </div> <div id="div2"> <h2>Heading 2</h2> <p>Some text here</p> </div> </body> </html> and the css #div1 h2 { color: #000000; font-size:24px; } #div1 p { color: #FF0000; font-size:14px; } #div2 h2 { color: #FF0000; font-size:14px; } #div2 p { color: #000000; font-size:24px; } the css being saved as headings.css Zed's link explains it in more detail HTH Pat
July 24, 201115 yr Author Thanks for the replies but I still dont know how to continue on the same line as below in different colour, the example given and the websites are very good at explaining but dont answer my specific question unfortunately- This is my heading in black this is my paragraph in red. or This is my heading in black this is my paragraph on next line
July 24, 201115 yr Thanks for the replies but I still dont know how to continue on the same line as below in different colour, the example given and the websites are very good at explaining but dont answer my specific question unfortunately- This is my heading in black this is my paragraph in red. or This is my heading in black this is my paragraph on next line After your code for your heading, simply put the following html command... <br /> So it would be something like... <h1>Heading in Black</h1><br /> <p>Paragraph in Red</p> Then apply the colours via CSS - which would look something like this... h1 { color: black; } p { color: red; } Hope this helps Edited July 24, 201115 yr by Alluziion
July 25, 201115 yr There's plenty of ways of doing what you require, some of them are wrong! The post above this one, for instance, indicates you put a <br /> tag between two block level elements (the h1 and the p) - wrong. Post number #3 by pat24 is the best method. Copy that code and experiment with it, you'll get there.
July 25, 201115 yr Author After your code for your heading, simply put the following html command... <br /> So it would be something like... <h1>Heading in Black</h1><br /> <p>Paragraph in Red</p> Then apply the colours via CSS - which would look something like this... h1 { color: black; } p { color: red; } Hope this helps Thanks for your help but this is not what Im asking. I know how to do a heading and a paragraph on separate lines. If you look at my examples in example 1 I need the red writing to start on the same line and then continue to next line. In example 2 I want to start on the very next line after the heading and not miss a line like it does when I use <p>. I have no idea how I am going to complete my assignment when it takes me so long to just figure this out. Anybody know how I do this please?
July 25, 201115 yr Thanks for your help but this is not what Im asking. I know how to do a heading and a paragraph on separate lines. If you look at my examples in example 1 I need the red writing to start on the same line and then continue to next line. In example 2 I want to start on the very next line after the heading and not miss a line like it does when I use <p>. I have no idea how I am going to complete my assignment when it takes me so long to just figure this out. Anybody know how I do this please? I don't quite understand what your asking; so I'll take a guess:- For example 1 try this: HTML <h1>Heading in Black</h1> <p>Paragraph in Red...<br />...continuing to the next line</p> CSS h1 { color: black; display: inline; } p { color: red; display: inline; } For Example 2: HTML <h1>Heading in Black</h1><br /> <p>Paragraph in Red without leaving a gap</p> CSS - (same as Example 1) h1 { color: black; display: inline; } p { color: red; display: inline; } Edited July 25, 201115 yr by Alluziion
July 25, 201115 yr A similar way would be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Headings</title> <link href="headings.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div1"> <h2 class="inline">Heading 1</h2> <p class="inline">Some text here</p> </div> <div id="div2"> <h2 class="inline">Heading 2</h2> <p class="inline">Some text here</p> </div> </body> </html> css .inline { display:inline; } #div1 h2 { color: #000000; font-size:24px; } #div1 p { color: #FF0000; font-size:14px; } #div2 h2 { color: #FF0000; font-size:14px; } #div2 p { color: #000000; font-size:24px; }
July 25, 201115 yr Headings and paragraphs are block-level elements, which automatically take up 100% of the horizontal space available to them. In order to get your paragraph to follow on from your heading you'll need to set the float CSS property of the heading, which shrinks it's width to the width of its content (or an explicitly-set width), and starts the next element on the same line if space allows.
July 25, 201115 yr Author Headings and paragraphs are block-level elements, which automatically take up 100% of the horizontal space available to them. In order to get your paragraph to follow on from your heading you'll need to set the float CSS property of the heading, which shrinks it's width to the width of its content (or an explicitly-set width), and starts the next element on the same line if space allows. Thanks, how do I do this?
July 26, 201115 yr Author A similar way would be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Headings</title> <link href="headings.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div1"> <h2 class="inline">Heading 1</h2> <p class="inline">Some text here</p> </div> <div id="div2"> <h2 class="inline">Heading 2</h2> <p class="inline">Some text here</p> </div> </body> </html> css .inline { display:inline; } #div1 h2 { color: #000000; font-size:24px; } #div1 p { color: #FF0000; font-size:14px; } #div2 h2 { color: #FF0000; font-size:14px; } #div2 p { color: #000000; font-size:24px; } This does what I want but Is this what is known as inline styles because we arent allowed to use this. It has to be external only.
July 26, 201115 yr This does what I want but Is this what is known as inline styles because we arent allowed to use this. It has to be external only. Your lecturer most likely means that you can't use "internal styles", not "inline". The CSS property "Display: inline;" is merely a styling command which should be fine. What I believe your lecturer means by "external" is having the CSS on a separate file and referencing it in the header of your page; something like this... <link href="path/to/your/stylesheet.css" rel="stylesheet" type="text/css" /> ^^ if you did it like this it should be fine. Where as an internal would look something like this... <style type="text/css"> Your css code/properties go here </style> Whenever your not sure about what your lecturer wants; ask him. Also if you have trouble with HTML & CSS then maybe buy a book about it (relatively new book that covers XHTML aswell) or browse through the millions of online tutorials. Good Luck
Create an account or sign in to comment