Recent Comments
No comments to show.
Monthly Archives: January 2022
Section 3, Challenge #2
Using our Converse Shoes code, time to practice the things that we have learned. Resetting the universal selector to zero. Use width to give a desired product width. Use margin: 50px auto; to center your page and give some space … Continue reading
Centering our Page
Steps to center a page: have or make a container and give it a width. HTML CSS <div class=”container”> .container { width: 800px;} </div> set margin-left and right to auto, so that the width is automatically placed and there will … Continue reading
Adding Dimensions
To make a sidebar you can add a width: width: 500px; If you have an image, for example, you can use a percentage. 100%, would be 100 percent of the parent container (i.e. computer screen, tablet screen, or phone screen). … Continue reading
Margins and Paddings
Padding shorthand in CSS: Four values: starts at the top, then right side, bottom, then left side. Three values: first number is top, second number is right and left, third number is bottom. Two values: first number is the value … Continue reading
CSS Theory #3: The CSS Box Model
Default behavior calculation: Final element width = left border + left padding + width + right padding + right border Final element height = top border + top padding + height + bottom padding + bottom border Margin = empty … Continue reading
Section 3 – Challenge #1
CSS elements used: background-color: #f7f7f7; (light grey background) border: 4px solid black; color: #777; (dark grey text color) cursor: pointer; (changes arrow mouse cursor to a hand pointer to click a button or link) font-family: sans-serif; font-size: 22px; font-weight: bold; … Continue reading
CSS Theory #2: Inheritance and the Universal Selector
An inherited property is very easily overwritten by any rule, which has a value for that same property. So, inherited properties are the ones who have the lowest priority. This is really elements inheriting values from one another and is … Continue reading
Posted in Web Developer Course
Tagged css, inheritance, section 3, theory, universal selector
Leave a comment
CSS Theory #1: Conflicts between Selectors
When there are multiple declarations for the same element then: 1. Declarations marked “! important” are used first. It should only be used as a last resort, to fix code. It is more of a hack, and should not be … Continue reading
Using Dev Tools
Three ways to open the developer tools: Right click inside an online page. Then click “Inspect” or “Inspect Element:”. Hold Ctrl and Shift together and press “I”. On Firefox and Brave Web Browser, click the hamburger icon on the upper … Continue reading
Styling Hyperlinks with Pseudo-classes
a:link – will target all of the anchors that have an href attribute. a:visited – usually will use the same color as on the link pseudo class. Unlike Google who changes from blue (un-clicked) to purple (clicked) link. a:hover – … Continue reading