After nesting the appropriate elements we then moved onto linking a CSS file to the HTML. We can do this by adding a bit of code in the <head> element. Here is the piece of code: <link rel=”stylesheet” href=”/css/styles.css”>
It was important that the CSS file was being linked correctly, so the use of the forward slashes was vital to naviage through the directory of the ‘Project’ folder.
Once the CSS file was linked to the HTML, we then moved onto writing classes within the style.ccs file. With <div> elements the developer(s) can add classes to their content. The developer(s) simply write it like this: <div class=”insert_class_name_here”>
Once a class has been created, the developer(s) are required to create the class within the CSS file. Below is a screenshot of some CSS code with the Brackets IDE. Notice how each class is started with a full stop, this must be implemented each time when creating a class. So in the screen shot below we can see that the container class has been created, along with box and special box. If you look at the HTMl screenshot above, we can see how these classes have been named within the div elements.
Of course within each class the developer(s) can add unique properties such as background colours, padding and so forth. What we can do as well is that each of the <div> elements can contain more than one class by simply adding the names in. Here is an example: <div class=”box clear-box”> here we can see that the box and clear-box classes have been inserted into this div.
Using the code above from both the HTML and CSS files, we can get a website that responds like this:
I added a mouse hover effect to each div element so when the user places the mouse over them, they change colour. I also made the div elements rotate 180 degrees in real time.
To get this effect I first needed to add some code into the <style> element of the HTML file as seen below.
Once I had done that, I then created a new. As you can see below, the .box:hover is the new class that defines the CSS transition in the class box. Kyle also explained the use of the margin property and how it can be used to centre divs on a webpage. The float element is also used within CSS so that divs can be displayed on the same level of view instead of being stacked underneath each other. The clear element in CSS does the opposite to float, so anything within the class created is put at the bottom of the web page. See the code below and try to understand what each class does within the HTML screenshot above:
And here is the outcome when the index.html file is viewed on Chrome.
Next week Kyle will carry on with the concepts of HTML and CSS. Thanks for reading.