0% found this document useful (0 votes)

34 views22 pages

Code HS

This document provides a comprehensive overview of HTML and CSS, including the structure of an HTML file, the purpose of various tags, and how to use attributes. It explains how to create elements like headings, paragraphs, lists, tables, and how to style them using CSS, including inline styles, internal styles, and external stylesheets. Additionally, it covers the use of classes and IDs for styling, as well as the importance of comments in both HTML and CSS for code clarity.

Uploaded by

mkraybe

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

34 views22 pages

Code HS

Uploaded by

mkraybe

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 22

12/4/24, 8:40 AM CodeHS

HTML Documentation
HTML File Skeleton
This is a simple html file skeleton that you can use to get you started on a project. To get info on specific tags see below.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>

<body>
Inside the body tag is where you put all the cool stuff
you want on your page!
</body>
</html>

The !DOCTYPE declaration must be the very first thing in your html document. It is not an html tag, it is an instruction to the web browser about what
version of HTML the page is written in.

The html tag tells the browser that this is an html document.

The head element is a container for all the head elements, which can include a title for a document, scripts, styles, and more. The title tag defines the title
of the page.

The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, and lists.

Tags
HTML tags are keywords that define how the browser must format and display content.
A basic HTML element starts like this:
<tag>
It starts with an opening tag and ends with a closing tag.
The closing tag has the same name as the opening tag, but with a /
Everything inside should be indented one level.
</tag>

https://codehs.com/editor/documentation/html 1/22
12/4/24, 8:40 AM CodeHS

HTML Attributes
Attributes can be added to any tag to add more information about the tag.
The general format for adding an attribute and a value for the attribute is:
<tag attribute="value">Tag content here</tag>

Example HTML:
<img src="https://codehs.com/static/img/logo.png" height="50px">

Example Result:

Header Tags
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.

Example HTML:
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>

Example Result:

Level 1 Header
Level 2 Header
Level 3 Header

Basic Tags
The <p> tag defines a paragraph.
The <i> tag displays text in italics.
The <b> tag displays text in bold.

Example HTML:

https://codehs.com/editor/documentation/html 2/22
12/4/24, 8:40 AM CodeHS

<p>
This is a paragraph where <i>this will display in italics</i>
and <b>this will display in bold</b>.
</p>

Example Result:
This is a paragraph where this will display in italics and this will display in bold.

Horizontal Lines
The <hr> tag defines a thematic break with a horizontal rule.

Example HTML:
<p>
This is a section about a certain theme.
</p>
<hr>
<p>
This is a section about another theme separated from the previous section
by a horizontal line that implies a thematic break in content.
</p>

Example Result:
This is a section about a certain theme.

This is a section about another theme separated from the previous section by a horizontal line that implies a thematic break in content.

Links
The <a> tag creates a hyperlink that is used to link from one page to another. The href attribute indicates the link's destination.

Example HTML:
<a href = "https://google.com">Google</a>

Example Result:
Google

https://codehs.com/editor/documentation/html 3/22
12/4/24, 8:40 AM CodeHS

Images
The <img> tag defines an image in an HTML page.

The src attribute indicates where the image is coming from and can be either a directory path to a photo saved on your computer or the url of an image on
the internet like the example below.

The alt attribute specifies alternate text that will display if the image cannot be loaded.

The width and height attributes specify the width and height of the image.

Example HTML:
<img src = "https://codehs.com/static/img/logo.png" alt="Image not found" width="50px" height="50px">

Example Result:

Lists
The <ul> tag defines an unordered list (bullet points)
The <ol> tag defines an ordered list (numbered list)
The <li> tag defines a single list item inside of a list

Example HTML:

https://codehs.com/editor/documentation/html 4/22
12/4/24, 8:40 AM CodeHS

<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
<ul>
<li>Item A</li>
<li>
Item B
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Item C</li>
</ul>

Example Result:
1. Item one
2. Item two
3. Item three

Item A
Item B
1. Subitem 1
2. Subitem 2
Item C

Tables
The <table> tag defines a table element that can contain several individual table rows.
The <thead> tag groups together the header information in the table.
The <tbody> tag groups together the body information in the table. The <tr> tag defines a single row in the table. The tr element can contain several cells
of information.
The <th> tag defines a table header. th tags are commonly used in the first row of the table to show the headers of each column.
The <td> tag defines a table data element, a single cell of information. td elements go inside of a table row.
The border attribute defines how thick the table border is (default is no border)

Example HTML:

https://codehs.com/editor/documentation/html 5/22
12/4/24, 8:40 AM CodeHS

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sam</td>
<td>Purple</td>
</tr>
<tr>
<td>Taylor</td>
<td>Orange</td>
</tr>
</tbody>
</table>

Example Result:
NameFavorite Color
Sam Purple
TaylorOrange

Comments
The comment tag is used to insert helpful notes into the HTML code. Comments are not displayed in the resulting web page, they are only there for the
reader of the code.

Using comments in your code can help you maintain clean, clear, and understandable code.

<a href="about.html">About</a>
<a href="home.html">Home</a>

https://codehs.com/editor/documentation/html 6/22
12/4/24, 8:40 AM CodeHS

CSS Documentation
Inline Styling
The style attribute of an element lets you style that single element.
The format for the style attribute is:
<tagname style="property: value;">

You can add multiple styles to one element:

style="property1: value1; property2: value2;"

Example HTML:
<h3 style="background-color:LightBlue;">My Journal</h3>
<p style="background-color:LightYellow; font-size:15px;">Today I walked my puppy at the park and made my own website.</p>

Example Result:

My Journal
Today I walked my puppy at the park and made my own website.

For a full list of properties and values that can be used, go to CSS Properties

Adding CSS to HTML Page

Instead of adding a style attribute to each element, we can use CSS code to select and style several elements at once.
The CSS code goes inside the <style> tag which goes in the <head> element.
The style is separate from the content of the page. Because it is metadata about the content, it belongs in the head.
Example:

https://codehs.com/editor/documentation/html 7/22
12/4/24, 8:40 AM CodeHS

<head>
<title>Your Page Title</title>
<style>
/*
* This will select all h1 elements
* and give them a font size of 30px
* and a color of red.
*/
h1 {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<h1>CodeHS</h1>
</body>

Result:

CodeHS

Adding External CSS

Rather than putting all of our CSS rules in a style tag, it's also possible to add CSS code that's written in a separate file. The file should be a .css file, such
as my_style.css
The external CSS file should be added to the page using a <link> tag in the <head> of the HTML page.
Example:
my_page.html
<html>
<head>
<title>Your Page Title</title>
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
<body>
<h1>CodeHS</h1>
</body>
</html>

https://codehs.com/editor/documentation/html 8/22
12/4/24, 8:40 AM CodeHS

my_style.css
/*
* This will select all h1 elements
* and give them a font size of 30px
* and a color of red.
*/
h1 {
font-size: 30px;
color: red;
}

Result:

CodeHS

CSS Syntax
In CSS the selector defines which HTML elements the CSS rule apples to. CSS declarations are inside braces and define the style. Properties are which
features are being styled and the value of a property is how the feature is being styled.
/* General format */
selector {
property: value;
property: value;
}

/*
* In this CSS rule, h1 is the selector, and each line
* inside the braces is a CSS declaration.
*
* This rule will select all h1 elements, set their font-size
* property to be 60px, and set their color property to be red.
*/
h1 {
font-size: 60px;
color: red;
}

For a full list of properties and values that can be used, go to CSS Properties

https://codehs.com/editor/documentation/html 9/22
12/4/24, 8:40 AM CodeHS

CSS Comments
It's important to add comments to your CSS code to explain to the reader what each rule is doing. Comments are ignored by the browser when the page is
displayed. Comments are there to help the reader of the code understand what is going on.

A CSS comment starts with /* and ends with */

Example:
h1 {
/* This is a single line comment */
color: red;
}

/*
* This is a multi-line comment that
* spans multiple lines
*/
h2 {
color: green;
}

Selecting By Tag
We can select html elements to style by their tag. If we use a tag as a selector, it selects all the elements with that tag.
/*
* This CSS rule will select all images
* and their height will be set to 200 pixels
*/

img {
height: 200px;
}

Selecting by Class
Class is an attribute that we can add to html tags to style a group of elements. If we use a class as a selector, it selects all the elements that share that
class.

https://codehs.com/editor/documentation/html 10/22
12/4/24, 8:40 AM CodeHS

The class style overrides tag style in case of a conflict. In other words, if a select-by-tag rule says that the element should be red, and a select-by-
class rule says the same element should be green, the class rule takes precedence and the element will be green.
You can add a class to a tag like this:
<tag class="class-name"></tag>

You can add multiple classes to a tag by separating class names with spaces:
<tag class="class1 class2 class3"></tag>

Class names
Cannot start with a number
Should be all lowercase
Should use dashes (-) between words i.e. "class-name"
Should be descriptive

To select all elements with the same class, the CSS selector should have a period followed by the class name:
.class-name
Example:

https://codehs.com/editor/documentation/html 11/22
12/4/24, 8:40 AM CodeHS

<head>
<title>Your Page Title</title>
<style>
/*
* This rule will apply to all the elements with
* the "alert" class
*/
.alert {
color: red;
}

/*
* This rule will apply to only <h1> elements
* with the class "alert"
*/
h1.alert {
font-size: 20px;
}

/*
* This rule will apply to all elements with the
* "morning-greeting" class
*/
.morning-greeting {
background-color: LightYellow;
}
</style>
</head>
<body>
<h1 class="alert morning-greeting">Good Morning!</h1>
<p class="alert">Hi!</p>
</body>

Result:

Good Morning!
Hi!

https://codehs.com/editor/documentation/html 12/22
12/4/24, 8:40 AM CodeHS

Selecting by ID
id is an attribute that we can add to an HTML tag to style that specific element.
An element can only have one id and the id of an element should be unique.
There should be only one tag with a given id on any web page.
Using the ID as a selector will select the one element that has that ID.

The id style overrides both tag and class style in case of a conflict. In other words, if a select-by-tag rule says that the element should be red, and a
select-by-class rule says the same element should be green, and a select-by-id rule says that the same element should be yellow, the id rule takes
precedence and the element will be yellow.
You can add an id to a tag like this:
<tag id="id-name"></tag>

id names:
Cannot start with a number
Should be all lowercase
Should use dashes between words i.e. "id-name"
Should be descriptive

To select an element with a specific id, the CSS selector should have a hashtag followed by the id name:
#id-name
Example:
<head>
<title>Your Page Title</title>
<style>
/*
* This rule will apply to the single element
* with the id "logo"
*/
#logo {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h1 id="logo">CodeHS</h1>
</body>

https://codehs.com/editor/documentation/html 13/22
12/4/24, 8:40 AM CodeHS

Result:

CodeHS

Divs
Divs are used to group together several different HTML elements into one block. A div creates a new block of elements, a block always starts on a new line
and takes up the full width available in its container.
Grouping elements together in a div allows us to style that block as one unit.
Example HTML:
<div id="block-one">
<h3>Welcome</h3>
<p>Welcome to my web page.</p>
</div>
<div id="block-two">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>

Example CSS:
#block-one {
color: red;
}

#block-two {
color: blue;
}

Example Result:

Welcome
Welcome to my web page.

Home
About

https://codehs.com/editor/documentation/html 14/22
12/4/24, 8:40 AM CodeHS

Spans
Spans are used to group together smaller chunks of HTML code in-line. Spans do not create a new block, they are usually used to add style to a small
chunk of HTML inside of a line (such as a line in a paragraph).
Example HTML:
<p>This is a <span class="big">paragraph</span> of <span class="small">text</span></p>

Example CSS:
.big {
font-size: 20px;
}

.small {
font-size: 8px;
}

Example Result:
This is a paragraph of text

CSS Properties
This section covers some of the most commonly used CSS properties and values. For a full list of possible CSS properties and values, visit W3 Schools

Color
CSS Colors can either be:
A valid color name, such as "Blue" or "DarkGreen"
An RGB value, such as "rgb(255, 0, 0)"
A HEX color code, such as "#68ff00"

Color Names
Common color names:
red
orange
yellow
green
blue
cyan
indigo
black

https://codehs.com/editor/documentation/html 15/22
12/4/24, 8:40 AM CodeHS

white

Names are not case-sensitive. "RED" is the same as "red".

There are 140 valid color names. See a full list of all names here
Example:
p {
color: blue;
}

Result:
Hello

RGB Colors
HTML and CSS represent colors with the RGB (Red Green Blue) color encoding system.
Every color can be made just by mixing different amounts of red, green, and blue.

RGB color values can be specified in CSS using "rgb(red, green, blue)"
Each value can be between 0 and 255, inclusive.
rgb(255, 0, 0) would be red
rgb(255, 255, 255) would be white
rgb(0, 0, 0) would be black

Example:
p {
color: rgb(255, 0, 0);
}

Result:
Hello

Hex Color Values

We can also represent RGB colors using hexadecimal values. 6 hexadecimal digits make up a color:
The first two hexadecimal digits specify the amount of RED in the color
The next two hexadecimal digits specify the amount of GREEN in the color
The last two hexadecimal digits specify the amount of BLUE in the color
Each digit can be a value from 0 to F, with 0 being the least and F being the most
"#ff0000" would be red
"#ffffff" would be white
https://codehs.com/editor/documentation/html 16/22
12/4/24, 8:40 AM CodeHS

"#000000" would be black

Example:
p {
color: #0000ff;
}

Result:
Hello

Color Picker
Use this color picker to find the exact color you want for your web page:

#ff0000

Text and Font

color: text color in the selected HTML element
font-size: size of the font (e.g. 30px)
font-family: font family (e.g. Arial or Times)
font-style: font style (e.g. italic or normal)
font-weight: how thick the font is (bold or bolder, or a value from 100 to 900)
text-align: sets the horizontal alignment of text (center, left, right)
<head>
<title>Your Page Title</title>
<style>
h1 {
font-size: 100px;
font-weight: bold;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to my blog!</h1>
</body>