Merge branch 'develop'
This commit is contained in:
50
WebDevelopment/01-CssBasics/index.htm
Normal file
50
WebDevelopment/01-CssBasics/index.htm
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-GB">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>My website</title>
|
||||||
|
|
||||||
|
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="NavBar m0">
|
||||||
|
<h1 class="m0">My heading 1</h1>
|
||||||
|
<h2 class="m0" id="SpecialHeading">My heading 2</h2>
|
||||||
|
<h3 class="m0">My heading 3</h3>
|
||||||
|
|
||||||
|
<p>Paragraph inside div</p>
|
||||||
|
<p>Paragraph inside div</p>
|
||||||
|
<p>Paragraph inside div</p>
|
||||||
|
<p>Forth paragraph inside div</p>
|
||||||
|
|
||||||
|
<span>my span</span>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span>my embedded span</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>This is right after the nav bar</p>
|
||||||
|
<p>This is right after the nav bar</p>
|
||||||
|
<p>This is right after the nav bar</p>
|
||||||
|
|
||||||
|
<span>my span</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>My text is in here :)</p>
|
||||||
|
|
||||||
|
<p>This is a <strong>strong</strong> sentence with some <em>emphasis</em> included</em></p>
|
||||||
|
|
||||||
|
<p>This is a link to <a href="http://www.google.co.uk">Google</a> go on, click it</p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
84
WebDevelopment/01-CssBasics/style.css
Normal file
84
WebDevelopment/01-CssBasics/style.css
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
html
|
||||||
|
{
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
color: blue;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3
|
||||||
|
{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong
|
||||||
|
{
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
em
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#SpecialHeading
|
||||||
|
{
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar
|
||||||
|
{
|
||||||
|
padding: 50px;
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
span
|
||||||
|
{
|
||||||
|
color: brown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar span
|
||||||
|
{
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar > span
|
||||||
|
{
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar ~ p
|
||||||
|
{
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar + p
|
||||||
|
{
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m0
|
||||||
|
{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a
|
||||||
|
{
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover
|
||||||
|
{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user