Cheat Sheet for HTML and CSS Basics

Do you want to create a visually appealing website but don't know where to start? Look no further! HTML and CSS are the foundation of web development, and this cheat sheet will give you a solid foundation to build upon.

HTML Basics

HTML, which stands for HyperText Markup Language, is the language used to describe the structure of a web page. HTML consists of various tags and attributes that define the layout and content of a webpage.

Basic Tags

The most basic tags in HTML are the opening and closing html tags, which define the beginning and end of an HTML document. Here's an example:

<!DOCTYPE html>
<html>
    <!-- Content here -->
</html>

Within the html tags, there are two main sections: head and body. The head section contains information about the document, such as the title of the webpage, while the body section contains the actual content of the webpage.

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
    </head>
    <body>
        <h1>Welcome to my website</h1>
        <p>Here is some content</p>
    </body>
</html>

Heading Tags

There are six levels of heading tags in HTML, with h1 being the largest and most important, and h6 being the smallest and least important.

<h1>This is a level one heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>

Paragraph and Text Tags

The p tag is used to create paragraphs. Text can also be formatted using various tags, such as strong for bold text, em for italicized text, and u for underlined text.

<p>This is a paragraph.</p>
<p>This is another paragraph with <strong>bold text</strong> and <em>italicized text</em>.</p>
<p>This is a paragraph with <u>underlined text</u>.</p>

Link Tags

Links are created using the a tag, and the href attribute specifies the URL.

<a href="http://www.google.com">Click here to go to Google</a>

Image Tags

Images are inserted using the img tag, and the src attribute specifies the location of the image.

<img src="image.jpg" alt="A picture of a mountain" width="500" height="300">

CSS Basics

CSS, which stands for Cascading Style Sheets, is used to style and layout web pages. CSS allows you to make changes to elements such as fonts, colors, margins, and borders.

Basic Syntax

CSS uses the following syntax:

selector {
    property: value;
}

The selector specifies which HTML element(s) the style should be applied to, and the property and value specify which style to apply.

Classes and IDs

Classes and IDs are used to apply styles to specific elements on a webpage. Classes are denoted with a period (.) and IDs are denoted with a pound sign (#).

/* Styles applied to all elements with the class "my-class" */
.my-class {
    color: blue;
    font-size: 18px;
}

/* Styles applied to the element with the ID "my-id" */
#my-id {
    background-color: yellow;
    border: 1px solid black;
}

Styling Text

Text can be styled using various properties such as font-size, color, and text-align.

/* Styles applied to all text on the page */
body {
    font-size: 16px;
    color: #333;
}

/* Styles applied only to headings */
h1, h2, h3 {
    color: blue;
    text-align: center;
}

/* Styles applied only to paragraphs */
p {
    font-family: Arial;
    line-height: 1.5;
}

Styling Boxes

Boxes, such as div and section elements, can be styled using properties such as width, height, and border.

/* Styles applied to all boxes on the page */
div, section {
    border: 1px solid black;
}

/* Styles applied to a specific box */
#my-box {
    width: 500px;
    height: 300px;
    background-color: yellow;
}

Box Model

The box model consists of the content, padding, border, and margin of an element.

/* Styles applied to a specific box */
#my-box {
    width: 500px;
    height: 300px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

Responsive Design

Responsive design allows a webpage to adapt to different screen sizes and devices. This is achieved using media queries and flexible layouts.

/* Styles applied to specific screen sizes */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* Styles applied to a flexible layout */
.container {
    display: flex;
    flex-wrap: wrap;
}

.box {
    flex: 1;
    margin: 10px;
}

Conclusion

HTML and CSS are the building blocks of web development. With this cheat sheet, you now have a solid foundation to build upon. Remember to practice and experiment, as there is much more to learn!

Editor Recommended Sites

AI and Tech News
Best Online AI Courses
Classic Writing Analysis
Tears of the Kingdom Roleplay
Explainable AI - XAI for LLMs & Alpaca Explainable AI: Explainable AI for use cases in medical, insurance and auditing. Explain large language model reasoning and deep generative neural networks
Sheet Music Videos: Youtube videos featuring playing sheet music, piano visualization
Macro stock analysis: Macroeconomic tracking of PMIs, Fed hikes, CPI / Core CPI, initial claims, loan officers survey
Nocode Services: No code and lowcode services in DFW
NFT Shop: Crypto NFT shops from around the web