<meta charset="UTF-8">
<title>Class selectors</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
aside, article, section, header, footer, nav {
	display: block;
aside {
	width: 300px;
	border: 1px solid #000;
	padding: 20px;
	margin-bottom: 20px;
body {
	font-family: Arial;
	font-size: 90%;
h1 {
	font-family: Georgia;
	font-size: 1.8em;
	font-weight: normal;
h2 {
	font-family: Georgia;
	font-size: 1.4em;
	font-weight: normal;
p {
	font-size: 1em;
/*add styles here*/
.aside1 {
	border: 1px solid green;
.aside2 {
	border: 1px solid red;
.blueHeading {
	color: blue;
.greenHeading {
	color: green;
.redHeading {
	color: red;
<h1 class="blueHeading">This is the page's main headline</h1>
<p>This is a paragraph inside the main content</p>
<p>This is another paragraph</p>
<h2 class="blueHeading">This is a subheading, a heading 2</h2>
<p>This is more paragraph text</p>
<aside class="aside1">
<h2 class="greenHeading">This is the first aside's heading</h2>
<p>This aside discusses upcoming events</p>
<aside class="aside2">
<h2 class="redHeading">This is the second aside's heading</h2>
<p>This aside discusses featured specials</p>
  • селекторы_по_классу.txt
  • Последнее изменение: 2019/10/01 16:13
  • (внешнее изменение)