in Coding

CSS

CSS, or Cascading Style Sheets, is a style sheet language used to describe the presentation of a document written in HTML. CSS defines how elements should be rendered on screen, on paper, or in other media. This lesson will delve into the basics of CSS, its history, and its significance in web development.

Syntax of CSS

CSS is made up of selectors and declarations. A selector targets an HTML element, and declarations, enclosed in curly braces, define how the selected elements are styled. Declarations are composed of properties and their values, which determine the appearance of the elements.

History of CSS

CSS was developed by the World Wide Web Consortium (W3C) in 1996. It was created to enable the separation of document content (written in HTML) from document presentation, including elements such as layouts, colors, and fonts. This separation can improve content accessibility and provide more flexibility and control in the presentation of web pages.

Role of CSS in Web Development

CSS plays a crucial role in web development by controlling the layout of multiple web pages all at once. It enhances user experience by enabling the creation of visually engaging web pages without altering the underlying HTML.

CSS Selectors and Properties

CSS selectors target HTML elements to apply styles. Common selectors include element, class, and id selectors. CSS properties define the styles that will be applied to the elements, such as color, font, spacing, layout, and many others.

Enhancing the “Hello World” Script with CSS

To apply CSS to our “Hello World” HTML script, we will use inline, internal, or external styling methods. For simplicity, we’ll use internal styling within the <head> section of our HTML document.

  1. Open Your HTML File: Reopen your hello_world.html file in your text editor or IDE.
  2. Add CSS Styles: Inside the <head> section of your HTML document, add a <style> tag. Within this tag, we will define our CSS rules. We’ll change the color of the <h1> tag to blue, make the paragraph (<p>) color red, and set the background color of the body to yellow.
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
<style>
body {
background-color: yellow;
}
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Example with Hexadecimal Colors
Here is the “Hello World” HTML code snippet you provided, with the colors changed to hexadecimal values:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
<style>
body {
background-color: #FFFF00; /* Yellow */
}
h1 {
color: #0000FF; /* Blue */
}
p {
color: #FF0000; /* Red */
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

In this example:

  • #FFFF00 is the hexadecimal representation for yellow. It means full intensity (FF) of red and green, and no intensity (00) of blue.
  • #0000FF represents blue, with no intensity of red and green (00), and full intensity of blue (FF).
  • #FF0000 stands for red, indicating full intensity of red (FF) and no intensity of green and blue (00).

Using hexadecimal color codes allows for a wide range of colors—over 16 million combinations—enabling web designers and developers to use precise colors in web design.

  1. View Your Styled Web Page: Save your changes and reopen your hello_world.html file in a web browser. You should now see a blue “Hello World!” heading, and a red paragraph, all on a yellow background.

This exercise demonstrates how CSS can enhance the visual appearance of HTML documents. By separating the structure (HTML) from the presentation (CSS), web developers can create more maintainable and accessible web content.

Conclusion

CSS is an indispensable tool in web development, allowing for the creation of visually appealing and consistently styled web pages. Understanding both the syntax and the role of CSS will enable you to craft sophisticated web designs. The “Hello World” script serves as a foundational example, illustrating how CSS can dramatically change the look and feel of basic HTML content.

Here are some commonly used CSS properties to explore further:

  • color: Sets the color of the text.
  • background-color: Sets the background color of an element.
  • font-size: Controls the size of the font.
  • border: Adds a border around elements.
  • margin: Controls the space around elements.
  • padding: Controls the space between an element’s border and its content.
  • text-align: Aligns the text within elements.
  • display: Determines the display behavior of an element.

As you become more familiar with CSS, you can start experimenting with more complex selectors and properties to create intricate and responsive web designs.

 

 

Learning to Read

JavaScript