For this assignment, the instructor asked us to create a Cascading Stylesheet (CSS) to style the recipe that we had previously created. You can see the CSS code I wrote below, and click here to see the page as it would look in your browser.

@charset "utf-8";
/* CSS Document */


/* Typography */
@font-face {
	font-family: 'Ubuntu';
	src: url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);
	}
* {font-family: 'Ubuntu', 'Verdana', 'sans-serif';
background-color:#4A032D;
	color:#ffffff;
	font-size:16pt; 
	font-weight:400;
}

a {color:#720947;
	font-weight:700;
	text-decoration:none;
}

body {margin: 2px;
	padding: 0; 
}

h1 {text-align:center;
	text-decoration:underline;	
	font-size: 20pt;
	font-weight: 700;		
}

img {border: medium dashed #B95B92;
	display: block;
	margin-left:auto;
	margin-right:auto;
	height: 350px;
	
}

figcaption {text-align: center;
			display:block;
			font-size: smaller; 
			font-style: italic; 
			color:#FFFFFF;
			
			
}
nav ul li {list-style-type:none;
			left: 0;
			margin: 0px 0px 0px -40px;
			padding: 4px;
			
}

footer {text-align:center;
		padding: 10px;
		margin-top: 1px; 
		border-top: medium dashed #B95B92}
		
table, td, th {border: medium dashed #B95B92;
		border-collapse: collapse;
		text-align:center;
		padding: 3px;
}

a:hover {color:#B95B92; 
		text-decoration:underline;
		background-color:#720947
}
		
/*I made a floating navbar but it looks bad on mobile... ;_;

#navbar {position: fixed;
		float:left;
		background-color: #dd7821;
		height: 100%;
		width: 13%;
		z-index: 100;
		top: 0px;
		left: 0px;
		
}


#content {float: right;
		position:relative;
		width: 85%;
}
*/			
  • Date: Spring 2014
  • Class: Information Architecture for the Web