Before we begin, make sure to fork and clone this repository as we did yesterday:
- Click the Fork button at the top right of the screen to make your own copy of the repository
- Clone it as we did before:
cd ~/Desktop
git clone https://github.com/meet-projects/y2s18-css.git
cd y2s18-css
-
Open hello.html and create a page with a header, two paragraphs, and at least one link.
-
Open style.css and create a style file such that the background color is blue and all text is white.
-
In your HTML file, add this somewhere inside the
<head>:
<link rel="stylesheet" type="text/css" href="style.css">
- Use coolors.co to pick a better colorscheme for this website. Change the colors based on your new scheme, but do not use the style attribute!
-
Learn more about color: Read https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/
-
Pick three of your favorite apps or websites, and explain which palette style they use.
-
Make another CSS file called style_alternate.css. Try your website with another colorscheme.
-
Use a CSS tag selector to change the color of all links.
-
Add a list of six favorite foods to your website. Use
<p>tags to accomplish this. -
Use CSS class selectors to make vegetarian foods one color and non-vegetarian foods a different color.
-
Use a CSS id selector to give one element on your page a different background color.
-
Using Google and/or w3schools, find out what the following properties do. To get checked off, show each of them off on your website and explain them to your TA.
- font-family
- font-size
- Pick one element in your page and give it a class and an ID. Then, add three CSS rules to style that element: one with a tag selector, one with a class selector, and one with an ID selector. Which one gets used? What happens if you have only two rules?
- Find or add two
<p>and two<a>elements on your webpage and give all four of them the same class “muggle”. What happens if you use the selector “p.muggle” instyle.cssinstead of ".muggle"? How about “a.muggle”? Explain these selectors to your TA to get checked off. - Add a form to your website. You should have at least three checkboxes and one radio button. Add a CSS rule that makes selected checkboxes turn the area around them blue (you may have to add an extra
<div>around it)
- Organize your page:
- In
hello.html, make the header a div and give it a class name of "title". - Put the rest of your content (paragraphs and links) in a
<div>with a class of "content". - Make another
<div>between the title and content with a class of "sidebar". Put some text or links in it! - Lastly, put the "content" and "sidebar" classes in another
<div>with a class of "container".
If you're confused, look at the lecture slide with the title "Lab 3: Hints".
-
Open
style.css. Give the sidebar a light background color of your choosing. -
Make the title banner have a height of 60px, and a width of 100%.
-
Give the
containerclass theposition: relativeproperty. -
Give the sidebar and main content classes
position: absolute;andtop: 0px;Have the sidebar be positioned on the left margin of the page, and the main content be positioned 200px from the left. -
Make it so the sidebar is exactly wide enough to touch the main content, using the
widthproperty. -
Give the container a height of 100%.
- This is because the container has only absolutely positioned <div>s inside it, which means it has zero size by default.
-
Now, give the sidebar a height of 100%, to have it go all the way down the page.
-
Lastly, use the inspector on your browser (right-click on the page, then click "Inspect Element") to remove the
position: relative;property from thecontainerclass. Notice how the position of the sidebar and main content changes, and show this demo to the TA to get checked off.
- Make the sidebar have a gradient background
- Give the title <div> a box shadow
-
Open
hello.htmlin your browser, and open the inspector. -
Notice the gap between your sidebar and the edge of the page. Using the inspector, click the
<body>tag and look at the margin it has by default (the gray area that saysuser agent stylesheetat its top right). -
In
style.css, set the margin ofbodyto 0px to get rid of this. -
Give the sidebar padding of 10 pixels on all sides.
-
Reload the page on your browser. See how the sidebar is now leaking into the main content! Fix this by giving all the elements on the page the
box-sizing: border-box;property, also known as the "box model fix". (For a hint, go to the lecture slides.) -
Give the title a solid gray border on the bottom of 1 pixel.
-
Give the main content a border of 2 pixels on all sides (any color and style), and a margin of 5 pixels. Also, give it padding on the left and right of 15 pixels, and on the bottom of 10 pixels (try using the shortcuts we learned in lecture!).
-
As before,
git add,git commit -m "message", andgit pushyour code, so you have it for later.
- What happens if you use a negative value for margins or padding? Test it out on the padding of the main content, and on the body.
- Look up the
calc()function and how it works, and explain it to a TA. - Get rid of the scrollbar (that is, fit the page on the screen instead of having extra room at the bottom), possibly using the
calc()function.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent