Lab 4
CSS Border Property
Border is shorthand for border-color, border-width, and border-style. It helps to shorten the code and specify all three properties at once.
You can set individual borders and make them different by using border-right, border-left, border-top, and border-bottom.
CSS Padding Property
Padding is used to add space between a border and an element. There are different properties to specify, for example, the properties are padding-top, padding-bottom, padding-right, and padding-left. To contrast two similar elements, a margin is the outside space around a border whereas padding is the inside space between the border and the element's content.
CSS font-family Property
The font-family property is a list of different fonts that it can display the website in. Typically, it will go from the beginning of the list until the end. If the first one is spelled wrong or does not exist, it will move on to the next available font. This can include font family names as well as generic fonts. Some of these generic fonts are serif, sans-serif, and monospace. These generic fonts are the last resort for when none of the other fonts are available. It is usually the last item in the list of fonts.
CSS font-size Property
The font size can be stated in an absolute number, like an amount of pixels, or as a percentage or length.
- xx-small to xx-large and everything in between
- larger
- smaller
- length
- percentage
- math
- px: the unit to represent pixels
- ems: Em is used as a multiplier for the font-size property on the element.
em = desired element pixel value / parent element font-size in pixels
- rems: values were inverted to combat compounding.
- ex: is computed or dynamic, behaves in the same way as ex but when font-size property is set to ex units, font-size is equal to the x height of the first available font used on the page.
Lab 5
How to center an image
CSS properties bootstrap uses to accomplish this task are the classes d-block, mx-auto, and img-fluid to the image tag
Designing for different screen sizes
For the small size, I used class="col-sm-6". This means that it takes up six columns out of twelve.
For the medium size, I used class="col-md-3" taking up three columns.
Here are the screenshots at each screen size:
How to add a background image to an element
I added CSS rules including backgound-image, padding, and background-repeat. I selected the h2 elements that are a child of div elements with their specific classes.
- background-image: url(url);
- padding
- background-repeat: to repeat or no-repeat of the background image
Hiding Content w/ CSS
After selecting, use the property display with the value of flex. It depends on the size of the screen if it is visible or not.
Creating the prospective student handout / CSS
To create this document, I started with just the text on the document. I added paragraphs, headings, sections, etc. where they were needed and used CSS to style it.
Lab 6
Creating and using snippets
Snippets are helpful because you can create them to make commonly used html shortcuts. It helps save time on writing html. All you have to do is type the tag and then enter and the whole snippet appears.
The $[#] is a placeholder for a user to put their own input in. I am creating two new snippets. To do this, copy the html you want to make into a snippet, navigate to the snippets icon, then right click and then select the option that says new snippet from clipboard. The snippets are creating are:
<section>
< h1 >${lab #}$< /h1 >
</section >
<article>
< h1 >${heading}$< /h1 >
</article >
SCSS
In SCSS, you can use variables to make rules. This helps when you are selecting the same thing over again.
Original 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;
}
#OrderDetailsTable .subtotals td,
#OrderDetailsTable .shipping td,
#OrderDetailsTable .total td {
border-left: none;
}
#OrderDetailsTable td,
#OrderDetailsTable th {
border-left: 1px solid black;
}
#OrderDetailsTable tr *:not([class='numeric']){
padding-left: 10px;
}
#OrderDetailsTable th {
font-weight: bold;
color: #FFF;
background-color: #036;
text-align: left;
font-size: 16px;
}
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;
}
}
#OrderDetailsTable {
td{
border-left: 1px solid black;
.subtotals, .shipping, .total
{
border-left: none;
}
}
th {
border-left: 1px solid black;
font-weight: bold;
color: #FFF;
background-color: $hopeBlue;
text-align: left;
font-size: 16px;
}
tr *:not([class='numeric']) {
padding-left: 10px;
}
}
Lab 7
Styling Tabs
I used the selector .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover to make the background a different color when hovered over. For a Hope theme, I wrote rules to change the color and background color of the tabs.
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active
{
color: #036;
background-color: #F46A1F;
border-color: #dee2e6 #dee2e6 #fff;
}Styling Accordions
we added a script for accordions. we also added an attribute to the button to label it. I added these rules to make it a hope theme:
.card-body
{
background-color: #036;
color: #f46a1f;
} button:hover{
background-color: #f46a1f;
}