uoft-csc309-tutorials/Week2-CSS/style.css at master · etesami/uoft-csc309-tutorials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/* TODO: Use padding property to set the padding area on all four sides of the page.
  Try using percentages to have a responsive design when the screen size changes.  */

body {
  padding: ;
}

/* TODO: Please take a look at this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
  Then try to find appropriate values for the following properties. Make sure you try other values
  as explained on the README page of this week. */
.container-flex {
  display: ;
  margin: ;
  gap: ;
  flex-flow: ;
  align-items: ;
  justify-content: ;
}

/* TODO: Please take a look at this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
  Then try to find appropriate values for the following properties. Make sure you try other values
  as explained on the README page of this week. */
.container-flex .flex-item {
  border: ;
  flex-basis: ;
}

/* TODO: Have you noticed that the text is too close to the right of each flex-item box?
  Find a property that can make some spaces there. */
.item-description ul li {

}


/* Table related css rules. Look at the screenshots and try to build the same style. */
.item-tables {
  border: ;
}

.item-tables tr th {
  border-bottom: ;
}

.item-tables tr td {
  border: ;
}

/* TODO:  Look at the table's cells carefully, especially the spaces around the texts within each cell. Write appropriate rules that provide some spaces around the text of each cell. */
.item-tables p {

}