We’ve mentioned previously that there are three methods of using CSS: external, internal, and inline. \u00a0In this tutorial we will go over each method with more detail.<\/p>\n
An external style sheet, is a separate file storing all of your formatting.\u00a0 Then for each page that you want to use that style (or all your pages), you would simply add this code if your stylesheet is a file named style.css:<\/p>\n
<head>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/>\n<\/head><\/pre>\nOn each page you wish to use the style sheet for, insert style.css (this is the actual file that has your style, you can name it anything you want to) in the <head> section of your webpage. We still have not discussed how to create the actual CSS file. Open up your notepad or any other text editor you have on your computer.\u00a0 Next, type in the style that you want that CSS file to have.\u00a0 For example, if you wanted to set the background color as red, the main text (paragraph text) as black, and the header as blue, you would type in:<\/p>\n
body{ background-color: red;} \np { color: black; } \nh1{ color: blue; }<\/pre>\nWhen you have finished the styles you want in this CSS file, click on “Save As” and save the file as style.css.\u00a0 Now it is a css file.\u00a0 To use the stylesheet, you will need to upload the .css file to your server either by FTP or through file manager in cPanel.\u00a0 After you have created your css file and included it using the code above, all of the styles you specified in the file will be applied to your web page. You can add as many different style sheets on one page as you need, but generally it is best practice to use only one or two.<\/p>\n
Creating an Internal Style Sheet<\/h2>\n
To have a style only be used on one page, you will add the properties within the <style> <\/style> tag in the head.\u00a0 Unlike the External Style Sheet, you do not have to create a separate file as it will all be contained on the page.\u00a0 Open the page that you want to add a style sheet for and go to the <head> section. The internal style sheet must be placed in the <head> section or they will not work.\u00a0 For example, if you want all your paragraphs to have black text and the background to be red, you would place the following in your head tag:<\/p>\n
<html>\n<head>\n<style type=\"text\/css\"><\/strong>\np {color: black; }<\/strong>\nbody {background-color: red; }<\/strong>\n<\/style><\/strong>\n<\/head><\/pre>\nRemember for the text to be the color specified, it will only take effect if you use the <p> tags within the page as that is the only text that will be effected.\u00a0 If you have a <h1> tag and want to change the color of those as well for example, you will need to add another line to the style:<\/p>\n
<html>\n<head>\n<style type=\"text\/css\"><\/strong>\np {color: black; }<\/strong>\nbody {background-color: red; }\nh1 {color: black }\n<\/style><\/strong>\n<\/head><\/pre>\nNow all the text on that page with a <p> or an <h1> tag will be changed.\u00a0 Remember this will not effect other pages, but only the page that has the <style> changes in the header.<\/p>\n
Creating an Inline Style<\/h2>\n
This is the simplest method to using CSS, but since it has to be done to each tag individually it is also the most time consuming.\u00a0 You will us an Inline Style if there is just one element that you want to change, for example if all the paragraphs on your page are black but you want one to be red, then you can add an Inline Style to that paragraph:<\/p>\n
<p style=\"color: red;\">I want this paragraph to be red instead of black.<\/p><\/pre>\nNow on your page, the other paragraphs will still be black but any text within the <p> <\/p> tags as shown above will now be red.\u00a0 This can be repeated as many times as necessary on the web page.<\/p>\n","protected":false},"excerpt":{"rendered":"