- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Column Markup: The column-width Property</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<p>Muffin woke on up in his cat bed very early that morning. The day promised to be eventful. Due to this, he decided to work out on his chin-up bar. The cat eventually tired himself out exercising, and he decided to relax a bit and watch TV. Having regained his strength, the cat went about his usual business of making a mess. However, he was caught in the act.</p>
<p>After lunch, which, as usual, consisted of dry food and a piece of chicken that he had hidden away the day before, Muffin got down to working on his Cat Energy website. He had to figure out how to make it adaptable and to solve a strange bug in Chrome, which only manifested itself at a certain screen width. His paws were itching to simply delete the piece of code with the bug, but in the end he was able to fix the problem.</p>
<p>In the late afternoon, there was a great opportunity to snack on some sour cream, but this time the cat was caught at the crime scene. Having decided that he had accomplished enough for today, Muffin curled up in bed with a clear conscience.</p>
</article>
</body>
</html>
CSS
body {
padding: 10px;
background: url("bokeh.jpg") no-repeat 50% 0;
color: #333333;
font-size: 14px;
font-family: "Arial", sans-serif;
}
article {
padding: 20px;
background-color: rgba(240, 240, 240, 0.85);
}
p {
margin: 0;
text-align: justify;
text-indent: 22px;
line-height: 22px;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Set the following for the article block:
- make the column width for the multi-column text equal to
200px, - and then set it to
150px.
Comments