HTML & CSS, Tekst blok maken!

Hallo allemaal,
Wij gaan maken een test css blokje uit eigen handen.
Het gaat oom een blokje wat niet zomaar te coderen is voor beginners.

Het Blokjee


Hoe gaan we dit doen?
We gaan dit doen om eerst jou kladblok of ander progama te openen.
Ik zelf heb Notepad ++.
We gaan dit nu in stappen uitvoeren!

Stap 1:

We maken een bestand met de naam: blokje.php

Stap 2:

Open het bestand en kijk Stap 3.

Stap 3:

Zet in het bestand:

<style type='text/css'>
html body div.content div div.c_box
	{
		box-shadow: 0px 0px 7px #666;
		position: relative;
		background: rgba(255, 255, 255, 0.9);
		margin-bottom: 6px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		color: #000000;
		overflow: hidden;
	}
html body div.content div div.c_box div.heading
	{
		position: relative;
		background: rgba(255, 255, 255, 0.9);
		color: #FFFFFF;
		font-weight: bold;
		font-size: 13px;
		padding:9px;
	}
html body div.content div div.c_box div.heading span.close
	{
		position: relative;
		float: right;
		cursor: pointer;
		color: #FFFFFF;
	}
html body div.content div div.c_box div.heading span.close:hover
	{
		color: #FF0080;
	}
html body div.content div div.c_box div.inner
	{
		position: relative;
		padding: 6px;
		font-size: 11px;
	}
html body div.content div div.c_box div.heading.tabs
	{
		text-align: left;
		clear: both;
		padding: 2px !important;
		height: 22px;
	}
html body div.content div div.c_box div.heading.tabs div.tab
	{
		position: relative;
		float: left;
		margin: 0px 5px;
		padding: 3px 8px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		-webkit-user-select: none;
	}
html body div.content div div.c_box div.heading.tabs div.tab:hover
	{
		background: #FFFFFF;
		color: #333333;
		cursor: pointer;
		text-shadow: none;
	}
html body div.content div div.c_box div.heading.tabs div.tab.selected
	{
		background: #FFFFFF;
		color: #333333;
		cursor: default;
		border-radius: 4px 4px 0px 0px;
		padding: 3px 8px 7px 8px;
		margin-bottom: -6px;
		text-shadow: none;
	}
html body div.content div div.c_box div.heading.tabs div.tab.static
	{
		background: transparent;
		color: #FFFFFF;
		cursor: default;
	}
</style>

Stap 4:

We hebben nu al de css erin gezet nu het blokje eronder:

<div class="c_box tabs">
				<div class="heading tabs red"><div class="tab selected" id="tab_me_tags_popu">Welkom</div></div>
					<div class="inner">	
						<b>Welkom!</b>
					</div>
			</div>

Kijk nu in je bestand om hem te openen in een webbrowser.
Je ziet je blokje!