The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. The border will remain invisible if the style isn't specified. Borders can be set using color and weight utilizing things like dashed, solid, and double as well as numeric values, typically in pixels. Border-top, border-bottom, border-right, and border left can be used to adjust specific sides of the border.
Padding is the space between the content and the border of the element. Margin is the space around the border. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.
When specifing fonts, the browser will pick the first font listed that it has already installed onto the user's computer. For safety, it's better to always use double quotes to contain each font (don't forget the comma to separate them).
units for font size are as follows:
To center an image on the page, use the classes 'd-block' and 'mx-auto'. Since the img element is inline,
it's necessary to make the image into a block element. mx-auto only works with block contents that
aren't at 100% width because it adjusts the left and right margins.
For centering a scalable image,
add the class 'img-fluid'. This will make the image stay centered but the height and width will respond
proportionally to the screen size instead of just staying obnoxiously large.
When the screen is at least medium (786 pixels), the elements should be displayed in one row of four columns. This is acomplished using col-md-3, in which each element recieves 3/12 of the availible space within the row. You can see what this will look like in the screenshot below.
When the screen is small (greater than or equal to 576), the elements should be displayed in 2 rows of 2 columns. This is acomplished using col-sm-6, in which each element recieves half of the availible space within the row. The screenshot below is an example.
When the screen is sized to be extra small, which is less than 576 pixels, the elements should appear in one column, which is achieved using col-12 since bootstrap doesn't include a size in class values for the xs size. See the screenshot below.
To add a background image, the rule will be as follows: background-image: url(add the url here). background-repeat used with no-repeat will make it so the image on apears once. From here, the backgound image can be moved around utilizing padding on different sides.
In order to hide content under certain conditions, a @media query is needed. By specifying the max width, you're able to decide at what size the contents will no longer be displayed.
An important note is to add the class of container to the body after pasting in the urls needed for bootstrap, which will format it correctly with margins. The next step is to get all of the information into the html formated badly so that it's all there and can be edited with CSS. Something helpful for this was making sure the divs were formated in such a way that it could easily be changed in CSS for that entire section. Below is the screenshot of the formating for the blue boxes. See this link for reference.
Snippets are stand-alone, re-usable code that can be utilized for increased ease and less wasted time
when adding content in html (think of it like a life hack). Snippets use placeholders for spots where
you'd want to add/change text. You can quickly jump to the next placeholder with Tab, at which point you
may edit the placeholder or jump to the next one. Variabes are a way to store information that you want
to reuse throughout your stylesheet like color or fonts. Sass uses the $ and # symbol to make something
a variable.
To create a snippet, locate the snippets tab on the far left window of VSS. Once there, you can
either create a folder to house snippets related to a specific task or just create a new snippet. To
activate placeholders, make sure to check the box within 'edit snippet'.
<section>
<h1 class="labtitle">${1:lab-number}</h1>
</section>
<article>
<h1>${1:content}</h1>
<p>${2:content-def}</p>
</article>
The primary benefit of using SCSS is being able to quickly identify what rules in the CSS are being used for what areas. This can be useful for reading a and changing a CSS document qucikly. The Watch Sass function allows you to use SCSS and automatically change the CSS. An important note is to NOT edit the CSS file if you're also using a SCSS file because the SCSS edits will overright anything that is done to the CSS.
This was the gist of the original CSS code:
#OrderInfo td:nth-child(odd),
#Addresses td:nth-child(odd){
}
#OrderInfo td:nth-child(odd),
#Addresses td:nth-child(odd){
}
And this is what it became after using SCSS to simplify it:
#OrderInfo, #Addresses {
td:nth-child(odd) {
text-align: right;
padding-right: 10px;
&::after {
content: ":";
}
}
td:nth-child(even){
border: 1px solid #000;
padding-left: 10px;
text-align: left;
}
}
In this lab the tabs were styled in a 'Hope Theme'. The first step to maintaining consistenet color
styling is to declare variables at the top of the stylesheet so that they are consistent (ex.
$hope-orange: #F46A1F;). When styling the 'link' and 'hover' properties for the links, it's best to nest
the rules in the stylesheet. See the screenshot below:
A good note: if you can't get the tab color to change, go into inspect and see if bootstrap is
overriding the css. If so, copy the selector that bootstap is using and just use that to override it.
There are snippets for each part of creating the nav menu with the Bootstrap template. Here's what they do:
There is html that must be added to the top of each page that you want the menu to appear on. menu.html for this lab is a good place to look for a solid example of everything above.>
Below is the general idea of how to style the nav menu. The best course of action is to use inspect as your friend if you can't figure out what is controlling what!
To use Google's fonts instead of manually uploading your own, all you have to do is add a stylesheet hosted by Google to the page.
The input element is needed to create controls in a form. The way input works depends on what is specified for the type attribute. Some examples are as follows:
This element represents a control that provides a menu of options. In the image below, you can see how different options can be chosen and separated from each other in a drop down menu.
