CINF201-Week 8 Solved

CSS Part III

 

Agenda 
Overview o Previous Participation Questions/Responses
o Midterm o What’s Due?

More Positioning with CSS (Lecture/Class Activity) o Box Model Review o Positioning with CSSFloat
Flexbox
CSS Positioning Exercise 2 (CW/HW)
Participation Proof
Next Week
 

More Positioning with CSS (Lecture/Class Activity)
Box Model Review
The Box Model in CSS consists of three properties which are padding, border, and margin. The padding and margin properties are the most important of the three since they control the space of the elements on your page. Borders can improve aesthetics but most items on a page don’t have one. However, they might have some sort of default margin or padding added to them.

Everything in HTML is a box and so you must learn to think about your content in terms of boxes/containers which hold other boxes.

The padding property handles the space between the content and the border around that content.

The border property handles borders which wraps around the padding and content.

The margin property handles space outside of the border and wraps up the border, padding, and content.

 

In the image above, I have used Google Chrome’s “Inspect Element” feature (F12 or right-click and select it) to view the HTML/CSS in a page. On the left side of the inspector, the HTML structure is viewable. On the right side, there is a multi-colored box which depicts the CSS box model in action.

The orange area represents the margin (16px default for paragraphs in Chrome). The border is depicted by the yellow area. Lastly, the green area is the padding which separates the content from the border.

 

Positioning with CSS
Last week, we covered how to position our elements on the page using CSS. We will review the concepts again and then you will complete a second positioning exercise.

Float Property

This property takes content and aligns it to either the left or right side of a container. The content is removed from the normal document flow, but text content and inline elements will wrap around it. Block level elements will appear on the next available line.

It was intended originally for having text wrap around images but has been used to manipulate the positioning of elements on a page. The problem is that if the total width of items being floated is under 100%, other items below your floated ones may move up in that space and wrap around your content.

To prevent unwanted wrapping of content, you would have to clear your floats. This means you use the clear property on the element which wraps your floated elements. Unwanted wrapping would look something like the screenshot below.

 

In the image above, I have 2 divs with 40% width each floated to the left. Currently, they don’t have the clearfix code implemented and 0 margin to space them out. Since there is 20% of the width still available, content below these divs will try to fill that space. If you use the clearfix method appropriately, the content can have whatever widths you’d like, and content won’t move to its side as shown in the next image.

 

There are many methods to clear floats but the best one I have found is here:  https://css-tricks.com/snippets/css/clear-fix/

To use the clear fix in the link above, you need to wrap all floated elements in a parent container (div usually). Then you target that parent container’s before/after pseudo property and apply the styles as depicted. The before/after pseudo selectors allow us to add extra content to our HTML without using anything extra in the HTML markup. However, in our case, we don’t display any content (that’s why it has empty quotation marks). We display it like a table and clear both sides of it.

 

Flexbox

Flexbox is an awesome property which allows you to create layouts without using floats or positioning. Like floats, it requires the usage of a parent container which has other items/containers inside of it. Unlike floats, you don’t need to worry about clearing anything and it’s easier to implement. If we used the same HTML code as we did previously to create a 3column layout, the CSS would look like this instead:

 

 

 

Rather than using the row class for clearing, just simply give it a display of flex and a width of 100%. From there, we apply all the same styles to the children containers (one-third-column) with the exception of floating it. The final result would look pretty much the same, but with less effort as far as clearing floats and choosing float directions:

 

 

 

As a quick recap, for flexbox, you need a flex container and flex items. The flex container is just the parent container which wraps the elements you want to move around on the page. The flex items are the elements inside of the container which will be displayed horizontally or some other way.

 

For comparison purposes, I’ve provided a screenshot of the CSS we would use for the same layout, but by using float instead of flexbox. The underlying HTML is still the same.

 

Flexbox                                                                Float

 

 

The reason you would use float over flexbox is because float is more universally implemented by browsers. Some older browsers don’t support the flexbox property, and then your styles wouldn’t work as expected. It’s important to understand your audience and the types of devices/browsers they are using. For the purposes of this class, flexbox and floats are acceptable for assignments and the final project.

 

There are many other properties for the flex containers/items, so make sure to review them to fully understand the possibilities with flexbox. My example above is useful for creating quick multi-column layouts.

 

Online Resources (Not required, but can be helpful for guidance)

https://css-tricks.com/almanac/properties/p/position/ (Position)
https://developer.mozilla.org/en-US/docs/Web/CSS/float (Float)
https://css-tricks.com/all-about-floats/ (Float)
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox (Flexbox)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Flexbox)
https://css-tricks.com/snippets/css/complete-guide-grid/ (Grid)
https://www.w3schools.com/css/css_grid.asp (Grid)
 

CSS Positioning Exercise 2 (CW/HW)
Download the “CSS-Positioning-Exercise-2.zip” folder from Blackboard under today’s Lecture Notes or the Assignment folder. Extract everything from inside of this zip folder to some place where you will be able to find them easily. This week, there will be an HTML file and an image with an example of a finished assignment. The HTML file contains <style></style> tags for you to use so you don’t have to place your CSS externally.

 

Based on the image provided, add CSS to the style tags so that the web page looks as close as possible to mine. You can change where it says “Your Name Here” to whatever name you want. In the image provided, it says “Chris Velez” in the header and “Christopher Velez” in the footer, but you can alter that to show your name.

 

It is also okay to change colors if the text contrast is high enough for the text to be readable.

However, the items should be styled similarly in terms of their placement, individual styles (borders, padding, margins, underlines, etc.)

 

General Tips

If you use floats, float everything in one direction (I personally always use left)
To center an image, use “display: block;” and “margin: 0 auto;” (images are always inline so when we display them with block, we can add width/height, margins, etc.)
Padding/Margin will help with spacing (sometimes needs to be set to 0) o Use px or em (em is a relative unit and generally, 1em = one times whatever the default body font size is – sometimes 16px – 2em would then equal 32px)
o Margin: 0 auto also centers divs and other containers that have widths

Styles Used

I’m not going to list out the styles like I did last week because most of them are the same. However, I will provide some information to get you started on the page. You’ll need to add padding besides what I’ve mentioned below to end up with a similar page.

 

Floated Items/Flexbox Children (give parent containers display: flex)

.header h2
.row .two
.row .three
 

Widths/Margins

Container: 800px maximum width, 100% width
.row .two: 50% width
.row .three 33% width
.three p: 150px width, 10px auto margin
.blog .two: 45% width, 2.5% margin
 

For this week’s assignment only, you can use an internal style sheet. You may use an external CSS file if you’d like as well. No inline CSS should be used.