Design Hello World in CSS with Free Codes

Here we are going to Design the Hello World in CSS. Which teaches you a basic concepts about CSS how it’s work how we use that concepts in our code.

HTML Code

<h1>Hello World!</h1>

• This line is an HTML element that creates a heading (level 1) with the text “Hello World!”. The <h1> tag defines the largest and most important heading in HTML. It is often used for titles or important headings on a webpage.

CSS Code

$blue: #a3d5d3;

body {
  background-color: $blue;
}

• $blue: #a3d5d3; – This line is written in SCSS (Sassy CSS), a preprocessor for CSS that allows variables, nesting, and more. Here, a variable $blue is being defined with the value #a3d5d3, which is a hexadecimal color code (a light teal color). The variable can be reused throughout the SCSS to maintain consistency and make updates easier.
• body: The body tag in HTML represents the main content area of a webpage. Styling the body affects the entire page.
• background-color: $blue;: This line is intended to set the background color of the body to the color defined by the $blue variable. However, this code will only work if processed through a preprocessor like SCSS, which will convert $blue to #a3d5d3 in the final CSS output. In regular CSS, this would cause an error because $blue is not a valid CSS syntax.

JavaScript Code

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

• document.getElementsByTagName("h1"): This function retrieves all the <h1> elements in the document as an HTMLCollection (an array-like object).
• [0]: This accesses the first <h1> element in the collection. Since HTMLCollections are zero-indexed, [0] refers to the first <h1> on the page.
• .style.fontSize = "80px";: This sets the font-size CSS property of the selected <h1> element to 80px. This will make the text inside the <h1> significantly larger.

Complete Codes