Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

Types of CSS Files

CSS (Cascading Style Sheets) allows for flexibility in how you organize and apply styles to your web pages. Here are the various types of CSS files and their usages:

1. External CSS

An external CSS file is a separate .css file that contains all the styles for your website. It's the most common way to apply CSS because it keeps the HTML clean and separates content from presentation.

Usage:

html

<link rel="stylesheet" href="styles.css">

2. Internal CSS

Internal CSS is defined within a <style> tag in the <head> section of the HTML document. This method is useful for single-page websites or when you need to apply styles that are unique to a specific page.

Usage:

html

<style>
    body {
        background-color: lightblue;
    }
</style>

3. Inline CSS

Inline CSS is applied directly to the HTML elements using the style attribute. This method is mainly used for quick, specific changes but is not recommended for larger projects due to its lack of maintainability.

Usage:

html

<h1 style="color: blue; text-align: center;">Hello, Inline CSS!</h1>

4. CSS Preprocessors

CSS preprocessors like Sass (Syntactically Awesome Style Sheets) and LESS (Leaner Style Sheets) allow you to write more complex, maintainable, and reusable CSS code by providing advanced functionalities like variables, nesting, mixins, and more. The preprocessed code is then compiled into standard CSS.

Usage:

Sass (.scss or .sass files):

scss

$primary-color: blue;

body {
    color: $primary-color;
}

LESS (.less files):

less

@primary-color: blue;

body {
    color: @primary-color;
}

5. CSS-in-JS

CSS-in-JS is a styling approach where CSS is written within JavaScript files. This method is popular in frameworks like React, allowing for component-level styles and dynamic styling based on component state.

Usage:

Styled-components (React):

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

JSS (JavaScript Style Sheets):

const styles = {
  button: {
    background: 'blue',
    color: 'white',
    padding: '10px'
  }
};

const { classes } = jss.createStyleSheet(styles).attach();

6. CSS Frameworks

CSS frameworks like Bootstrap, Tailwind CSS, and Materialize provide pre-written CSS files that can be incorporated into your project to enable ready-made, responsive, and utility-based designs.

Usage:

Bootstrap:

html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Tailwind CSS:

html

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

Pros and Cons of Each Method

External CSS: Promotes reusability and maintainability, but can result in an additional HTTP request.
Internal CSS: Good for one-off