ajnl Posted September 3, 2012 Share Posted September 3, 2012 (edited) Last tutorial First Steps Into HTML Part 2. Which was mainly about hyperlinks and images. This one will explain how to use CSS to style HTML webpages. There are three ways you can use CSS. Inline: using style attributes within HTML elements Internal: using style element inside the head tags which is located in the beginning ofthe webpage External: using an external CSS file, which is linked to the webpage at the beginning of the webpage. =================================== 1. Example of CSS Inline styles: <p style="color:red;">This is a paragraph</p>Located above is how you used the style atribute. Within the style attribute, is where color, margin, padding, etc can be used. Each is spaced using a semicolon ";". <p style="color:blue; margin-top:50px;">This paragraph is blue and has a margin from the top of 50 pixels.</p>For the color, it is possible to either write "blue" or use HTML hex colors. It is possible to find which code matches the color on google. For example: ffffff is white. The first two represents red, the second two is green, and the last two are blue. Each can go from 0 to f 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f So since #ffffff is white, #000000 is black. It is also possible to use these inside the style attributes: font-family (changes font type) font-size background-color text-align (left, right, or center) There are many more, which can be found, just search it on google. =================================== 2. Examples of Internal CSS <!DOCTYPE html> <html> <head> <title>Hello World - CSS</title> <style type="text/css"> body { background-color:#000066; } p { color: #ffffff; margin-top:10px; } </style> </head> <body> <p>Here is a paragraph, the internal CSS located in the head, makes this white (#ffffff) and everything in between the body tags has a dark blue (#000066) background.</p> <p>All paragraphs are going to be white, with a margin on top of 10 pixels.</p> </body> </html> In this case, all the CSS styles are located in between the head tags. These stylse effect everything on that webpage. This is why both paragraphs are the same, using one paragph style. It is possible to make one paragraph different then the other. An example of this is located below. <!DOCTYPE html> <html> <head> <title>Hello World - CSS</title> <style type="text/css"> body { background-color:#000066; } p.one { color: #ffffff; margin-top:10px; } p.two { color:#ff6600; margin-top:20px; } p#three { color:#000000; background-color:#ffffff; } </style> </head> <body> <p class="one">1. This is the first paragraph.</p> <p class="two">2. This is the second paragraph.</p> <p id="three">3. This is the third paragraph.</p> <p class="one">4. This paragraph uses the same styles as paragraph one.</p> </body> </html> Notice how with the first two paragraphics the CSS code uses p.one and p.two respectively. The last one uses p#three. Also, in the HTML code it changes; class="one", class="two", and id="three". When using p.one, the HTML code HAS to have class="one", to identify which styles go with the paragraph. When using p#three, the HTML code HAS to have id="three", to identify the correct styles. Each way do basically the same thing. There are some differences, when deciding which one to use. A class can be used several times within the same webpage, while the id can only be used once in each webpage. So if you are going to use it more then once in a webpage, then make sure to use class. =================================== 3. Example of using External Style Sheets. Now instead of having CSS inside the webpage, it will be in a CSS file. This file is then linked to the HTML webpage, to change the styles of the webpage. HTML code: <!DOCTYPE html> <html> <head> <title>Hello World - CSS</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1 id="header1">This is a header</h1> <p class="paragraph">Here is a paragraph.</p> <hr /> <div id="box"><p class="paragraph">Here is some text inside a box. [img=http://fearless-assassins.com/public/style_emoticons/default/smile.png]</p></div> </body> </html> CSS code: (remember save it as "styles.css") h1#header1 { color:#444444; font-size:50px; } p.paragraph { font-family:arial, verdana, sans-serif; margin:10px; } div#box { width:150px; background-color:#999999; border:1px solid #000000; } The HTML div tag is one of the most important HTML tags to use when styling webpages. This will become more apparent in the next tutorials. Before CSS, table tags were used to arrange information on a webpage. But now using div tags and CSS, it is possible to arrange the webpage without any tables. This is a much better way to style webpages and is common practice now. =================================== Recap Three types of CSS When to use class and id ReminderWhen using CSS, remember to open and close the styles: { and } Edited March 30, 2018 by Fearless Staff Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.