Skip to content

Instantly share code, notes, and snippets.

@fzero

fzero/0README.md

Last active May 22, 2018
Embed
What would you like to do?
RBC - Lecture notes - May 22, 2018

Intro to CSS

This is the code we've worked on during May 22 class. Feel free to use it as reference!

/* This CSS file is loaded before theme.css */
body {
margin: 40px 10% 400px 10%;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Profile Page</title>
<!-- This loads google fonts - see https://fonts.google.com -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:300,400" rel="stylesheet">
<!-- Base css file -->
<link rel="stylesheet" type="text/css" href="base.css">
<!-- Theme css file -->
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 4</a>
</li>
<li>
<a href="">Link 4</a>
</li>
</ul>
</nav>
<section>
<h1>Mr. Person Guy</h1>
<h4>Phd. Md. Awesome person. - Human being (part time)</h4>
</section>
</header>
<h2>Header outside main</h2>
<main>
<h2>About</h2>
<p>
<img class="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Golde33443.jpg/420px-Golde33443.jpg" />
Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr. <strong>Forage af asymmetrical</strong>, craft beer pinterest DIY taxidermy meggings echo park shaman vice scenester XOXO letterpress.</p>
<h2 id="unique">By the way...</h2>
<p>Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr. <strong>Forage af asymmetrical</strong>, craft beer pinterest DIY taxidermy meggings echo park shaman vice scenester XOXO letterpress. Subway tile <span class="highlight">kombucha lyft tacos gluten-free tbh locavore seitan butcher farm-to-table sartorial taiyaki scenester intelligentsia.</p>
<p>These are things:
<ul>
<li>Football</li>
<li>Barbeque</li>
<li>A third thing just to justify this</li>
<li>Fourth?</li>
</ul>
</p>
<p>Vice before they sold out knausgaard adaptogen jean shorts ugh</span> artisan stumptown post-ironic retro fixie viral vape. Wolf palo santo +1 knausgaard celiac fixie shaman glossier affogato photo booth iPhone godard. Squid portland fingerstache, lumbersexual DIY bespoke affogato tacos bitters.</p>
<aside>Seitan cardigan cold-pressed meh, pug viral tilde meditation gluten-free letterpress 8-bit retro forage yr.</aside>
</main>
</body>
</html>
/*
We got this from Google fonts. Pasted here for reference:
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto Slab', serif;
*/
/*
body is also defined in base.css, but these definitions
will take hold, since this file is loaded after
(i.e. below it) on the html file.
*/
body {
font-family: 'Open Sans', sans-serif;
margin-top: 140px;
}
/*
You can define properties for multiple tags, classes and ids
in one go by separating them with commas
*/
h1, h2 {
font-family: 'Roboto Slab', serif;
font-weight: 300;
}
/*
You can specify any other properties separately after that
*/
h1 {
color: #cb2222;
}
h2 {
color: blue;
}
/*
This block sets the style for the nav tag
*/
nav {
font-family: "Roboto Slab", serif;
font-size: 24px;
text-align: center;
background: rgba(0,0,0, .1);
padding: 10px;
/*
The navigation block has a fixed position at the top of the page,
defined by the following properties
*/
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/*
This sets the style for a tags withing the nav tag
*/
nav a {
color: black;
text-decoration: none;
}
/*
This sets the style for ul tags withing the nav tag
*/
nav ul {
list-style-type: none;
padding: 0;
margin: 5px;
}
/*
This sets the style for li within ui within nav
*/
nav ul li {
display: inline;
margin-right: 20px;
}
aside {
border: 10px solid black;
border-radius: 10px;
background-color: lightblue;
padding: 15px;
margin-top: 60px;
}
main h2 {
color: gray;
font-size: 22px;
}
p {
font-size: 18px;
}
/*
The blocks below refer to the "clearfix hack". They make sure
the contents will be displayed properly when using the float
property (see .picture) below.
Reference: http://learnlayout.com/clearfix.html
*/
main p {
overflow: auto;
}
.clearfix {
overflow: auto;
}
/*
Class definitions: only elements with class="picture" will be
affected by the following blocks
*/
.picture {
display: inline-block; /* image is displayed as block, but flows with text */
float: right; /* image is displayed to the right of the text */
margin: 0 0 10px 10px;
box-shadow: 5px 3px 16px 4px #ccc;
width: 33%;
border-radius: 15px;
}
.highlight {
background-color: yellow;
}
.bolder {
font-weight: bolder;
}
/*
The definition below will only be applied to the unique
element with id="unique"
*/
#unique {
border-bottom: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment