Introduction to CSS

1. Introduction

2. Styling with ID's

Example:

				<style>
					#myFirstID {
						margin-top: 20px;
						border-top: 1px solid teal;
					}
				</style>

3. Styling with Classes

Example:

				<style>
					.myFirstClass {
						font-family: Tahoma;
						font-size: 28px;
						color: #69F;
					}
				</style>

4. Styling with HTML Elements

Example:

				<style>
					p {
						font-family: Tahoma;
						font-size: 28px;
						color: #69F;
					}
				</style>

5. Colour Notations

6. Measurement Units

Example:

				<style>
					.fixed1 {
						padding: 16px;
					}

					.fixed2 {
						padding: 1em;
					}

					.rel1 {
						padding: 2%;
					}
				</style>

7. Margins and Padding

Example:

				<style>
					/* Applies padding to each side using individual properties */
					.myFirstClass {
						padding-top: 1em;
						padding-right: 1em;
						padding-bottom: 1em;
						padding-left: 1em;
					}

					/* Applies the same padding to each side */
					.myFirstClass {
						padding: 1em;
					}

					/* Applies 1em padding to top and bottom and 2em padding to right and left */
					.myFirstClass {
						padding: 1em 2em;
					}

					/* Applies 1em padding to top, 1.5 padding to bottom and 2em padding to right and left */
					.myFirstClass {
						padding: 1em 1.5em 2em;
					}
				</style>

8. Box Model

The box model defines how padding, margins, and borders are applied to an elements content.

CSS box model

You should be careful when setting widths on an element, in the example below the article is 100% of the screens width plus 1em padding which means the element is technically more than 100% and a scroll bar will appear.

Example:

				<style>
					.myFirstClass {
						width: 100%;
						padding: 1em;
					}
				</style>

9. Styling Fonts

10. Styling Lists

11. Styling Borders

12. Styling Backgrounds

13. Styling our first webpage

This demo uses the same code from the previous chapter but builds adds some styling to it.

To see what the code outputs click this link, or build the website yourself!

HTML

				<!DOCTYPE html>
				<html lang="en">
					<head>
						<title>My First Website</title>
						<meta charset="utf-8">
						<meta name="viewport" content="width=device-width, initial-scale=1">

						<link rel="stylesheet" href="myStylesheet.css">
						<style>
							/* CSS could go inside of these tags instead but is not the preferred approach */
						</style>

						<script src="myJavaScript1.js"></script>
						<script>
							/* JavaScript could go inside of these tags instead but is not the preferred approach */
						</script>
					</head>
					<body>
						<header>
							<h1>HTML Demo</h1>
							<nav>
								<ul>
									<li><a href="about.html">About</a></li>
									<li><a href="experience.html">Experience</a></li>
									<li><a href="portfolio.html">Portfolio</a></li>
									<li><a href="contact.html">Contact</a></li>
								</ul>
							</nav>
						</header>

						<section>
							<h2>Section Heading</h2>
							<p>This section contains two articles</p>
							<article>
								<h3>Article Heading</h3>
								<p>Paragraph... Maecenas nec velit eu mi sodales euismod. Sed aliquet in lectus sodales faucibus. Nullam orci orci, congue vel tempor eu, posuere nec sapien. Mauris eleifend dolor vel pretium commodo. Morbi ullamcorper a eros ut egestas. Quisque aliquet quis sapien vulputate elementum. In efficitur turpis ipsum, at varius nisl euismod sed.</p>
							</article>

							<article>
								<h3>Article Heading</h3>
								<p>Paragraph... Pellentesque quis justo ac mauris rutrum blandit. Ut risus lectus, placerat eget nulla ac, placerat semper leo. Curabitur tempor dui in nunc volutpat sollicitudin. Vestibulum vel erat euismod tellus rutrum dapibus nec vel metus.
							</article>
						</section>

						<section>
							<h2>Fruit & Veg</h2>
							<article>
								<h3>Fruit</h3>
								<ul>
									<li>Apple</li>
									<li>Orange</li>
									<li>Pear</li>
								</ul>
							</article>

							<article>
								<h3>Veg</h3>
								<ol>
									<li>Potato</li>
									<li>Carrot</li>
									<li>Peas</li>
								</ol>
							</article>
						</section>

						<p><a href="http:daniel-ellis.co.uk" target="_blank">Click this link to view my website</a></p>
						<img src="cat.jpg" alt="A cute ginger cat laid on its back in a basket">

						<table>
							<thead>
								<tr>
									<th>Column1</th>
									<th>Column2</th>
									<th>Colomn3</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>C1:R1</td>
									<td>C2:R1</td>
									<td>C3:R1</td>
								</tr>
								<tr>
									<td>C1:R2</td>
									<td>C2:R2</td>
									<td>C3:R2</td>
								</tr>
							</tbody>
						</table>

						<footer>
							© Copyright 2018 Dan Ellis
						</footer>

						<form id="contactForm" method="post" action="/contact.php">
							<ul>
								<li>
									<label for="name">*Name:</label>
									<input type="text" name="name" id="name" placeholder="What's your name?" value="" maxlength="70" autofocus required>
								</li>
								<li>
									<label for="email">*Email:</label>
									<input type="email" name="email" id="email" placeholder="What's your email?" value="" required>
								</li>
								<li>
									<label for="phone">Phone:</label>
									<input type="phone" name="phone" id="phone" placeholder="What's your telephone number?" value="">
								</li>
								<li>
									<label for="message">*Message:</label>
									<textarea rows="5" cols="50" name="message" id="message" form="contactForm" placeholder="What's your enquiry?" maxlength="500" required></textarea>
								</li>
								<li class="btn">
									<input type="reset" value="Reset">
									<input type="submit" id="submit" value="Submit">
								</li>
							</ul>
						</form>

						<script src="myJavaScript2.js"></script>
						<script>
							/* JavaScript could go inside of these tags instead but is not the preferred approach */
						</script>
					</body>
				</html>

CSS

					<style>
					* {
						margin: 0;
						padding: 0;
					}

					body { margin: 0 5%; }

					header {
						background-color: teal;
						height: 4em;
						overflow: hidden;
						padding: 0 .5em;
						color: #FFF;
					}

					footer {
						margin-top: 1em;
						padding: 0.5em 0;
						background-color: #333;
						color: white;
						float: left;
						width: 100%;
					}

					nav {
						max-width: 50%;
						float: right;
					}

					nav ul { list-style: none; }

					nav li {
						padding: 1em 0.5em;
						display: inline-block;
					}

					nav li a {
						padding: .5em;
						color: #FFF;
					}

					nav li:hover { background-color: #FFF; }

					nav li:hover a{
						color: #000;
					}


					section { padding: 1em; 1%; }

					article {
						width: 48%;
						margin: 0.5em 1% 0 0;
						display: inline-block;
						vertical-align: top;
					}

					article ul, article ol {
						margin-left: 1.5em;
					}

					h1 { float: left; }

					h2 {
						font-family: "Verdana";
						color: teal;
					}

					h3 {
						background-color: #EEE;
						padding: .25em
					}

					.actionLink {
						padding: 1em;
						background-color: lightgreen;
						float: right;
						border-radius: 25px;
					}

					img {
						width: 25%;
						float: left;
					}

					table { padding-left: 1em; }

					th, td {
						padding: .25em .5em;
						text-align: center;
					}

					#contactForm {
						clear: both;
						padding-top: 1em;
						width: 50%;
					}

					#contactForm ul { list-style: none; }

					#contactForm li { margin-top: 1em; }

					#contactForm label { vertical-align: middle; }

					#contactForm input, #contactForm textarea {
						width: 98%;
						padding: .5em;
					}

					#contactForm textarea { resize: vertical; }

					#contactForm .btn { float: right; }

					#contactForm .btn input {
						width: auto;
						padding: .25em .5em;
					}
					</style>