Session 3: CSS (Cascading Style Sheets)
1. Clone the following repository: Repo.
2. Create a directory for the CSS styles res/css/.
3. Create a CSS file, name it: style.css, and place it in the res/css/ directory.
4. Link the style.css file to your index.html by adding the following tag to the head of the index.html document:
<head>
...
<link rel="stylesheet" href="res/css/style.css">
...
</head>
5. Change the font and box-sizing styles in the overall HTML document by adding the following CSS styles to the style.css file.
* {
font-family: sans-serif;
box-sizing: border-box;
/*
CSS comment
The box-sizing CSS property sets how the total width and height of an element are calculated.
If you set box-sizing: border-box; on an element, padding, and border are included in the width and height:
*/
}
6. Add the following CSS styles to the style.css file.
...
body {
line-height: 1.6;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
/*
list-style: none = No marker is shown
*/
}
a {
color: #34495e;
text-decoration: none;
/*
text-decoration: none - is used here to not show underlining under an anchor element when a mouse hovers over it.
Comment it out and check the result on the page.
*/
}
.logo {
margin: 0;
font-size: 1.1em;
}
section {
padding: 10px 15px;
margin: 10px;
display: block;
/*
display: block - displays an element as a block element. It starts on a new line, and takes up the whole width
*/
}
7. Add the following CSS styles concerning the header class (.header) to the style.css file.
.header {
padding-top: .5em;
padding-bottom: .5em;
border: 1px solid #646174;
background-color: #a2ccea;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
/*
-webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
-webkit-box-shadow and -moz-box-shadow were browser-specific box-shadow implementations for
WebKit browsers like Google Chrome and Safari, and mozilla firefox. Such prefixes are, usually
used, when a new CSS feature appears and disappears when the feature is fully supported by
the browser.
In short, concerning Vendor Prefixes (-webkit, -moz, etc.):
1- A new CSS feature appears;
2- Browsers test the feature;
3- Browsers add a prefix to it to allow using it;
4- There is no need for the prefix anymore when the feature is fully supported.
*/
border-radius: 5px;
}
8. Check the page in the browser, what is wrong?
9. Add the following CSS styles concerning the nav and logo classes (.nav and .logo) to the style.css file.
.nav {
margin-top: 5px;
}
.nav a {
padding: 10px 15px;
text-transform: uppercase;
text-align: center;
display: block;
color: #34495e;
font-size: .99em;
}
/* Pseudo-class selector */
.nav a:hover {
background-color: #7ebeb6;
color: #092747;
}
10. Check the page in the browser, does it look better?
Flexbox
11. Add the following @rules to the style.css file.
/*
Applies when the browser's width is 800px wide or wider:
*/
@media (min-width: 800px) {
.header,
.nav {
display: flex;
}
.header {
flex-direction: column;
align-items: center;
}
}
/*
Applies when the browser's width is 1000px wide or wider:
*/
@media (min-width: 1000px) {
.header {
flex-direction: row;
justify-content: space-between;
}
}
12. Check the page in the browser, does it look better?
13. Open the chrome/firefox developer tools, and go to the elements tab, how many elements have (flex) next to their names?
14. Resize your browser (make it smaller), and make it less than 800px. The logo does not look nice when the browser's width is less than 800px. How can we remove the logo, when the browser's width is less than 800px?
/* Try to solve it, the answer will be shared with you after a while */
Grid
15. Add the following styles to the style.css file to change the last division in the HTML document into the grid.
.grid {
margin: 20px auto;
width: 100%;
border: 1px solid #746161;
background-color: #ddd;
display: grid;
grid-template-columns: auto auto;
/*
grid-template-columns - the grid-template-columns CSS property defines the numbers and
sizing functions of the grid columns.
*/
gap: 10px 10px;
/*
gap: row-gap and column-gap.
*/
}
.grid p {
background-color: rgb(177, 164, 164);
color: white;
padding: 20px;
font-weight: bold;
text-align: center;
}
16. Open the chrome/firefox developer tools, and go to the elements tab, how many elements have (grid) next to their names?
17. Resize your browser (make it smaller), and make it less than 500px. The two-column grid does not look nice. How can we make it a one-column grid, when the browser's width is less than 500px?
/* Try to solve it, the answer will be shared with you after a while */
18. Using the chrome/firefox developer tools, toggle the device type and check how the page will look on a cellphone screen.
19. Do the required modification; to make the grid contains a single column on a cellphone screen.
Tasks
1. Change the navigation bar to follow the scroll bar, i.e., the navigation bar will always be in its place even if I scroll done. Note that the navigation bar is within the header element, thus, the new styles should apply to the header class (.header).
2. Write the required styles so that when a user hovers over any paragraph (<p> element), the text of the paragraph will show a shadow.
3. Using the Descendant combinatory, try to change the color of the student's grade (shown on the page as 2.65).
4. Using the child combinatory, try to change the background color of table head cells (<th>).
5. Add the required rule to change the background color of table data cells.
6. Why the first cells of the table did not change their background colors? Add the required style to change their background color to match the other cells of the table.
7. Using the first-letter Pseudo-element selector, change the font size of the first letter to xx-large of any paragraph <p> in the HTML document.
Do it yourself:
1. Style the footer (e.g., change text color, align text to center...).
2. Use either Flexbox or grid to organize the footer content and make it adapt for cellphones.
Positioning
1. Use the same project, or create a new one that includes an HTML document, a style.css, and link the style.css to your HTML document.
1. Add the following HTML snippet to the body of the HTML document
...
<body>
...
<p class="static">This is a static paragraph</p>
<p class="relative">This is a relative paragraph</p>
<div class ="parentpositioning">
<p class ="absolute">This is an absolute paragraph</p>
</div>
<p class ="fixed">This is a fixed paragraph</p>
<p class ="sticky">This is a sticky paragraph</p>
...
</body>
...
Add the following styles to the style.css document:
...
.static {
position: static;
background-color: #ad2121;
border: 3px solid #ad2121;
}
.relative {
position: relative;
left: 10px;
top: 10px;
background-color: #5721ad;
border: 3px solid #5721ad;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
background-color: #ad2188;
border: 3px solid #ad2188;
}
.parentpositioning {
background-color: #6921ad;
width: 550;
height: 400;
position: relative;
}
.absolute {
position: absolute;
top: 40px;
width: 500px;
background-color: #ada121;
border: 3px solid #ada121;
}
.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
3. Check how each of these different types of positioning works, all will work exactly as described in the lecture.
4. Check what will happen for the paragraph that is position: absolute if you changed the positioning types of the parent <div> to static. The paragraph will position itself to the window not to the parent element anymore.