Nesting
An important term used in HTML as well as in most programming languages is that of “nesting”. This means that elements or structures are embedded inside of other elements or structures. But they don’t over lap. HTML elements are nested which means they can be placed inside of each other. What does that mean though? …
Read MoreHomework: Grouping & Nesting
Homework
Read MoreSpecificity or Which Declaration?
Okay – this is a rather complicated subject and one that drives even experienced programmers crazy. The word alone is a mouthful, right? What this means is which CSS declaration applies to which HTML element. Why do you need to know this? Because, sometimes your CSS won’t work and you can’t figure out why. Understanding…
Read MoreGetting Images from the Web
Sometimes you’ll be given images – for example if a graphic designer creates a logo for the website you are working on. Sometimes, you’ll create them yourself. But, a lot of the time, you’ll be looking at the internet for images. So, let’s see how. How to Insert an Image from the web We will…
Read MoreHomework: Attributes, head & links
Here’s your homework! You might need one of these links to complete: Wilson (aka Jackson-Reed)’s website: https://www.wilsonhs.org/ Deal’s website: http://alicedeal.org/ <!DOCTYPE html> <html> <head> <title>My Coding Homepage</title> </head> <body> <h1>This is my page for coding class</h1> <p> My name is …</p> <p>My school is…</p> </body> </html>
Read MoreHomework Answer: Layout1 – Pulling it All Together
The HTML would look like this: And the CSS like this: You’ll notice a few things including: A class is not assigned to the second table – instead a default style is applied to all tables. A class is not assigned to the first table either but only to the div around it – then…
Read MoreHomework: Pulling it Together
Create a new HTML file called layout1.html and a new CSS file called layout1.css to create a webpage like the image below.
Read MoreApplying Selectors
There are a few tricks to applying class and ID selectors to your various HTML elements. Sometimes this can very complicated and it is difficult to tell how to set up both your HTML and your CSS in order to make the web page look the way you want. We’ll go over a few simple…
Read MoreBorders
Borders work similar to padding however instead of adding space -they add lines around the element. You can set the type of border (line, dotted line, double line and more), color and width of the border. Prefer to watch a video? https://labcatscoding.com/wp-content/uploads/2020/07/BoxBorders.mp4 This is our sample table that we will play around with the styles…
Read MoreHomework: Pseudo Classes
Need some paragraphs? Use one of these random paragraph generators: Random Word Generator ContentTool Random Paragraph Generator RandomOutputs – paragraphs and so much more.
Read More