An In-Depth Exploration of HTML5 and CSS: Types of CSS with Examples
Introduction
HTML5 and CSS are the dynamic duo of web development. HTML5 provides the structure and content of a web page, while CSS controls the presentation and layout. In this article, we will delve into the world of CSS and explore its various types with practical examples.
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. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.
1. Inline CSS
Inline CSS is applied directly within HTML tags. It’s useful for making quick, one-off style changes to individual elements. Here’s an example:
2. Internal CSS
Internal CSS is defined within the HTML document’s <style> element in the <head> section. It's helpful when styling multiple elements on a single page:
3. External CSS
External CSS is placed in a separate .css file and linked to HTML using the <link> tag. This is the preferred method for large projects to maintain consistency and manage styles:
4. CSS Selectors
Selectors are patterns used to select and style HTML elements. There are various types of selectors, including:
- Element Selector:
Targets all instances of an HTML element. For instance, p selects all <p> elements on the page.
- Class Selector:
Targets elements with a specific class attribute. For example:
And in HTML:
ID Selector:
Targets a single element with a unique ID. For example:
And in HTML:
5. Cascading Order
CSS follows a cascading order of precedence. Styles are applied from external to internal to inline, with inline styles having the highest priority. If there are conflicting styles, the most specific one prevails.
Conclusion
CSS plays a vital role in web development, allowing you to control the presentation and layout of web pages. Understanding the different types of CSS and how to use them can help you create visually appealing and functional websites. Remember to use external CSS for maintainability and scalability while reserving inline and internal CSS for specific cases. Experiment with various selectors to fine-tune your styles and enhance your web development skills.
Thank you for reading this blog post!
I wish you all the best in your endeavors and hope you found this information helpful.
