Homework: 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 MoreHomework: Box Model
Class Selectors
Class Selector are the most commonly used type of selector. It allows you to create and apply styles to a subset of an HTML element. For example, if you wanted important paragraphs to have bold font. Or certain lists have a border. There are two actions required to create and use a class selector. Create…
Read MoreLinks Pseudo Classes
The ones that are the most common and the most useful are for links. You attach them on to the the <a> tag using a colon followed by the name of the pseudo class. Here is a list of the ones used with links: :link – style all links :visited – style links that have…
Read MoreMargins
Margins work very similar to padding except that they add space outside the element. What does that mean? Simply, that you cannot set the background-color. Margins are transparent which means it takes on the color of whatever element is behind your element – such as the body or another element. Prefer to watch a video?…
Read More