This div will be centered on the screen - True or False?
div {
margin: 0 auto;
}
FALSE!div {
margin: 0 auto;
width: 200px;
}
You must set a width for the auto margin trick to work!
What does this even mean?
div {
padding: 0 12px 5px 8px;
}
This div will have 0px of padding on the top, 12px of padding on the right, 5px of padding on the bottom, and 8px of padding on the left.
With CSS how would you change the color of a link inside an unordered list inside an element with a class of "fidget-spinner" on it?
.fidget-spinner ul a { color: blurple; }
Or how to use CSS positioning
In normal flow, inline boxes flow from left to right, wrapping to next line when needed.
<img src="img/cookie1.png"/>
<img src="img/cookie2.png"/>
<img src="img/cookie3.png"/>
...
<img src="img/cookie2.png"/>
<img src="img/cookie3.png"/>
In normal flow, block boxes flow from top to bottom, making a new line after every box.
<p>Greetings</p>
<p>Hello</p>
<p>Hi there!</p>
Greetings
Hello
Hi there!
The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.
.relative{
position: relative;
left: 80px;
top: 20px;
height: 100px;
background-color: yellow;
}
The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).
.top{
position: absolute;
top: -40px;
right: 10px;
background-color: yellow
}
.bottom{
position: absolute;
bottom: -40px;
left:60px;
background-color: green
}
Here's an example of an image with a caption absolutely positioned over top of it.
The containing div has a position of relative, and the caption has a position of absolute.
Sometimes elements overlap. You can change the order of overlapping with z-index. The element with highest z-index goes on top.
.bottom{
position: absolute;
bottom: 10px;
left:60px;
background-color: yellow;
}
.top{
position: absolute;
bottom: 15px;
left:60px;
background-color: green;
z-index: 2;
}
Let's add some positioning.
Let's create a div that contains an image and a caption, and position the caption absolutely overtop the image.
no...not that kind. just...no.
To create 2 columns, each with 50% width, we only need 1 css class:
.column {
width: 50%;
float: left;
}
Now that we have this .column class we can wrap a div with that class around our content.
<div class="column">
<p>This is the left column</p>
</div>
<div class="column">
<p>This is the right column</p>
</div>
Try creating 2 columns in your site using floats.
Go to http://www.bizstreamacademy.com/resources and go to the Class Resources section.
In your main index.html file add the following HTML inside or below your header HTML:
<nav id="menu">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
The above code is the basic structure for most website menus. It utilizes the unordered list HTML and wraps it in a nav HTML5 tag.
#menu {float: right;}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {float: left;}
#menu ul li a {
display: block;
font-size: 20px;
padding-left: 35px;
line-height: 65px;
}
Our above CSS does 2 main things. First, it takes away the 'list' formatting that comes with an unordered list HTML element. Then it takes the li's and 'floats' them to the left (so they're all next to each other).
Take the next 5 minutes to work on your about or contact page. Or ask us any questions about how to edit the menu!
You looked at your site on a cell phone and realize it looks terrible and now you need to fix it
A media query is a way of specifying certain CSS at different screen widths.
@media only screen and (max-width: 750px) {
body {
background-color: blue;
}
}
The above code states "If the browser/device window is smaller than 750px, then the background color will change to blue."
In your HTML head, preferably at the top, but it can go anywhere in your head section.
We need this meta tag to optimize your website for mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">
Many mobile devices pretend they have more pixels than they actually do to acheive those super high resolution. This forces the site to display at the same width of the actual device.
In other words it makes it not look tiny and crappy.
At the bottom of your CSS file, add the following code:
@media only screen and (max-width: 750px) {
body {
background-color: blue;
}
}
Resize your browser to see how your background color changes on a small screen.
Inside your media query, remove the body styling add the following CSS:
#menu ul li {
float: none;
}
#menu ul li a {
padding: 0;
line-height: 30px;
text-align: right;
}
We're adding this CSS because we want the menu items to appear 'stacked' in our mobile view and not all right next to each other.