HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet.
HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
HTML stands for "Hyper Text Markup Language". Its the standard markup language for creating web pages.
HTML defines the various elements of a web page, such as headings, paragraphs, images, links, and forms. HTML uses a series of tags to define each element, and these tags are interpreted by web browsers to display the content of the page.
An HTML element is the complete structure, including the opening tag, content (if any), and the closing tag (if applicable).
For example, the <p> tag is used to define a paragraph of text, and the <img> tag is used to insert an image into a web page.
A HTML tag is the actual keyword or name enclosed in angle brackets, that tells the browser what kind of content to expect.
Attributes provide additional information about an element. They are placed inside the opening tags. Common attributes include class, id, href, and src.
Example:
<a href="https://www.example.com">Example Website</a>
A HTML structure, also known as HTML skeleton, is basic structure, which contains the essential building-block elements upon which all web pages are created.
It consists of several parts, including the document type declaration, the HTML element, the head element, and the body element.
Here's a look at a basic HTML document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<h1>First Heading</h1>
<p>Paragraph</p>
</body>
</html>
Let's see each part of this structure to understand its function and importance.
HTML headings and paragraphs are two of the most commonly used elements in creating web pages. Thanks to them, the structured content makes the reading experience easier and more enjoyable.
In HTML, each heading has to be wrapped in a heading element:
<h1>Hello, I am the main heading</h1>
Just as for headings, each paragraph has to be wrapped in a paragraph element:
<p>Hi, I am a example paragraph</p>
HTML lists allow web developers to organize data on web pages into an ordered or unordered format. There are three types of lists that can be created in HTML: ordered lists, unordered lists, and definition lists.
An ordered list is a list where the items are marked with numbers by default. It is created using the <ol> tag, and each list item starts with <li> tag.
Example:
<ol>
<li>List item no.1<li>
<li>List item no.2<li>
<li>List item no.3<li>
</ol>
An unordered list is a list where the items are marked with bullets or unnumbered by default. It is created using the <ul> tag, and each list item starts with <li> tag.
Example:
<ul>
<li>List item no.1<li>
<li>List item no.2<li>
<li>List item no.3<li>
</ul>
An description list is a list where each item has a term and a corresponding definition. It is created using the <dl> tag, and each term and definition is represented by the <dt> and <dd> tags.
Example:
<dl>
<dt>Term no.1<dt>
<dd>Definition no.1<dd>
<dt>Term no.2<dt>
<dd>Definition no.2<dd>
<dt>Term no.2<dt>
<dd>Definition no.3<dd>
</dl>
CSS stands for "Cascading Style Sheets". Its a stylesheet language used to define the presentation and layout of HTML documents.
CSS allows you to apply styles to HTML documents by prescribing colors, backgrounds, fonts, spacing, and positioning. It can be used to create complex designs, such as multi-column layouts, responsive designs that adjust to different screen sizes, transitions, etc.
CSS selectors specifies which HTML elements the rule applies to. The "property" defines the styling property that will be changed, such as font, background or their colors. The "value" specifies the value for the property.
Example:
selector {
property: value;
}
There are several types of selectors. Each of them are used to target specific HTML elements to apply styling to:
These target specific HTML element, such as <h1> for headings or <p> for paragraphs.
These target element with class atribute, specified with a ., followed by the class name.
These target element with ID atribute, specified with a #, followed by the ID name.
These target all HTML elements on the page, specified only with a * and nothing more.
These target element with attribute value. For example, [type="checkbox"] would target all checkbox input fields
These target elements based on their state or position. For example, :hover for when the user hovers over an element with their mouse, or :active for when the user activates an element.
CSS syntax, also knows as CSS skin, consists of a set of rules. This ruleset defines how elements on a web page should be displayed.
Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
}
.credit {
color: #000;
}
#navbar {
background-color: lightblue;
}
a[href="https://example.org"] {
color: green;
}
h1:hover {
color: green;
}
The CSS box model is essentially a rectangular box that wraps around every HTML element. Each box has four main parts:
In CSS, colors are specified using a variety of methods, such as predefined color names, or HEX, RGB, HSL values.
Color keywords are predefined color names such as "red" or "green"
Example:
h1 {
color: red;
}
HEX values are six-digit codes that represent colors in the RGB color model.
Example:
h1 {
color: #ff0000;
}
RGB values use a combination of red, green, and blue values.
Example:
h1 {
color: rgb(255, 0, 0);
}
HSL values use a combination of hue, saturation, and lightness.
Example:
h1 {
color: hsl(0, 100%, 50%);
}
In CSS, text formating allows you to control the visual presentation of text on the web page using a variety of properties. such as:
{created by @Syconar}