sriparthu
CSS Introduction

CSS Introduction

sri parthu's photo
sri parthu
·

2 min read

Table of contents

Define CSS

  • CSS stands for Cascading Style Sheets. It is a language used to style a web page, describing how elements are displayed on the web page, paper, or screen. It saves a lot of work and can control multiple web pages all at once. External styles are stored in CSS files.

Why Use CSS

  • CSS is used to define the style for the webpage, including the design, layout, and variations displayed on different devices and screen sizes.

CSS Syntax

  • A CSS rule consists of a selector and a declaration block.

Explanation of code

  • The CSS selector selects the HTML element to style.

  • The curly braces {} contain one or more CSS declarations.

  • In each declaration block, there is a property and a value separated by a colon (:) and ending with a semicolon (;).

  • Here, color is the property and red is the value for the h1.

  • Here again, font-size is the property, and the value is 12px for the h1.

Types of CSS

  • Cascading Style Sheets (CSS) are used to style the layout of a webpage. There are three main ways to use CSS: inline CSS, internal CSS, and external CSS.

    • Inline CSS: CSS styles are directly applied to the HTML element using the <style> attribute.
    <h1 style="color: red;">This is heading</h1>
  • Internal CSS: CSS styles are applied through the <style> tag inside the <head> tag of the HTML document.
    <head>
        <style>
            h1{
                color: brown;
            }
        </style>
    </head>
    <body>
        <h1>This is heading</h1>
    </body>
  • External CSS: CSS styles are written in a separate file with a⁣ .css extension and linked to the HTML file using the <link> tag inside the <head> tag.
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is heading</h1>
</body>

h1{
    color: chocolate;
}

Comments

  • CSS comments are not shown in the browser but are displayed in the source code.

  • It explains the use of code and starts with /* and ends with */.

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥

HTML5CSSJavaScriptReactJavaSpringbootSpringFrontend Developmentbackend