OneBite.Dev - Coding blog in a bite size

create css file

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

Creating a CSS File

Creating a CSS (Cascading Style Sheets) file is an integral part of web design and web development that controls the appearance of HTML documents. Let’s simplify this process for beginners by providing a step-by-step guide on how to create a CSS file.

Code Snippet for Creating a CSS file

To create a simple CSS file, you need a text editor such as Notepad, Sublime Text, or Visual Studio Code. Here’s a basic snippet of a CSS file:

/* This is a comment */
body {
   background-color: lightblue;
}

h1 {
   color: white;
   text-align: center;
}

p {
   font-family: verdana;
   font-size: 20px;
}

Let’s save this file with a .css extension, e.g., styles.css.

Code Explanation for Creating a CSS file

In the above CSS code snippet, we have defined three properties i.e., body, h1, and p.

/* This is a comment */ - This is how you add comments in a CSS file. Comments are important for better understanding and readability of the code.

body { background-color: lightblue; } - This piece of CSS code applies a light blue background color to the entire webpage because the {body} selector targets the entire body of the HTML document.

h1 { color: white; text-align: center; } - Here, all the first heading elements (h1) of the HTML document will be displayed in white color and will be centrally aligned. This is achieved through the color: and text-align: properties respectively.

p { font-family: verdana; font-size: 20px; } - Lastly, all the paragraph texts (p) on the webpage will use the Verdana typeface and will have a font size of 20 pixels. This is set using the font-family: and font-size: properties.

Remember, to link the CSS file to your HTML document, you have to use the <link> tag in the <head> section of your HTML document like this:

<head>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

This could be your very first step towards mastering CSS. Practice more and build upon this foundation to create more complex and visually appealing webpages. Happy coding!

css