Learn the basics of CSS
CSS is an acronym for Cascading Style Sheet and it is style sheet language and not a programming language. It is crucial for web design as it determines how a website displays inside a browser. Style sheets are loaded inside a browser, when a website is visited. The entire file is loaded and therefore all the style tags. Style sheets work on the ID’s and classes of HTML tags. If you don’t know what an HTML tag is, right click inside any browser and choose ‘View page source’ to see what an HTML page looks like. At the very top of the page or maybe a little bit further down (depending how the page is structured), you should see something that looks like thisand they can all look different, but the important part is thepiece. This is what is called an HTML tag and there could be thousands on a web page. These tags can and most have classes or ID’s and we use CSS to target those classes, and give elements that have a class a certain number of styling properties.
There is a huge variety of styling properties and many many online tutorials that tell you what each property does. This is just a simple introduction to css. To see CSS in action, click on the Tools menu (Firefox) or ‘More tools’ (Chrome) menu and choose web developer tools. A new window should open and it will be docked on the bottom (or left or right) of the browser. The console will be selected but choose the top most left button, which represents a screen. You can then select elements on the webpage and once selected, that element’s properties will appear in the developer tools window. It could look like the main picture.
That is the body tag of an HTML page and it represents all visible content on a HTML page. All visible content appear between the opening body tag (<body>) and the closing body tag (</body>). The top right shows the name of the style sheet where these properties are specified, and if you hover it, you should see the complete path to that file. You can click on those properties to change them. The change is only temporary, since for the change to be permanent, the file will have to be changed at that specific place.
Here are some resources if you like to learn more:
YouTube:
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiD65S5xI3-AhWGYMAKHUBTBNsQtwJ6BAgPEAI&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOXGznpKZ_sA&usg=AOvVaw1Cc4NXK3bpOBZl0HWEw5VZ
Websites
https://www.freecodecamp.org/news/want-to-learn-css-heres-our-free-20-part-course-9fb3dcb0a971/