Learn CSS: Typography


#1

Good day guys , i have an enquiry regarding between Exercise 15 and 16 of Learn CSS: Typography.
I would appreciate your help alot.

Here is the link :
Exercise 15 https://www.codecademy.com/courses/learn-css-typography/lessons/css-typography/exercises/linking-fonts-ii?action=resume_content_item&course_redirect=learn-css

Exercise 16 https://www.codecademy.com/courses/learn-css-typography/lessons/css-typography/exercises/font-face-i?action=resume_content_item&course_redirect=learn-css

Question: What is the reason for having the font added to CSS (Exercise 16) instead of directly onto HTML(Exercise 15)?


#3

The document is not geared to presentation, but information and content. HTML is the core, the document structure that will dictate how the DOM tree is built. We give meaning and importance to page content by how we structure it. This has nothing to do with presentation.

External style sheets have re-usability as the primary asset. That and the fact that when the style rules work to our satisfaction for one page, they work for an hundred pages, or a thousand. One set of rules for an entire site.

And, the presentation is a separate concern from the pages to which the rules will apply. They are content based, and that is all.


#4

Think about style sheets as determining how your page looks and the amount of work that would be required if you had a large site with style definitions embedded into the html on every page. If you wanted to change your paragraph style you would have to do it on every page. If you use a style sheet you only have to change it in that one place and your entire site will look different.


#5

However it mentions that "Once a font is linked, we can create CSS selectors to target elements.

Step 1 : When we have the link to the font of our choice, we can add the font to the section of the HTML document, using the tag and the href.
image

Step 2 : In HTML, the tag for a paragraph element is image. The CSS syntax for selecting image elements is p{}. Hence, it would be p{font-family:Droid Serif;}

If i had wanted to change my paragraph styles i would only have to change it in that one place on the above CSS syntax. I still can’t tell where is the hassle of incorporating it directly onto HTML instead of CSS?

Link: https://www.codecademy.com/courses/learn-css-typography/lessons/css-typography/exercises/linking-fonts-ii?action=resume_content_item&course_redirect=learn-css


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.


#7

#8

These exercises are very simplified compared to real world scenarios. Imagine a fairly typical case where you have a 1000+ html Web page, and over 100 style rules in css. Incorporating these all inline would be horrible to maintain and it wouldn’t be obvious what was happening.

Separating it into another css document gives a much clear sense of what is happening, makes it easier to change things and allows you to reuse styles across different parts of your website.

To give another example imagine the case where in 20 different places of your website you want to apply an underline, font colour change, background colour change and a certain font size. In pure HTML you would have to repeat these 4 rules in 20 different places, whereas in css you would just give these 20 places a single class and give that class the 4 rules in css.

Hope that clarifies it a little more.


#9

Using of parents and child in css is one its advantage. its simply to change codes in a chile while you have the original codes in a parent, site will run as codes described in the child but the main codes already exist.


#10

Incorporating the CSS font inline (one by one for each element) through HTML would be difficult to maintain. This i would totally agree.

"Separating it into another css document gives a much clear sense of what is happening, makes it easier to change things and allows you to reuse styles across different parts of your website"

However, what i’m confused is that notice this HTML method is not really incorporating the CSS font inline (one by one for each element) through HTML.
We would still have to create CSS selectors to target elements , so how does it make this more horrible to maintain than the other method ? Because what i’m seeing is that if we were to make any changes to the font style we could still do it directly on the css documents through their selectors, which is similar to the other method.

If we were to incorporate font through HTML

Step 1: HTML (add the font to the head section of the HTML document, using the tag and the href )

image

Step 2: Create selectors in CSS and set fonts.

image

If we were to incorporate font through CSS directly

Step 1: CSS (copy the @font-face rules to the top of the CSS stylesheet for the font)

image

Step 2: Create selectors in CSS and set fonts.

image


#11

Ah I see where the confusion is.

You are not adding the font “in html” in your Step 1 you are linking to an external CSS file which just so happens to only declare one thing a font. This line is no different to adding any other CSS file.

The difference between them is load time:

  • Typically everything in one file will be quicker as only one request has to be made for the file.
  • However with Google related links it can be quicker to separate them. For instance if you go on CC and they’ve already loaded the Google font from the link, next time you go a website that requires that font your browser will already have the font so a request never has to be sent externally.

Hope that’s a little clearer


#12

Typically everything in one file will be quicker…
So i understand that the load time will be quicker if we had copied the @font-face rules to the top of the CSS stylesheet for the font, instead of linking an external CSS file onto the HTML document.

as only one request has to be made for the file
Only one request has to be made if we were to incorporate font through CSS directly, in other words for the linking of external CSS file onto the HTML document, more than one request has to be made. Could you assist to shed more light on this?


#13

So your browser works by requesting all linked files on a webpage.

If there is a CSS file and an external link to a CSS font file, then there are two requests to load these two separate files. If it was all in one only one request has to be made.