OneBite.Dev - Coding blog in a bite size

use css

Code snippet for how to use css with sample and detail explanation

Title: Using CSS to Design Websites

Cascading Style Sheets (CSS) is an indispensable tool in modern web design, offering endless possibilities for creativity. It is primarily used for the layout and design of web pages, and this article aims to provide a simple walkthrough on how to use CSS to design a basic webpage.

Code snippet for Basic CSS Structure

Here is a simple example of how you can design your webpage using CSS:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of a webpage designed with CSS.</p>
  </body>
</html>

CSS (styles.css):

body {
  background-color: lightblue;
}

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

Code Explanation for Basic CSS Structure

In the first part of the HTML code, a link to the CSS file ‘styles.css’ is included using the <link> tag within the <head> tag. This is how the HTML file knows where to find the CSS rules for the webpage.

In the ‘body’ of the HTML document, there are two elements - a Heading (h1) and a Paragraph (p).

In the linked CSS file, two sets of CSS rules have been defined. The first set of rules is applied to the ‘body’ of the HTML document. The ‘background-color: lightblue;’ line sets the background color of the webpage to light blue.

The second set of rules is applied to all h1 elements within the HTML document. The ‘color: navy;’ line sets the text color of the heading to navy. The ‘margin-left: 20px;’ line adds a left margin of 20 pixels to the heading.

This is a simplified example, CSS can be applied in many more ways, including styling individual elements, classes of elements, and even only certain states of an element (like when a button is hovered over with a mouse). As you become more comfortable with CSS, you can use it to make your websites more interactive and visually appealing.

css