Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialSean Flanagan
33,235 PointsDifferences between my web page and Mattox's
Hi.
I'm 5 minutes 48 seconds into the video.
I've noticed some differences between my web page and Mattox's. I had some trouble selecting the fonts.
Could someone look at my CSS and tell me what's wrong please?
Here's my styles.css:
/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */
/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */
/* Colors
*Primary*
White: #f6f4ec;
Green: #9bc152;
Navy-Gray: #282932;
*Secondary*
Medium Green: #81a53d;
Dark Green: #708647;
Grays: #8b8d9b and #6d6f81;
Blues: #6b6d85 and #47495d;
Dark Navy: #1b1b21; */
/* Webfonts */
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans|Alegreya+Sans+SC|Alegreya:400,400i');
/* Basic Elements */
html {
margin: 0;
padding: 0;
}
body {
font-family: 'Alegreya Sans', Verdana, Tahoma, sans-serif;
margin: 0;
padding: 0;
color: #282932;
background: #f6f4ec;
}
p {
}
p + p {
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Alegreya', Georgian, serif;
font-weight: normal;
font-style: italic;
}
h1 {
}
h2 {
}
h3 {
}
ul {
margin: 0;
}
li {
margin: 0;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover, a:focus, a:active {
text-decoration: none;
}
abbr {
}
::selection {
}
/* Specific Styles */
header {
}
header h1 {
}
header h2 {
}
header abbr {
}
.summary {
}
.summary p {
}
.summary p + p {
}
.summary a {
}
.summary a:hover {
}
.preamble, .requirements {
}
.preamble h3, .requirements h3 {
}
.preamble p, .requirements p {
}
.requirements a {
}
.requirements a:hover {
}
.requirements p:last-of-type {
}
.requirements p:last-of-type a {
}
.requirements p:last-of-type a:hover {
}
.benefits {
}
.benefits h3 {
}
.benefits p {
}
.explanation, .participation {
}
.explanation {
}
.participation {
}
.explanation h3, .participation h3 {
}
.explanation p, .participation p {
}
.participation h3 {
}
.participation a {
}
.participation a:hover {
}
.participation p:last-of-type a:nth-of-type(1), .participation p:last-of-type a:nth-of-type(2) {
}
footer {
}
footer:after {
}
footer a {
}
footer a:nth-of-type(even) {
}
footer a:hover {
}
aside {
}
.sidebar {
}
.design-selection {
}
.design-archives, .zen-resources {
}
.sidebar h3 {
}
.sidebar ul {
}
.sidebar li {
}
.sidebar a {
}
.sidebar a:hover {
}
.design-selection a:nth-of-type(even) {
}
.sidebar a:hover:nth-of-type(even) {
}
.zen-resources h3 {
}
.design-archives a, .zen-resources a {
}
/* Media Queries */
@media (max-width: 64em) {
body {
}
.summary p {
}
.explanation h3, .participation h3, .preamble h3, .requirements h3, .benefits h3 {
}
.explanation p, .participation p, .preamble p, .requirements p, .benefits p {
}
}
@media (max-width: 54em) {
body {
}
.summary p {
}
}
@media (max-width: 47em) {
header h1 {
}
header h2 {
}
.explanation, .participation {
}
}
@media (max-width: 34em) {
header {
}
header h1 {
}
header h2 {
}
.summary p {
}
.summary p + p {
}
h3 {
}
.design-selection {
}
.design-selection li:last-of-type {
}
.design-archives {
}
.zen-resources {
}
}
@media (min-width: 47em) {
.benefits {
}
.benefits h3 {
}
.benefits p {
}
}
@media (min-width: 54em) {
.benefits {
}
}
@media (min-width: 64.125em) {
.benefits {
}
aside {
}
aside:hover {
}
aside:after {
}
aside {
}
}
@media (min-width: 94em) {
body {
}
.summary p {
}
.benefits {
}
.explanation h3, .explanation p, .participation h3, .participation p {
}
}
@media (min-width: 120em) {
body {
}
.summary p {
}
.preamble h3, .preamble p, .requirements h3, .requirements p {
}
.explanation h3, .explanation p, .participation h3, .participation p {
}
.benefits {
}
}
/* Animations */
Here's a snapshot:
Thanks in advance.
Sean
4 Answers
Guil Hernandez
Treehouse TeacherOh, I see what you mean. In the HTML, each acronym is inside <abbr>
tags to provide a full description of the acronym as a tooltip. I'm not sure why it's not appearing that way in the video, but it's completely normal and nothing to worry about. :)
Guil Hernandez
Treehouse TeacherHi Sean Flanagan,
I checked out your Workspace snapshot and the preview looked exactly like in the video at 5:48. What are the differences you are seeing? Is the 'Alegreya' font not displaying?
Sean Flanagan
33,235 PointsHi Guil. Thanks for replying.
What I'm seeing is that some of the acronyms have a dotted underline, which wasn't the case in Mattox's preview. Is this something I should worry about?
I look forward to hearing from you again.
Sean
Sean Flanagan
33,235 PointsCan anyone help me with this please?
Sean Flanagan
33,235 PointsIn that case, I might as well finish the course, as I'm so near the end of it.
Thanks Guil.
Sean :-)