Hi Chris,
Could you take a look at my “Typesetting a Community College” exercise from the CSS - styling text section of the MDN webdev tutorial?
I encountered some difficulty with selectors and inheritance, but for the most part it works and looks ok. Any and all feedback (what could have been done differently/improved upon from either visual or code perspective) much appreciated.
NOTE: I didn’t realize the (casual and not very on point) replies from my e-mail got re-posted here as well, and got (rightly) marked as “spam”. Ufff, embarrassing.
Incidentally it occurs to me I’d probably be well advised to start using IRC for advice/debate/feedback. Is there a dedicated channel specifically for discussion of these initial projects from the MDN webdev tutorial beyond the generic #mdn?
Kind Regards,
Martin P.
CODE:
@font-face {
font-family: ‘argh’;
src: url(‘fonts/argh-webfont.woff2’) format(‘woff2’),
url(‘fonts/argh-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘libre’;
src: url(‘fonts/libre-regular-webfont.woff2’) format(‘woff2’),
url(‘fonts/libre-regular-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
/* General setup */
- {
box-sizing: border-box;
}
body {
margin: 0 auto;
min-width: 1000px;
max-width: 1400px;
}
/* Layout */
section {
float: left;
width: 50%;
}
aside {
float: left;
width: 30%;
}
nav {
float: left;
width: 20%;
}
footer {
clear: both;
}
header, section, aside, nav, footer {
padding: 20px;
}
/* header and footer */
header, footer {
border-top: 5px solid #a66;
border-bottom: 5px solid #a66;
}
/* WRITE YOUR CODE BELOW HERE /
/ general text styling */
body {
font-family: libre;
font-size: 10px;
}
h1, h2 {
font-family: argh;
letter-spacing: 3px;
}
h1 {
font-size: 4em;
text-align: center;
}
h2 {
font-size: 3em;
}
p, ul, ol {
font-size: 2.2em;
line-height: 1.5;
letter-spacing: 1px;
word-spacing: 3px;
}
/* this is weird, spec says not to use ::first-line at all /
/ also ::first-line actually doesn’t do anything, but “p” by itself does /
/ update: :first-child also disables the whole thing 
*/
section > h2 + p {
text-indent: 20px;
/color: red;/
}
/* link styling */
a {
outline: none;
}
a[href*=“http”] {
background: url(external-link-52.png) no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 18px;
}
a:link, a:visited {
color: #a66;
}
a:focus, a:hover {
/background: #a66;/
/color: white;/
text-decoration: none;
}
a:active {
background: #a66;
color: white;
}
/* list styling /
li {
/ this doesn’t change anything at all */
line-height: 1.5;
}
ul {
list-style-type: circle;
}
/* navigation menu */
nav li {
/background: red;/
list-style-type: none;
}
nav li a {
/background: red;/
outline: none;
text-decoration: none;
display: inline-block;
width: 100%;
line-height: 3;
text-align: center;
/color: #a66;/
border: 2px solid #a66;
/margin-top: 1.5em;/
margin-bottom: 1.5em;
}
nav li a:focus, nav li a:hover {
background: #a66;
color: white;
}
nav li a:active {
background: #d66;
color: white;
}
One thing I might have trouble with is with adding the external link icon. I found out there may be three possible ways to do. 1, by inserting via 