<\/p>\n<\/p>\n
There are three ways to inject a bit of CSS magic into your web pages. They are inline styles, in-document styles via the <style> tag, and linked style sheets. Each is valuable in its own right \u2013 the trick is knowing when to use them.<\/p>\n
Inline styles<\/strong> are the most basic way of applying styles to an element, in that you apply the styles directly to the tag in your HTML. For example, this is an inline style:<\/p>\n This is most useful when you are trying out new tags. In the example above, if I had several paragraphs on my page, I could easily try out several styles on several paragraphs to more quickly find the exact look I was going for. It\u2019s also useful if you need to override a more global style in one specific instance: if you\u2019re using inline, in-document and linked CSS all at the same time, inline styles take precedence. <\/p>\n In-document (AKA “embedded”) styles<\/strong> make use of the <style> tag within the HTML document\u2019s head, like so:<\/p>\n This technique is best used when you have one page that needs to be styled differently from every other in your website. You still have the flexibility to apply styles to your entire document, and those styles have the opportunity to cascade and change broad swaths of your page with little effort, but to apply these styles to more than one page, you have two options: copy and paste the styles into all your documents (messy, if you ever make any changes), or use linked style sheets.<\/p>\n Linked style sheets<\/strong> are the preferred method for applying CSS to a website. Here, your CSS resides in a separate document, outside of your HTML entirely. You then link to it in your document\u2019s head like this:<\/p>\n There are three important pieces here:<\/p>\n And most importantly, you can just include this one line of code in the top of every page you want to have styled (between the <head> and <\/head> tags), and the browser takes care of the rest. Now if you ever make a change to your CSS, you can just change it in that one file, and the changes will take place automatically across your entire site. And that, when you get right down to it, is really what makes this whole CSS thing so great in the first place.<\/p>\n<p style=\"font-size: 200%;\">\n\tThis text will be twice the size\n\tof your other paragraphs.\n<\/p><\/pre>\n
<style>\n\tp {\n\t\tfont-size: 200%;\n\t}\n<\/style><\/pre>\n<link rel=\"stylesheet\" href=\"style.css\"\nmedia=\"screen\" \/><\/pre>\n
\n