Categories
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two separate technologies that work together to create and style web pages.
HTML is the standard markup language used for structuring the content of web pages. It defines the elements and tags that represent different components such as headings, paragraphs, images, links, tables, and more. HTML provides a hierarchical structure to organize the content, defining the relationships between different elements on the page. It serves as the backbone of web pages and determines their overall structure and semantics.
CSS, on the other hand, is a style sheet language used for describing the presentation and visual appearance of HTML elements. CSS allows you to control the layout, colors, fonts, sizes, spacing, and other visual aspects of web pages. With CSS, you can define styles that apply to specific elements or classes of elements, allowing consistent styling across multiple pages. CSS enables separation of the content from its presentation, making it easier to maintain and update the styling of a website.
HTML and CSS work together by linking the CSS file(s) to the HTML document using the <link> tag or by embedding CSS styles directly within the HTML using the <style> tag. The HTML structure provides the content and the CSS rules define how that content should be presented.
Here's an example of HTML and CSS usage:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<img src="image.jpg" alt="An image">
</body>
</html>
CSS
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
line-height: 1.5;
}
img {
max-width: 100%;
}
In the example above, the HTML code defines the structure and content of the web page, while the CSS code (defined in the styles.css file) sets the color, font size, line height, and other styles for the heading, paragraph, and image.
Combining HTML and CSS allows you to create visually appealing and well-structured web pages with consistent styling.
Using CSS
CSS can be added to HTML documents in 3 ways:
- Inline - by using the
styleattribute inside HTML elements - Internal - by using a
<style>element in the<head>section - External - by using a
<link>element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
Inline CSS: Inline CSS is applied directly to individual HTML elements using the style attribute. Inline styles override external and internal stylesheets, providing the highest specificity. For example:
<p style="color: blue;">This paragraph has blue text.</p>
2- Internal CSS: Internal CSS is defined within the <style> tags in the <head> section of an HTML document. It affects the elements specified within that document. Multiple internal CSS blocks can be used in a single HTML file. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This paragraph has blue text.</p>
</body>
</html>
3- External CSS: External CSS is stored in separate CSS files and linked to HTML documents using the <link> tag. External stylesheets can be shared across multiple HTML pages, promoting consistency and ease of maintenance. For example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph has blue text.</p>
</body>
</html>
CSS ( styles.css )
p {
color: blue;
}
You can learn more about CSS in depth here.