This repository contains webpage templates and HTML/CSS code snippets for use in a future outreach event.
HTML/CSS webpage templates are stored in the templates folder. Each webpage template contains the following elements:
- A HTML document (
<!DOCTYPE html>tag,<head>tag, etc) - a CSS stylesheet (
h1 {color: red}selector, etc)
To use a pre-made HTML/CSS webpage template, do one of the following:
- Download the template's folder and upload it to your personal workspace.
- Copy the content of the
.htmlfile and paste into your personal.htmlfile. Then, copy the content of the.cssfile and paste it into your personal.cssfile.- If you do this and your HTML document styling is not working, see the issue here
HTML/CSS code snippets are stored in the snippets folder. Each code snippet may contain the following elements:
- Boilerplate HTML webpage code (
<!DOCTYPE html>declaration tags,<head>tags, etc) - HTML elements (
<div>tags,<p>tags, etc) - Inline CSS styling (
<style>elements in the<head>tags) NOTE: some HTML/CSS elements are in their own folders. These elements require other HTML/CSS webpages to work properly.
To use the HTML elements, simply copy the HTML element and paste into your webpage.
NOTE: the HTML element may use inline CSS styling. If they do, they use class selection to select specific HTML elements to style based on their class name. The HTML element will look like this:
<h1 class="CLASS_NAME">My Heading</h1>The inline CSS styling is stored in the <style> element, like this:
...
<head>
<style>
/* HTML_ELEMENT */
/* selects and styles ALL HTML elements WITH this tag */
p {
color: green;
}
/* HTML_ELEMENT, HTML_ELEMENT, ...*/
/* selects and styles EACH HTML element WITH this tag*/
h2, h3 {
}
/* HTML_ELEMENT . CLASS_NAME */
/* selects and styles HTML elements WITH this tag AND this class name */
h1.example1 {
background-color: red;
}
/* .CLASS_NAME */
/* selects and styles ALL HTML elements WITH this class name */
.example2 {
background-color: blue;
}
/* .CLASS_NAME HTML_ELEMENT, HTML_ELEMENT, ... */
/* selects and styles EACH HTML element with this tag WITH this class name*/
.example3 a, li {
color: pink;
}
</style>
</head>
...If the HTML element uses inline CSS styling, do one of the following:
- Copy the CSS styling in the
<style>element into your personal webpage<style>element. - Copy the CSS styling in the
<style>element into your personal.cssfile.- If you do this and the styling is not working, see the issue here
Resources for webpages (images, linked HTML pages, etc) are stored in the resource folder. Any HTML element that requires an image or a linked HTML page uses the resource folder.
By default, all .html files expect a stylesheet called styles.css. It is declared in each .html file's <head> tag:
...
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css" />
...
</head>
...To fix this, do either of the following:
- Rename your CSS stylesheet to
styles.css - Change the
hrefattribute's value fromstyles.cssto your.cssfile name.
Code snippets such as buttons.html, headers.html, etc use CSS inline styling like this:
...
<head>
...
<style>
h1.example1 {
background-color: tomato;
color: wheat;
box-shadow: 2px 2px 4px black;
}
</style>
...
</head>
...Each CSS in-line selector selects an HTML element based on the element's tag and class like this: tag.class.
The name tells the program that this styling should only apply to HTML elements of type tag of class class.
To fix this, do the following:
- Include the CSS styling in either your
.cssfile or your<style>element in your.htmlfile. - Assign the HTML element a class name matching the class name on the CSS styling, like this:
<h1 class="example1"> My Header </h1>This repository of HTML and CSS elements is built upon the lessons and examples provided by W3Schools. I would like to acknowledge their valuable resources and educational material, which have greatly contributed to the development of this project.