OneBite.Dev - Coding blog in a bite size

create a css file

Code snippet for how to create a css file with sample and detail explanation

Title: How to Create a CSS File

Don’t Write h1 #

Creating a Cascading Style Sheet (CSS) file is a fundamental task for any web developer who wants to spruce up their websites. This article provides a concise guide on how to create a simple CSS file and effectively manage your website’s layout and design.

## Code Snippet: Creating a CSS File

Here is a simple example of how to create a basic CSS file:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

To create a CSS file, open your preferred text editor such as Notepad, Sublime Text, or Atom then copy the code snippet above. Save the file with a .css extension, for instance, ‘styles.css’.

## Code Explanation for Creating a CSS File

In this snippet, we have two selectors: ‘body’ and ‘h1’. Selectors are used to select the element(s) you want to style. The ‘body’ selector styles the body of the HTML document while the ‘h1’ selector styles every ‘h1’ element in the document.

The code within the curly brackets {} is the declaration and it’s used to style the selected elements. Each declaration includes a CSS property name and a value, separated by a colon, ’:‘. Let’s walk through the declarations one by one:

  • background-color: lightblue; This part of the CSS code changes the background color of the entire body of the web page to light blue.

  • color: navy; This line changes the text color of the Heading one (h1) to navy blue.

  • margin-left: 20px; The margin-left property adds space to the left of the Heading 1 (h1), pushing it 20 pixels from the left edge of the page.

Remember to always end each declaration with a semi-colon ’;‘. That’s essentially how you create a CSS file and begin styling your HTML elements. Once the CSS file is created, don’t forget to link it to your HTML file using the <link href="styles.css" rel="stylesheet" type="text/css"> tag in the head section of your HTML file.

Hope this simple guide helps you start off with creating your basic CSS file. Happy coding!

css