what is css?

css (cascading style sheets) is a stylesheet language used to control the layout and appearance of elements on a webpage. it allows us to add colors, fonts, layouts, and animations to web pages, making them visually appealing and user-friendly.

let's understand some sytnax real quick before we keep going. based on what we covered in the general html page, we understand what elements are. css allows us to select and modify them.

there are three different ways to write css:

inline –-> applied directly to an HTML element using the style attribute


                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <title> my first website! </title>
                </head>
                <body>
                    <h1 style="color: blue; font-size: 24px;"> my name is emily </h1>
                </body>
                </html>

internal –-> written within a < style > tag inside the HTML document.


                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <title> my first website! </title>
                    <style>
                        h1 {
                            color: blue;
                            font-size: 24px;
                        }
                    </style>
                </head>
                <body>
                    <h1> my name is emily </h1>
                </body>
                </html>

external –-> stored in a separate .css file and linked to the HTML document within the header

                h1 {
                    color: blue;
                    font-size: 24px;
                }

then we would link this file. say for example, we named it myfirstsite.css

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <title>my first website!</title>
                    <link rel="stylesheet" href="myfirstsite.css">
                </head>
                <body>
                    <h1> my name is emily </h1>
                </body>
                </html>

i personally think it's good practice to use this last option as it makes the html document less clunky and easier to navigate. but, you're welcome to do whatever comes naturally to you

css properties

this is a super basic example -->

you can change a bunch of properties besides color. here are a few examples to play with and experiment!

font and text styling -->

            body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                background-color: rgba(228, 228, 253, 0.43);
            }
    
            h1 {
                color: rgb(255, 255, 255);
                font-style: oblique;
                text-underline-offset: 10px;
                text-shadow: 2px 2px 8px  #4402fc;
                /* h-shadow (position of horizental line), v-shadow (position of vertical line), blur-radius (how much were blurring), color */
            }
    
            a {
                color: cornflowerblue;
            }
    
            a:visited {
                color: rgb(124, 193, 20);
            }
    
            ::selection {
                color: rgb(255, 255, 255);
                background: rgb(6, 97, 243);
            }

loading in an external font -->

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <title>my first website!</title>
                <link rel="preconnect" href="https://fonts.googleapis.com">
                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                <link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap" rel="stylesheet">
                <style>
                    body {
                        font-family: 'Libre Barcode 39 Extended Text', cursive;
                    }
                </style>
            </head>
            <body>
                <h1>this text uses the Libre Barcode 39 Extended Text font!</h1>
            </body>
            </html>

here i am showing you that this in fact works!

you can click here to access google fonts. take some time to meander... maybe pick one out...

background images -->

            body { 
                background-image: url('ocean.jpg');
                background-size: cover;
                background-position: center;
            }

example

in the example above, i put the background image 'ocean.jpg' in the p tag