Recap on CSS

In todays seminar, Kyle recapped on how code should be presented so that other developers can read and further develop on it. We started by changing the way some code was presented from a HTML file we were told to download from a zip file. With every bit of code, HTML, CSS, Javascript, C++ or any language should be nested. This means that elements or functions within the code should be indented within their own section. To begin, we opened the application ‘Brackets’ and chose ‘Open Folder’ from the File Menu. From this Brackets opens the directory and imports all the files into the IDE. In the screenshot I took below you can see on the far left the ‘Project’ tab, this is the folders name. From this we can see that there is a index.html file and a style.css file. The screenshot I took below displays the use of nesting elements within the index.html file.

HTML:

Screen Shot 2014-11-11 at 10.23.48

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.

CSS:Screen Shot 2014-11-11 at 10.49.21

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:

padding

After experimenting with the properties within our classes we were set the task to add transition effects to our div elements. To do this, I used w3schools to help me find the appropriate executions to my task. This website is very useful in helping developer(s) find examples of code for HTML, CSS and Javascript development. So if your interested head on over and try out some of their demos- it’s free too!

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.

Screen Shot 2014-11-11 at 11.28.20

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:css

And here is the outcome when the index.html file is viewed on Chrome.

Screen Shot 2014-11-11 at 11.28.16

Next week Kyle will carry on with the concepts of HTML and CSS. Thanks for reading.

Advertisements