OneBite.Dev - Coding blog in a bite size

link css and html

Code snippet for how to link css and html with sample and detail explanation

Cascading Style Sheets (CSS) and Hypertext Markup Language (HTML) are fundamental technologies for designing and building webpages. This article serves as an introductory tutorial on linking CSS with HTML.

Code snippet for Linking CSS and HTML

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to My Web Page</h1>
</body>
</html>
/* styles.css file */
h1 {
    color: blue;
}

Code Explanation for Linking CSS and HTML

Here is a step-by-step analysis of what the above code does.

  1. <!DOCTYPE html> : This line is used to declare the document type and version of HTML. It is the root element of an HTML page.

  2. <html> : This is known as the root element. All other tags are nested inside this.

  3. <head> : This tag is used to contain meta-information about the document such as its title and linked files.

  4. <title> : This tag sets the title of the webpage, that will appear in the browser’s title bar or tab.

  5. <link rel="stylesheet" type="text/css" href="styles.css"> : This link tag is written in the head section and is used to connect the HTML file to the CSS file named ‘styles.css’. The rel attribute defines the relationship between the HTML and the linked file, in this case, a ‘stylesheet’. The type attribute specifies the MIME type, here ‘text/css’.

  6. <body> : This tag contains the content that is rendered on the webpage.

  7. <h1> : This tag is used to create a heading on the page. The CSS file referenced earlier will color this heading blue.

  8. The CSS block h1 {color: blue;} : This code resides in the ‘styles.css’ file. It is targeting the h1 element in the HTML and is setting the color of the text to blue.

This relatively simple code demonstrates how to link CSS and HTML to jointly build a styled webpage.

css