Hi all, I think I just completed my CSS assessment. Feedbacks are welcome! One thing I might have trouble with is with adding the external link icon. I found out there may be three possible ways to do. 1, by inserting via content
property and use the pseudo selector ::after
. 2, by using background: url(...)
and giving padding space for that. I can’t recall the third one correctly but maybe it had to do with list styling (nonetheless it wasn’t recommended to remember).
/* ===== Fonts Styles =====*/
/* For heading font-styles */
@font-face {
font-family: ‘chunkfive_exregular’;
src: url(‘fonts/chunkfive_ex.woff2’) format(‘woff2’),
url(‘fonts/chunkfive_ex.woff’) format(‘woff’),
url(‘fonts/chunkfive_ex.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
/* For body font-styles */
@font-face {
font-family: ‘agathoregular’;
src: url(‘agatho_regular.woff2’) format(‘woff2’),
url(‘agatho_regular.woff’) format(‘woff’),
url(‘agatho_regular.oft’) format(‘opentype’);
font-weight: normal;
font-style: normal;
}
html {
font-size: 62.5%; /* = 10px*/
}
body {
line-height: 1.5rem;
letter-spacing: 0.1rem;
word-spacing: 0.3rem;
}
header {
text-align: center;
}
h1 {
font-family: ‘chunkfive_exregular’, ‘Times New Roman’, serif;
font-size: 2rem;
letter-spacing: 0.8rem;
}
h2 {
font-family: ‘chunkfive_exregular’, ‘Times New Roman’, serif;
font-size: 1.8rem;
letter-spacing: 0.2rem;
}
p {
font-family: ‘agathoregular’, sans-serif, monospace;
}
h2 + p {
text-indent: 2rem;
}
/* ===== Links Styles ===== */
a {
text-decoration: none;
outline: none;
}
aside a:link,
section a:link,
section a:link {
color: green;
border-bottom: solid 1px green;
}
aside a:visited,
section a:visited,
section a:visited {
color: darkred;
border-bottom: solid 1px darkred;
}
aside a:focus,
section a:focus,
section a:focus {
outline: blue solid 1px;
border-bottom: none;
}
aside a:hover,
section a:hover,
section a:hover {
color: orange;
border-bottom: none;
}
aside a:active,
section a:active,
section a:active {
color: orange;
border-bottom-color: solid 1px orange;
}
a[href^=“https://”] {
/* content: url(‘external-link.png’); */
background: url(‘external-link.png’) 100% 0 no-repeat;
padding-right: 18px;
background-size: 10px;
}
/* ===== List Styles ===== */
ul li {
line-height: 2rem;
}
aside ul li {
list-style-type: square;
}
/* nav styles */
nav ul li a {
font-size: 1.5rem;
letter-spacing: 0.1rem;
color: darkred;
border: 1px solid darkred;
border-left: 3px solid darkred;
display: block;
margin: 2rem auto;
padding: 2rem 3rem;
}
nav ul li a:active {
color: orange;
border-color: orange;
border-left: 3px solid orange;
}
nav ul li {
text-align: center;
list-style: none;
}