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 trial

Design Web Typography Final Project: Create a Typographic Site Getting Started: HTML and CSS

Sean Flanagan
Sean Flanagan
33,235 Points

Differences 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:

https://w.trhou.se/1alaxmn6vb

Thanks in advance.

Sean

4 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Sean Flanagan,

Oh, 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
STAFF
Guil Hernandez
Treehouse Teacher

Hi 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
Sean Flanagan
33,235 Points

Hi 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
Sean Flanagan
33,235 Points

Can anyone help me with this please?

Sean Flanagan
Sean Flanagan
33,235 Points

In that case, I might as well finish the course, as I'm so near the end of it.

Thanks Guil.

Sean :-)