Skip to content

Instantly share code, notes, and snippets.

@nuclearsandwich

nuclearsandwich/IGotStyle.html

Created June 24, 2012 20:43
Show Gist options
  • Save nuclearsandwich/2984831 to your computer and use it in GitHub Desktop.
Save nuclearsandwich/2984831 to your computer and use it in GitHub Desktop.
Download ZIP
June 24, 2012 Notes
Raw
hello.html
<!-- HTML COMMENTS ARE STUPID -->
<!-- MOST HTML DOCUMENTS BEGIN WITH A DOCTYPE DECLARATION -->
<!DOCTYPE html>
<!-- HTML DOCUMENTS (all HTML files are "documents", or portions of documents.)
begin with an opening <html> tag.-->
<html>
<!-- A document generally has a head. -->
<head>
<title>Hello, World!</title>
<meta charset="utf-8">
</head>
<!-- Followed by a body -->
<body>
A Body is just text, hyper or otherwise.
Blahblah boasdfjsadlfkjasdtew
HTML doesn't give a damn about your white
space
<p>Unless you're using paragraphs</p><p>Like we are</p>
And even then, the tags define the space, not the literal spaces.
</body>
</html>
Raw
IGotStyle.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
color: black;
}
/* every p inside a div */
div p {
color: blue;
}
/* every div AND every p tag */
div, p {
background-color: orange;
}
aside {
background-color: #333333;
color: fuchsia;
}
</style>
<title>I GOT STYLE! (Like an Alpaca has fleas)</title>
</head>
<body>
<p>If I didn't "inherit" style from the body I'm inside, I'd be <em>Gulp</em>Black text on a white background again</p>
<p> Instead we're cool like Diablo. Diablo colors.</p>
<div><p>Because I'm a p-tag inside a divisor tag, I think I should be blue</p>
But bare text inside a div is still red.</div>
This is called "selection". Think of it as a search.
Inside any divs, if there are any p tags, their color is blue.
CSS is like go-fish.
<aside>We should add Go-Fish to Card SHarks!!!one!</aside>
Isn't it weird how the aside's background spans the entire line, even though the text doesn't?
This has to do with the CSS "box model". I don't understand it for fuck shit.
</body>
</html>
Raw
internet.txt
A series of tubes
[#http]: HTTP <- Hyper-Text Transfer Protocol
An example of hypertext.
Well. Frankly
This document... is hypertext
almost
It's text
See HTTP[#http] Above
Now it's hypertext, because of that reference.
This is my own personal hypertext format. I call it S!
Doing this is a stupid idea.
HTML is great!
My Hypertext example in HTML
<h1 id="http">HTTP Hyper-Text Transfer Protocol</h1>
An example of hypertext.
Well. Frankly
This document... is hypertext
almost
It's text
See <a href="#http">HTTP</a> Above
Now it's hypertext, because of that reference.
The reason hypertext is important.
1. It's just text.
- We can read it easily.
- Computers can read text easily.
2. Render forms differently.
- Title can be bolded.
- Emphasized text can be italicised.
- links can blue and underlined.
How to write it?
It's text, so sublime works just fine.
FACT: HTML is ugly.
ALWAYS. SRSLY. As ugly as a mangy alpaca.
Like everything and everyone though. A good HTML document has a sense of <em>style</em>.
HTML shops at CSS for all it's style needs.
CSS: Cascading Style Sheets
WHAT THE FUCK IS A CASCADING?!!?! And what does it have to do with style?
Cascading, simply put, means that styles you apply to outer tags cascade to apply to inner tags.
Because of this cascading shit though, CSS gets tricky fast. I'm actually kind of shit at it.
<h1 id="resources">RESOURCES</h1>
<ul>
<li><a href="https://developer.mozilla.com">Mozilla Developer Network</a></li>
<li><a href="http://diveintohtml5.info/table-of-contents.html">Dive Into HTML 5</a></li>
<li><a href="http://installfest.railsbridge.org/frontend/">RailsBridge Frontend docs</a></li>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment