OneBite.Dev - Coding blog in a bite size

make a css file

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

Creating a Cascading Style Sheet (CSS) File

CSS, or Cascading Style Sheets, is a styling language that defines how to display HTML elements on the screen. It significantly enhances the look and feel of a web page, making sites more visually appealing.

Code snippet for creating a CSS file

Here is a simple code snippet for creating a CSS file:

/* Creating a CSS file */

/* This is a CSS comment */

body {
    background-color: lightblue;
}

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

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

You can save this file with a .css extension, and it forms the basis of your CSS code. This code sets the background color of the entire page, the style for heading (h1), and the style for the paragraph (p) text.

Code Explanation for creating a CSS file

Let’s break down the previously given code:

  • Comments in CSS are made with /* and */. Anything written in between these symbols will not affect your code.
  • body: This tag sets the properties of your entire webpage. In our case, we are setting the background-color of the webpage to light blue.
  • h1: This tag sets the properties of all h1 elements on the page. By writing color: white; we are setting the text color of all h1 elements as white. And text-align:center; aligns the text to the center of the page.
  • p: This tag sets the properties of all the paragraph text. With font-family: verdana; we are assigning a font to the text and with font-size: 20px; we are setting the font size to 20 pixels.

After creating your .css file, you link it to your HTML file inside the <head> tag as follows:

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

Remember to replace 'styles.css' with the path to your CSS file, if it’s in a different directory.

Congratulations, you’ve created a basic stylesheet for your web page! As you continue to learn more about CSS, you will be able to style your webpages more intricately and attractively.

css