HTML Basic
HTML Entity
- HTML Entity
- HTML Alphabet Entity
- HTML Arrow Entity
- HTML Currency Entity
- HTML Math Entity
- HTML Number Entity
- HTML Punctuation Entity
- HTML Symbol Entity
HTML IndexedDB
HTML Reference
HTML CSS
Photo Credit to CodeToFun
Introduction
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the look and feel of elements written in HTML by specifying properties like colors, fonts, spacing, and positioning. HTML and CSS work together to build visually appealing and responsive websites.
What is CSS?
CSS stands for Cascading Style Sheets. It is a stylesheet language that describes how HTML elements should be displayed on a webpage. With CSS, you can control the layout, design, and presentation of your web content.
How CSS Works with HTML
HTML defines the structure of a webpage, while CSS determines the visual appearance. By linking a CSS file or writing CSS directly in your HTML, you can modify styles like fonts, colors, margins, and more, without altering the HTML structure.
Types of CSS
There are three main ways to apply CSS to an HTML document:
- Inline CSS: CSS styles applied directly within HTML elements using the
style
attribute. - Internal CSS: CSS written within the
<style>
tag in the<head>
section of the HTML document. - External CSS: A separate CSS file linked to the HTML document using the
<link>
tag.
CSS Syntax
CSS rules consist of selectors and declarations. The selector targets the HTML element, and the declaration defines the style. A declaration contains a property and a value.
Example
Common CSS Properties
- Color: Sets the text color of an element.
- Font-size: Controls the size of the text.
- Margin: Defines space around elements.
- Padding: Adds space inside an element, between the content and the border.
- Background-color: Sets the background color of an element.
- Width and Height: Control the dimensions of an element.
How to Apply CSS
Inline CSS:
HTMLCopied<h1 style="color: red;">Hello World</h1>
Internal CSS:
HTMLCopied<style> h1 { color: green; } </style>
External CSS:
HTMLCopied<link rel="stylesheet" href="styles.css">
CSS Selectors
Selectors define which HTML elements the CSS rules apply to. Some common selectors are:
Element Selector:
Targets elements by their tag name.
CSSCopiedp { color: black; }
Class Selector:
Targets elements with a specific class attribute.
CSSCopied.intro { font-weight: bold; }
ID Selector:
Targets a unique element with an ID.
CSSCopied#header { background-color: yellow; }
Best Practices
- Keep CSS separate: Use external CSS files to keep your HTML clean.
- Use classes over IDs: Classes are more reusable than IDs, which should be unique.
- Mobile responsiveness: Use media queries to ensure your website looks good on all devices.
Example
Hereβs a basic example of how CSS works with HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="intro">Welcome to My Website</h1>
<p>This is a simple example of using CSS with HTML.</p>
</body>
</html>
/* styles.css */
body {
background-color: #f0f0f0;
}
h1 {
color: navy;
}
p {
font-size: 16px;
color: #333;
}
Conclusion
CSS is a fundamental tool for web design that works hand-in-hand with HTML to create visually appealing, user-friendly websites. By understanding how to apply CSS, style HTML elements, and use selectors effectively, you can greatly enhance the aesthetics and usability of your web projects.
π¨βπ» Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee