tfoman/Angel6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scss basics

Browse Source
This commit is contained in:
Unknown
2017-10-15 18:43:44 +01:00
parent 543bb91568
commit 6c835bee44
10 changed files with 175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
WebDevelopment/02-CssBasics/index.htm Normal file
View 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/02-CssBasics/style.css Normal file
View 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;
}