I'm learning about the roles of line-height
and font-size
in CSS for HTML.
I originally defined the CSS for the p
tags as such (shown also in the snippet):
p {
font-size: 2.0em;
font-weight: bold;
line-height:1.5;
}
However, I decided later in the block of code that I might want to change the line-height
to 2.0
instead, so I did the following afterward when following a lecturer who did the same and produced the required results on Udemy:
p {
line-height:2.0;
}
I'm a bit confused. I thought that if I declared the line-height
again later down the code, it would change to the new value I declared, being 2.0
rather than 1.0
I am using Chrome version 70 but I'm stuck as to why this effect occurs.
/*font-family*/
* {
-webkit-text-size-adjust: none;
}
p {
font-family: Arial;
}
h1 {
font-family: Georgia;
}
h1 {
/*font-size: 200px;*/
/*font-size: em;*/
/* em is relative font size*/
}
/*font-size*/
body {
font-size: 10px;
}
h1 {
font-size: 5.0em;
}
p {
font-size: 2.0em;
font-weight: bold;
line-height:1.0;
}
span {
font-size: 2.0em;
}
/*doubles the size relative to the element it is inside */\
/*so now span is 80px (40 x 2)*/
/*default px side is around 16px*/
/*you can set a default in body */
/*line-height controls height of a given line */
p {
line-height:2.0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Fonts</title>
<link type="text/css" href="fontstyles.css" rel="stylesheet"></style>
</head>
<body>
<h1>Fonts Demo Page</h1>
Lorem Ipsum.
<p>Lorem ipsum dolor sit amet, consectetur <span>adipisicing elit</span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
p
up in the first block? – rubentd Nov 8 '18 at 15:41