Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML CSS

Posted in HTML Tutorial
Updated on Sep 13, 2024
By Mari Selvan
πŸ‘οΈ 15 - Views
⏳ 4 mins
πŸ’¬ 0
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

  1. Inline CSS:

    HTML
    Copied
    Copy To Clipboard
    <h1 style="color: red;">Hello World</h1>
  2. Internal CSS:

    HTML
    Copied
    Copy To Clipboard
    <style>
      h1 {
        color: green;
      }
    </style>
  3. External CSS:

    HTML
    Copied
    Copy To Clipboard
    <link rel="stylesheet" href="styles.css">

CSS Selectors

Selectors define which HTML elements the CSS rules apply to. Some common selectors are:

  1. Element Selector:

    Targets elements by their tag name.

    CSS
    Copied
    Copy To Clipboard
    p { color: black; }
  2. Class Selector:

    Targets elements with a specific class attribute.

    CSS
    Copied
    Copy To Clipboard
    .intro { font-weight: bold; }
  3. ID Selector:

    Targets a unique element with an ID.

    CSS
    Copied
    Copy To Clipboard
    #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:

HTML
Copied
Copy To Clipboard
<!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>
CSS
Copied
Copy To Clipboard
/* 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:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

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

Share Your Findings to All

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy