First, let’s start with just a basic HTML page. A link has been added as well so we can look at styling that too.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<h1>My H1 title</h1>
<p>Aenean commodo ligula eget dolor.
Donec interdum, metus et hendrerit aliquet,
dolor diam sagittis ligula,
eget egestas libero turpis vel mi.
Pellentesque posuere.</p>
<a href="#">Etiam sit amet orci</a>
</body>
</html>
Now let’s add some simple text styling to this page.
style.css
h1 {
/* we can set the color below as a simply colour */
/*color: blue;*/
/* or use HEX */
/*color: #710CE8;*/
/* or use RGB */
/*color: rgb(113,12,232);*/
/* or use RGBa with transparency */
/* transparency has values from 0 to 1 */
color: rgba(113,12,232,0.6);
font-family: Tahoma, Arial, "Times New Roman";
font-size: 40px;
font-style: italic;
font-weight: 200;
/* specify spacing between the characters */
letter-spacing: 5px;
/* specify spacing between the words */
letter-spacing: 10px;
/*specify indent of first line text */
text-indent: 50px;
/* alingment relative to it's container */
text-align: left;
text-decoration: underline;
text-transform: capitalize;
}
a {
/* remove the underline from the link */
text-decoration: none;
}
p {
/* spacing between lines of text */
line-height: 30px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<h1>My H1 title</h1>
<p>Nulla semper interdum enim, sed aliquet lacus facilisis commodo. Etiam et mollis sem. Praesent pellentesque ante eu turpis porta tincidunt. Ut tempor, libero non pretium sagittis, purus lacus placerat diam, faucibus dignissim tellus erat sit amet ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat lectus blandit risus gravida, et porttitor magna ultricies. In risus felis, viverra et ligula a, vehicula condimentum ipsum. Fusce dui tellus, facilisis in lacinia in, pharetra quis tortor. Donec imperdiet metus ut lorem interdum, ac posuere enim aliquam. Sed nulla risus, hendrerit vitae leo at, hendrerit sollicitudin nulla. Donec eu volutpat turpis. Curabitur at auctor magna. Vestibulum lacinia accumsan urna.</p>
<a href="#">Etiam sit amet orci</a>
</body>
</html>
