CODING TEMPLE
HTML/CSS Basics
Get it here:
http://brackets.io/
Stands for:
Example:
<p>Hello World!</p>
*Notice that the tag name is abbreviated*
More tags here: http://www.w3schools.com/tags/
Examples
Example:
Opening bracket
Tag name
Closing bracket
<
p
>
Opening tag: <p>
Closing tag: </p>
Two types of elements
For Reference: http://www.w3schools.com/tags/
Trying playing around with the following tags:
<li>
<header>
<body>
<strong>
<em>
Reference: http://goo.gl/cCzp9v
source: http://schoolsofweb.com/
Without attribute
With attribute
source: University of Alaska Fairbanks
source: developer.mozilla.org
<img> Tag
source: University of Alaska Fairbanks
a Tag
<a href="www.safetyschool.org"> A school for Harvard rejects</a>
<a>A school for Harvard rejects</a>
2. Give the <a> element an href attribute, like so
<a href=""> A school for Harvard rejects</a>
3. Fill in the value of this attribute with the web address that you want the link to link to.
<a href="www.safetyschool.org"> A school for Harvard rejects</a>
Here are some tags that go inside the <head> element that provide information about the webpage:
The link tag will have the following attributes:
h1 {
color: #66CCFF; /*named colors aren't typically used. So use the color's hex number*/
text-align: center;
}
h2 {
font-size: 20px; /*px stands for pixels*/
font-style: italic;
text-align: center;
}
p {
font-family: Monospace;
}
Hex digits for colors: https://goo.gl/tNyyIs
color
text-align
font-style
font-weight
font-size
Reference: https://goo.gl/9GzVZF
(Use the sidebar on left to navigate)
Selecting a group of different elements
<p class="apple">Steve Jobs co-founded Apple</p>
<b class="apple">But Wozniak was the genius behind it</b>
.apple{
color:red;
}
HTML
CSS
Use a period followed by class name to select a class.
More On Classes
<p class="apple">Steve Jobs co-founded Apple</p>
<b class="apple nerd">But Wozniak was the genius behind it</b>
/*What will happen here?*/
.nerd.apple{
color: blue;
}
.nerd{
color:red;
}
HTML
CSS
<p class="apple">Steve Jobs co-founded Apple</p>
<b class="apple nerd">But Wozniak was the genius behind it</b>
/*This rule and the one following it are equal in specificity*/
.nerd{
color: blue;
}
/*This rule will be applied since it is the last one in this file.*/
.apple{
color:red;
}
HTML
CSS
Styling with classes practice
Reference: https://goo.gl/JMNlPu
<h1 id="myHeader">One Ring to rule them all...</h1>
HTML
CSS
#myHeader{
text-align: center;
}
<p>If you want to be my lover, <span class="c2">you gotta get with my friends!</span></p>
HTML
CSS
.c2{
color: blue;
}
<h2 class="important">Thriller</h2>
<p class="important">
'Cause this is thriller, thriller night
And no one's gonna save you from the beast about to
Strike
You know it's thriller, thriller night
You're fighting for your life inside a killer
Thriller tonight
</p>
<img class="important" src="scary.png" alt="Zombie Michael Jackson">
<div class= "important">
<h2>Thriller</h2>
<p>
'Cause this is thriller, thriller night
And no one's gonna save you from the beast about to
Strike
You know it's thriller, thriller night
You're fighting for your life inside a killer
Thriller tonight
</p>
<img src="scary.png" alt="Zombie Michael Jackson">
</div>
source: developer.mozilla.org
source: w3schools.com
The float property specifies where the element is placed within a container.
source: css-tricks.com
<p> <img alt="nyan cat" src ="https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG">
nyan nyan nyan nyan nyan nyan nyan Nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan
nyan nyan nyan nyan nyan nyan nyan nyan Nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan
nyan nyan nyan nyan nyan nyan nyan nyan nyan Nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan
nyan nyan nyan nyan nyan nyan nyan nyan nyan Nyannyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan
nyan nyan nyan nyan nyan nyan nyan nyan nyan Nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan
nyan nyan nyan nyan nyan nyan nyan nyan nyan Nyan</p>
The image will float to the right of the paragraph.
img {
float: right;
}
CSS