In building my first web page, I’ve learned a Lot in practice about HTML and CSS that I was introduced to during class sessions and through homework with G{Code} House. For starters, I can adjust the thickness of the line under the text that works as a link inside the anchor tag in HTML by styling with CSS, using element selector a and CSS property text-decoration-thickness. I added additional declarations with element selector a like adjusting the color and format of that line with the property text-decoration, and changing the color of the link text using the property color.
After running into a styling error, I also learned that you have to use CSS Ids to style a singular tag if there are multiple tags of that element in your HTML. My specific scenario was I added CSS rules with the element selector img with a specific image on my web page in mind, then added another img tag to my HTML, which evidently inherited the CSS rules I wrote. I was able to style the second img tag independently by using a CSS Id. First I modified my HTML by adding an Id attribute to that img tag, then added CSS rules with an Id selector. For both these images, I used the properties margin, height, width, border, and border radius to style in CSS. Some of these properties, along with padding, background-color, color, font-weight, and font-size were helpful in styling my headers and paragraphs as well. I got really into styling these elements in size, shape, color, and proportion in relation to each other. For instance, I applied the same three color property values and slight variations of them to all the elements from my HTML--creating a cute lil color scheme! I also learned that adjusting the margin on headers changes the width of the border of the headers-- allowing me to pull in the width of the borders to lengths I thought best framed the content of the headers.
The last lesson I’ll mention is the one that took the longest for me to figure out: if you change your CSS file name in a folder after linking your CSS file in the link tag in HTML, you have to update the changed file name in the link tag or else your CSS rules won’t transfer! I was constantly refreshing my HTML file in a browser confused as to why I wasn’t seeing my CSS applied, and finally after closely inspecting my HTML code I saw the inconsistency with my old and new file name. Learning through spending an upsetting amount of time on mistakes while coding really helps the lessons stick!
Top comments (3)
Beautifully written!
Thank you!!
Each student may have problems when writing an essay, but it is important to solve them correctly and on time.