분류 html

HTML로 할 수 있는 일 - Highlight text

컨텐츠 정보

  • 조회 428 (작성일 )

본문

https://codepen.io/ananyaneogi/pen/WqEzPo 



HTML : 


<h1>Highlight Text</h1>

<article>
	<p>
		‘Welcome to Hogwarts,’ said Professor McGonagall. ‘The start-of-term banquet will begin shortly, but before you take your seats in the Great Hall, you will be sorted into your houses. <mark>The Sorting</mark> is a very important ceremony because, while you are here, your house will be something like your family within Hogwarts. You will have classes with the rest of your house, sleep in your house dormitory and spend free time in your house common room.
	</p>
	<p>
	‘The four houses are called Gryffindor, Hufflepuff, Ravenclaw and Slytherin. Each house has its own noble history and each has produced outstanding witches and wizards. While you are at Hogwarts, <mark>your triumphs will earn your house points</mark>, while any rule-breaking will lose house points. At the end of the year, the house with the most points is awarded the House Cup, a great honour. I hope each of you will be a credit to whichever house becomes yours.
</p>
</article>



CSS : 


body {
/* 	background-color: lightseagreen; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 30px;
}

h1 {
	font-size: 3rem;
	color: darksla;
	font-family: "Berkshire Swash", cursive;
	text-align: center;
}

p {
	font-size: 1.4rem;
	line-height: 1.4;
}

mark {
	background-color: blanchedalmond;
}