---
# System prepended metadata

title: COMPREHENSIVE SUMMARY OF WHAT I LEARNED IN CSS

---

What is CSS ?
CSS stands for “Cascading Style Sheet”. It is used to style HTML Documents. CSS simplifies the process of making web pages presentable. It describes how web pages should look it prescribes colors, fonts, spacing, and much more.


CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the corresponding elements. A style rule set includes a selector and a declaration block.

Selector: 
Targets specific HTML elements to apply styles.

Declaration: 
Combination of a property and its corresponding value.

HTML Element

``<h1>Hello World!</h2>``

CSS Style
h1 { color: blue; font-size: 12px; }

Where, 
Selector - h1
Declaration - { color: blue; font-size: 12px; } 
The selector points to the HTML element that you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.

Example

p {
    color: blue;
    text-align: center;
}
CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. In this example, all paragraph element (``<p>`` tag) will be centre-aligned, with a blue text color.

Ways to Apply CSS
1. Inline CSS: Directly within the HTML element using the style attribute.



<html>
	<head>
		<Learning CSS>
	</head>

	<body>

    		<p style="color: red;">This is inline CSS.</p>

	</body>

</html>



2. Internal CSS: Within a `<style>` tag in the `<head>` section``.
    
    `<html>`
`<head>`
    `<style>`
        `p` {
            `color`: `red`;
        }
    `</style>`
`</head>``
``<body>`
    ``<p>Welcome to my HackMD Article.</p>``
``</body>``
``</html>``
    


3. External CSS: The external CSS is the CSS linked to an HTML file using the ``<link>`` tag.


<html>

    <head>

    <link rel="stylesheet" href="style.css">


    </head>


    <body>

        <p>Hello World</p>
        
    </body>
</html>

CSS Features and Use Cases

1. Changing Text Color
Changes the text color of all `<p>` elements to green.

<html>
    
    <head>
        
    <style>

        p {

            color: green;

        }

    </style>
        
    </head>
    
    <body>

        <p>This text is green.</p>
        
    </body>
    
    </html>


2. Cascading in CSS


CSS resolves conflicts by prioritizing rules based on specificity and order. Shows how CSS applies rules based on specificity.





    <html>

    <head>

    <style>

        * {

            color: black;

        }

        p {

            color: blue;

        }

        #special {

            color: orange;

        }

    </style>
        
    </head>
        
    <body>
    
        <p>This text is blue.</p>

        <p id="special">This text is orange.</p>
        
    </body>
        
    </html>


3. Background Color

Sets the background color of a `<div>` to chocolate.


    <html>

    <head>

    <style>

        div {

            background-color: chocolate;

            width: 100px;

            height: 100px;

        }

    </style>
        
    </head>
        
    <body>

        <div>Hello GFG</div>
        
    </body>
        
    </html>


4. Centering Text


Centers text horizontally within a container.





    <html>
        
    <head>

    <style>

        .center-text {

            text-align: center;

        }

    </style>
        
    </head>
        
    <body>
        
    <div class="center-text">Hello, World!</div>
        
    </body>
        
    </html>


5. Adding Padding


Adds padding around the content inside a `<div>`.





    <html>

    <head>

    <style>

        div {

            padding: 20px;

            border: 1px solid black;

        }

    </style>
        
    </head>
        
    <body>
        
        <div>Hello with padding</div>
        
    </body>
        
    </html>


6. Hover Effects


Changes button color on hover for interactive effects.





    <html>
        <head>
            <style>

        button {

            background-color: greenyellow;

            color: white;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            transition: background-color 0.3s ease;

        }


        button:hover {

            background-color: blue;

        }

    </style>
    </head>
    <body>
        <button>Hover me</button>
    </body>
    </html>


7. Font Weight

Makes text bold using the font-weight property.





    <html>

        <head>

        <style>

        p {

            font-weight: bold;

        }

        </style>
        </head>
        <body>
            <p>This is bold text.</p>
        </body>
    </html>


8. Flexbox for Centering Items


Centers an item within a container using Flexbox.



    <html>

        <head>

        <style>

        body {

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            background: #f4f4f4;

        }

        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            width: 300px;

            height: 200px;

            background: #4caf50;

            color: white;

        }

        </style>

        </head>

        <body>
            <div class="container">Centered</div>
        </body>
    </html>


9. Font Size

Sets the font size of text to 24 pixels.





    <html>

    <head>

        <style>

        p {

            font-size: 24px;

        }

        </style>
    </head>
        <body>
            <p>Large text</p>
        </body>
    </html>
