So yesterday we finished everything about the HTML of the documentation page. Today, I am starting with the styling. This are the few steps I took in other to replicate the webpage I saw:
- Styling the HTML and body by giving it a font-family, background-color, color, min-width etc
- Styling the nav bar by correctly positioning it using the position, top and left elements. Also, used the border-right element to differentiate it from the main document.
- Styling the navbar ul, this was my first time using the elements overflow-x and overflow-y (I think). The overflow property sets what happens when the element is too big to fit.
- For the navbar li, the major styling there was to remove the list decoration and give it a position relative to the parent property.
- In styling navbar a I removed text-decoration, changed the color, used the pointer cursor and displayed in block form.
- For the #main-doc, changed the position to absolute, margin-left to 310px so it doesn’t overlap with the navbar.
- For the section, the font-size was reduced and margin of 15px was added.
- The header’s color was changed to black, the font-size was also increased, text was aligned to the left.
- For the code, I used a new property, white-space:preline; it helps control how whitespace and line breaks within an element's text are treated; the position, background color, display etc were also used.
- Media queries for max-width of 815px and 400px were used. The link to the webpage is here Please, I look forward to seeing your comments. Thank you for reading. See you tomorrow.