The shorthand border property applies a four-sided border to a selected element.Preferences can be added to the border property to alter its style, such as its width in pixels, color, and style (solid, dashed, etc). Single-sided borders can be added individually by specifying whether the user wants it on top of the element or below it. Examples of border properties are border-top-width: 3px, or border-bottom: dashed deep pink. Any combination of these styles can be added to a given selector and can either be attached to the border property by a dash or specified after the colon by spaces.
The shorthand padding property applies padding to all four sides of an element in absolute lengths (cm, mm, px), or lengths in units relative to another length property (em, ex, %). The property can be added to a specific side or sides with a series of numbers following the property. Some examples of how to use this property are as follows:
A simpler way might be to make individual properties for the sides
The font-family property specifies the font-family name, such as Times New Roman or Arial, and/or the generic family name, such as sans-serif or cursive. One or more font families can be listed and separated by commas with the font-family property, font-family: "Times New Roman", "Times", serif;, for example.
The font-size property specifies the size of the text selected as it is displayed on a site in either absolute units-px, ex, smaller, larger- or relative units-small, medium, large.
Classes used in HTML:
CSS properties associated with each class that Bootstrap uses
col-md-3 separates the 12 grid sections into four side-by-side divisions, each column taking up 3/12 of the browser space. col-sm-6 separates each row so that the each element takes up half the space in its row, creating two columns of two elements each. col-xs-12 allows each element to take up the entire space in its row, creating a single column of each element. (x/12=# of elements you want per row, with x being col-size-X.)
Use a CSS selector to select the text adjacent to which you want to add the background image. Add the property background-image with the value url(""). Use the background-repeat property to determine how many times the background image is to be repeated within the div element. Use the padding property, which applies to the text, not the background image.
Snippets are pieces of reusable code that are useful for saving time and increasing functionality when writing code in HTML. Any series of elements can be made into a snippet to add a basic or frequently used format without needing to type the desired code several times or across several HTML documents.
To create a new snippet, copy the elements you want to be contained within the snippet to your clipboard (Command+C), create a file within the Snippets extension by selecting 'New Snippet from clipboard', name the snippet, and press enter. In your HTML, press the Snippets trigger key from your keyboard and select the name of the snippet you just created; you can also go to the Snippets extension and click the file when you have placed your cursor in your HTML in the location where you want the snippet to be inserted.
<section>
<h1>
<strong>Lab </strong>
</h1>
</section>
<article>
<h1></h1>
</article>
SCSS improves efficiency and functionality of a document by using variables and nesting. Variables eliminate duplication to write more descriptive code, such as defining the variable $gray to be applied to any color property whose value is #999, so the actual color can be better identified from looking at the SCSS. Applying rules to nested elements improves efficiency, so rather than defining properties for an element whose class selector is .header and another whose selector is .header h1, .header h1 can be nested within .header so both h1 and .header inherit the same property, while the nested h1 can have its unique property defined.
In CSS:
#OrderInfo td:nth-child(odd),
#Addresses td:nth-child(odd) {
text-align: right;
padding-right: 10px;
}
#OrderInfo td:nth-child(odd)::after,
#Addresses td:nth-child(odd)::after {
content: ':'
}
#OrderInfo td:nth-child(even),
#Addresses td:nth-child(even) {
border: 1px solid #000;
padding-left: 10px;
text-align: left;
}
In SCSS:
#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;
}
}