Hi, Chrismills, could you give me any feedback on my fundamental CSS comprehension assessment? Here is CSS code
/* General page styles */
body {
margin: 0;
}
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
/* card container */
/*0010*/
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
/* header and footer */
/*0011*/
.card footer {
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
}
/*0011*/
.card header {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
}
/* main business card contents */
/*0012*/
.card article img {
max-height: 100%;
float: right;
}
/* new rules */
.card header, .card footer {
height: 3em;
padding: 1em;
}
h2, p {
margin: 0;
}
article {
height: 12em;
background-color: rgba(0,0,0,0.25);
}
h2 {
font-size: 2em;
line-height: 1.5;
}
footer p {
font-size: 1.5em;
line-height: 2;
}
article p {
padding-top: 1.8em;
padding-left: 1em;
color: white;
}
And I also have some questions. I don’t know how to use column combinator even if I had read the “Combinators and group selector”. And I also don’t know the difference between [attr|=val] and [attr^=attr], it seems that they both select all elements with the attribute attr
for which the value starts with val
. Could you help me solve this two questions?