Your Step 6 page should have different sections to it. The first should be an example of "Water" layout (to demonstrate fill with untagged news article. Be sure to include copyright credits to author/company).
The second sample is "Float" (include three sub-sections to Float, that shows ONE block — include float left, float right, and float none.)
BONUS: show a Grid sample under your Float samples. This should have at least three columns.
Move your new files to the server. Again, if you are having problems, please reach out to ITS by making a new ticket.
To add Rounded Corners to an element, Add this text to the specific div you want to have rounded corners…
When you list each of the four numbers separately, you are clarifying each corner, one at a time. Using the approach you do not have to make all of the corners the same.
The corners are listed in this order:
Top left
Top right
Bottom right
Bottom left
Tags normally used for structure
<header>
<nav>
<main>
<article>
<section>
<footer>
<aside>
However, any name can be used for a class or ID <div> (division) tag. When using divs do make sure you add HTML comments at the end div. Otherwise it is very easy to forget which end div goes to what element. </div>
Common CSS attributes / properties…
float:
Almost every structural element on your web page will have a float attribute. If you forget to add this, the element will probably not end up on the screen where you intend it to be. I again strongly suggest you always use float: left. When you do so, all elements respond to one another and it's easier to make corrections.
width:
Use percentages (%) for widths. Always think about 100% being the magic number. If a space is shared by several elements inside a main element, figure out how to make the grand total of the elements equal 100%. Do remember that padding and margins contribute to the overall width. Some experimenting and math is required.
height:
Normally "auto" is the best setting here (meaning you don't have to use this property at all!) If you don't include it (thus, setting it to default height: auto) then the element will expand or contract with the content inside the element. More text/pictures equals a bigger box, less content equals a smaller box.
On the rare occasion when you want to set a strict height, do so in pixels (ex. height: 100px). This elements height will probably have to be adjusted in media screens to work properly on different devices.
background:
You can set an image or a color as background.
You can do this more specifically with…
background-color: aliceblue; (or any other color).
or
background-image: url("../images/Review.jpg"); (of course you can set the background image to be any form of properly formatted pixel image)
padding:
(Remember: Padding pushes in)
margin:
(Remember: Margin marches out)
boarder: (this applies to all four sides)
border-top: 5px solid red;
border-left: 24px solid blue;
border-right: 10px solid blue;
border-bottom: 10px solid blue;
max-width:
There are times this is very useful. For example you don't want your elements holding text to become so wide that you have a line-length error (remember the 72 character rule?). Although it is more difficult to control we can still experiment, setting our max-width and confirming in a browser that the lines aren't too long.
Another possible problem is that others are viewing your website with the text displayed larger or smaller than you are setting it to. So again, we can't control all the variables, but we can make some general perammiters.
max-height:
display:
pseudo-classes:
Uncommon CSS
flex:
Can be used to make columns of equal height, but often interferes with other standard CSS attributes.
Rounded Corners: (not approved by World Wide Web Consortium yet, but approved by browsers. So we have to use different code for the browsers)
Rounded Corners - Approach 1: All corners the same
border-radius: 10px; /* future proofing */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Rounded Corners - Approach 2: Corners different
border-radius: 10px 20px 30px 0; /* future proofing */
-moz-border-radius: 10px 20px 30px 0;
-webkit-border-radius: 10px 20px 30px 0;
