Skip to content

Instantly share code, notes, and snippets.

@dannyvassallo
Last active September 16, 2015 02:03
Show Gist options
  • Save dannyvassallo/67c1a79d23aacd3338f1 to your computer and use it in GitHub Desktop.
Save dannyvassallo/67c1a79d23aacd3338f1 to your computer and use it in GitHub Desktop.
Different ways you can use CSS

#How to Use Inline, In-Document, and Linked CSS

###3 Main Ways to use CSS

####Inline Styles Inline styles 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 style="font-size: 200%;">
	This text will be twice the size
	of your other paragraphs.
</p>

####In-document ("Embedded") Styles In-document (AKA “embedded”) styles make use of the <style> </style> tags within the HTML document’s head, like so:

<style>
	p {
		font-size: 200%;
	}
</style>

####Linked Stylesheets Linked style sheets 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’s head like this:

<head>
  ...
  <link rel="stylesheet" href="style.css" media="screen" />
  ...
</head>

There are three important pieces here:

  • Rel: Stands for “relationship.” Tells your browser that this is a stylesheet.
  • Href: Stands for “hypertext reference.” This is how your browser knows where to find the stylesheet. If it’s in a different directory, you’ll have to show that in your href.
  • Media (optional): Says that this stylesheet should be applied to the screen. If you leave this off, it will still be applied to the screen.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment