2023 Web Development Bootcamp : Introduction to CSS -- Day 4

-

 Today, I started learning CSS. This is the fourth day of the course.  I am still working on a website for Real Madrid.

I am hoping that this will section will help me improve my La Liga tables.


Inline CSS

This was my first background color. 

<body style = "background-color: blanchedalmond;">

This was the second color that I used.

<body style = "background-color: rgb(238, 235, 232);">

I don't really like the colors but I implemented them to learn about background colors.

Note: Looking for colors in colorhunt.co

I choose this color just for fun.

<body style = "background-color: #C3F8FF;">

I choose this color for today..

<body style = "background-color: #F9F9F9;">


Internal CSS

Here are the changes that I made to the first page of the website just for fun.

       <style>
            body {background-color: #F9F9F9;
            }
            hr {
                border-style:none;
                border-top-style: dashed;
                border-color: black;
                border-width: 3px;
                height: 3px;
                width: 25%;
            }
            img{
                height: 400px;
                width: 100%;
            }
        </style>


The result is....




I just made changes to the first page.


External CSS

I generated a folder in order to use External CSS

<link rel="stylesheet" href="/css/styles.css">


The problem occurred when I looked at the 2nd page; The photo didn't look well. It just means that I need to create a new CSS style page for the 2nd page. 


But I will see if this is what I really need to do, or if I can change it in the originall style sheet.




I created a new style sheet (styles2.css) to adjust the La Liga image.






The Anatomy of CSS Syntax

Note: selector { property : value;} --- (who?, what?, how?)

I changed the color of the h1 tag for fun.


  h1 {
    color:red;
  }







CSS Selectors and Ids

The class attribute is used to differentiate all the HTML elements.

Class vs ID?

ID is unique while the class selector can be reused. The class selector can be used to group related elements.






Comments

Post a Comment

Popular posts from this blog

Space Wars- Python 3

-
Image
Space wars - Python 3 This is my first version of Space Wars  in Python 3 using C. Thomson's ideas and Turtle. I made this a few weeks ago but am only getting around to post it today.  It doesn't have any sound. CT developed his program on the Mac.  However, the sound code doesn't work with windows.  The program was developed using Turtle. I am using Python's turtle module to develop games now. I play to start with Pygame before the end of the year.
Read more

Maze Game in Python using Turtle

-
Image
This is my first attempt at a maze game in Python. The white squares are the walls and the blue circle is the first player. I will continue on with the game and post the final version.  After learning how to make basic games in Python using Turtle, I plan to move on to making simple games using Pygame.
Read more