For this lesson task you can continue to use your existing index.html and styles.css files of the previous tasks.
Question 1
Use an online font library and select a font pair for your project. You need to choose one font to use as a heading font and a different font to use for all paragraphs or body text. We recommend Google fonts, but you can use a different library if you want to. Using the <link> tag method described in the lesson, link the chosen fonts into your project. Create rules in CSS to apply the fonts from the library to create a different font style for headings, paragraph text and list items. The same text styles should apply to all the pages of your website. Take screenshots of the HTML, CSS and browser or result view. If you encounter any problems, try to go over the lessons on inheritance and styling text. Write a short paragraph to explain what you have learnt about styling text using fonts from an online font library.
Answer:
I decided to activate 3 different fonts from Google Fonts. One for the body text, one for the titles, and one for the navigation.
For the body text I used "Alkatra"
For the titles I used "Lilita One"
And for the navigation I used "Cinzel Decorative"
HTML:
I copied and pasted all font links to the other two pages as well.
I added different properties to each font for practice and testing.
CSS:
Live view index.html
Live view for "About Us"
Live view for "Contact"
Conclusion:
This lesson was extremely helpful with making it clear how to use and manipulate fonts and text in both HTML and CSS. I am aware that there is a lot more to learn, but this is already a big start. I find it amazing that we are able to use fonts from other websites and load them up to our pages. This opens a lot of opportunities for customization and uniqueness in my projects.
Commentaires