examples / html / personal-page-dark-styles

Personal Webpage (dark styles)

example html css

This is an example personal webpage:

Click here to open the page in its own window.

This page contains basically the same three HTML files as the unstyled personal webpage example and the light styled personal webpage example:

home.html

<!DOCTYPE html>
<html>
<head>
	<title>My Personal Page</title>
	<link rel="stylesheet" type="text/css" href="dark-styles.css">
</head>
<body>
	<div id="content">
		<navigation>
			<a href="home.html">Home</a>
			<a href="about.html">About</a>
			<a href="cats.html">Cat Pictures</a>
		</navigation>
	
		<h1>My Personal Page</h1>
		
		<p>Welcome to my personal page. This is just an example webpage. It uses some simple CSS to give it a sp00ky dark theme!</p>
		
		<footer>Learn more at <a href="http://HappyCoding.io/examples/html/personal-page-dark-styles">HappyCoding.io</a>!</footer>
	</div>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
	<title>About My Personal Page</title>
	<link rel="stylesheet" type="text/css" href="dark-styles.css">
</head>
<body>
	<div id="content">
		<navigation>
			<a href="home.html">Home</a>
			<a href="about.html">About</a>
			<a href="cats.html">Cat Pictures</a>
		</navigation>
	
		<h1>About My Personal Page</h1>
		
		<p>This is an example about section. You might explain more about yourself, or the webpage, or give links to other resources.</p>
		
		<p>My name is Kevin. I write programming tutorials at <a href="http://HappyCoding.io">HappyCoding.io</a>, and I have a cat named Stanley. My favorite color is black, but if that doesn't count then I'll choose green. I also like comic books and playing bikes.</p>

		<footer>Learn more at <a href="http://HappyCoding.io/examples/html/personal-page-dark-styles">HappyCoding.io</a>!</footer>
	</div>
</body>
</html>

cats.html

<!DOCTYPE html>
<html>
<head>
	<title>Cat Pictures! 🐈</title>
	<link rel="stylesheet" type="text/css" href="dark-styles.css">
</head>
<body>
	<div id="content">
		<navigation>
			<a href="home.html">Home</a>
			<a href="about.html">About</a>
			<a href="cats.html">Cat Pictures</a>
		</navigation>
	
		<h1>Cat Pictures 🐈</h1>
		
		<p>Here are some pictures of my cat, Stanley:</p>
		
		<img src="../images/cat-1.jpg" />
		<img src="../images/cat-2.jpg" />
		<img src="../images/cat-3.jpg" />
		<img src="../images/cat-4.jpg" />
		<img src="../images/cat-5.jpg" />
		<img src="../images/cat-6.jpg" />
			
		<footer>Learn more at <a href="http://HappyCoding.io/examples/html/personal-page-dark-styles">HappyCoding.io</a>!</footer>
	</div>
</body>
</html>

But it also contains a CSS file that contains dark styles:

dark-styles.css

body{
	background-color: #323232;
	color: white;	
}

#content{
	width: 600px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;	
	background-color: black;
	padding: 25px;
}

a{
	color: orange;
}

navigation a{
	border: thin solid white;
	padding: 5px;
	margin-right: 10px;
}

navigation a:hover{
	background-color: orange;
	color: black;
}

img{
	width: 75%;
	border: thick solid orange;
}

footer{
	margin-top: 100px;
	border-top: thin solid white;
	font-size: 10pt;
}

The three .html files load the styles from this file using the <link rel="stylesheet" type="text/css" href="dark-styles.css"> line. These styles change how our webpage looks, even though the content of the HTML hasn’t really changed!

Tweak Ideas