HTML/CSS Tutorial

Introduction: This is the first part in my CSS Styling tutorial! Hopefully, it should be a detailed series, but not too long.

CSS stands for Cascading Style Sheet and is used in conjunction with HTML to create every web page from the most basic design to the most interactive website. While HTML gives the elements to the page, CSS is used to give the styling of it which includes everything from colours to animations. CSS is a very easy language to pick up and is essential to anyone wanting to learn about Web Design. The latest version of CSS is CSS3.

This tutorial will teach you on how to create a moving background image using only CSS. I uses @keyframes rules i this tutorial to animate the background. To understand more about this rule, let me provide the definition and usage of this rule. with the @keyframes rule, you can create animations. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

In this tutorial you will learn how to change div background when another div is hovered. I used this "~" symbol in CSS to perform changing div color when another div is hovered. The "~" symbol means that it will only select the first element that is immediately preceded by the former selector. Copy and apply the code bellow.

Creating Our HTML Display

The code bellow provide the visual display of our demo.

In this Tutorial you will learn on how to make a horizontal drop down menu using only CSS and HTML. The best thing about this tutorial is I didn't used jquery and javascript for this menu. This is useful for thus programmer who want to make drop down menu without using jquery or javascript. This menu is easy to integrate in your current website, enjoy this tutorial and fallow the steps bellow.

Creating Our HTML Display

The code bellow include the

• tag that display our menu.