Website Moodle Site designed built and hosted by Enterprise Solutions

HTML and CSS playground

type what you see below into the HTML editor, then look at the preview windw:

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
exmample of Doctype:

<!DOCTYPE html>

<title>Your first website</title>

<body> <nav>
<li><a href=""></li>
<li><a href="">Playground</li>
<li><a href="">HTML tutorials</li>
<li><a href="">HTML tutorials</li>
<div style="background-color: #00f; color:red" >
<h1> This is a heading </ h1>

this is a p tag it stands for paragraph
<p> this is a paragraph </p>

HTML editor

Please type the code below into the CSS window

body {
background-color: #d0e4fe;
h1 {
color: orange;
text-align: center;
p {
font-family: "Times New Roman";
font-size: 20px;
background-color: blue;
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
border-right:1px solid #bbb;
li:last-child {
border-right: none;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover:not(.active) {
background-color: #111;
.active {
background-color: #4CAF50;

CSS editor