Getting started with CSS

Creating your first CSS (Cascading Style Sheets) file is a straightforward process. Here's a step-by-step guide:

Choose a Text Editor

Select a text editor or code editor to write your CSS code. Popular options include Visual Studio Code, Sublime Text, Atom, or Notepad++.

Create a New File

Open your chosen text editor and create a new file. This will be your CSS file.

Save the File

Save the file with a .css extension. Choose a descriptive filename, such as styles.css.

Write Your CSS Code

Start writing your CSS code within the file. Here's a basic example to get you started:

/* styles.css */ /* CSS comment: This is a comment */ /* CSS rule for styling all <h1> elements */ h1 { color: blue; /* Set text color to blue */ font-size: 24px; /* Set font size to 24 pixels */ text-align: center; /* Align text to the center */ } /* CSS rule for styling elements with class "paragraph" */ .paragraph { font-style: italic; /* Italicize text */ line-height: 1.5; /* Set line height to 1.5 times the font size */ }

Link Your CSS File to HTML

To apply the styles in your CSS file to an HTML document, you need to link the CSS file to the HTML document. Add the following line within the <head> section of your HTML document:

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

Replace "styles.css" with the path to your CSS file if it's located in a different directory.

Full Source:

HTML File (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First CSS Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Welcome to My Website</h1> <p class="paragraph">This is a paragraph with some text. It will be styled according to the CSS rules defined in the external stylesheet.</p> <p>This is another paragraph without any specific class.</p> </body> </html>

The HTML file (index.html) includes a <link> tag in the <head> section, which links to the external CSS file (styles.css).

CSS File (styles.css):
/* styles.css */ /* CSS comment: This is a comment */ /* CSS rule for styling all <h1> elements */ h1 { color: blue; /* Set text color to blue */ font-size: 24px; /* Set font size to 24 pixels */ text-align: center; /* Align text to the center */ } /* CSS rule for styling elements with class "paragraph" */ .paragraph { font-style: italic; /* Italicize text */ line-height: 1.5; /* Set line height to 1.5 times the font size */ }

The CSS file (styles.css) contains CSS rules to style the <h1> and <p> elements. The <h1> elements are styled with blue color, a font size of 24 pixels, and centered text. The elements with the class paragraph are styled with italic text and a line height of 1.5 times the font size.

Once the external stylesheet is linked to the HTML document, the CSS rules defined in the stylesheet will be applied to the corresponding HTML elements based on the selectors used.

Save and Test

Save both your CSS file and HTML file. Open the HTML file in a web browser to see the applied styles.

run this source code Browser View

Welcome to My Website

This is a paragraph with some text. It will be styled according to the CSS rules defined in the external stylesheet.

This is another paragraph without any specific class.

That's it! You've created your first CSS file and linked it to an HTML document. You can now continue to add more styles to your CSS file and see how they affect the appearance of your HTML content.





Related Topics
  1. What is CSS?
  2. CSS Syntax
  3. Different ways of writing styles in CSS
  4. Advantages and Disadvantages of CSS
  1. Difference Between CSS, CSS2 And CSS3