CSS

Visual Appearance







Setting Up CSS


CSS must be linked in the <Head> of all HTML files you want to be affected by that .css file, you can have as many .css files as you want or need.

<link rel="stylesheet" href="../CSS/nameOfFile.css"> is the format for linking a .css file.
../CSS is the name of the folder I put my .css files in, organizing your .css and .html files into respective folders is a good idea.

The ../ command tells the .html file this is being linked in that the folder with the .css file is outside of the folder the .html file is in,
the following / is a command for opening files.


Making and Using Classes


All of the follwing is done inside of a .css file.


Here's an example for the CSS used to style the text seen inside each button.

The class is called .topic and is used inside of class="" attributes to affects tags in .html files. Putting a period before a class you are naming is essential.
The same is used for my .bocks class used to make all the Blue Bordered Boxes this text is placed in:


A period is not needed if you are affecting all of a certain tag, for example this CSS that affects the <body> of all my webpages:

The same is applicable for affecting all <p> or <footer> tags placed in your .html file.

To utilize the CSS you've made, link it to the desired .html file(s) and attach Classes to tags you want affected.

Writing <div class="x"> Affects all content inside, unless more Classes are used on specific elements inside (either more Classes on further <div> tags inside, or Classes inside <span> tags). </div>