Recent Comments
No comments to show.
Tag Archives: css
CSS Theory #4: Types of Boxes
Inline Elements: only occupy the amount of space they need for its content and nothing more. They can be side by side with one another. Occupies only the space necessary for its content. Causes no line-breaks after or before the … Continue reading
Posted in Web Developer Course
Tagged block, box model, css, inline, section 3, theory
Leave a comment
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