Monthly Archive: October 2015

Understanding The Web Designing Fundamentals Of Using CSS

We live in the era of the internet where the need for advertising online is crucial for businesses that need better profit through promoting their product online. Proper online marketing will not only make it possible for you to advertise your products though; it can help encourage people to buy more and share their experiences with the product using social media. This means that if you know how to setup effective websites, such as those featuring interactive web designs, you can benefit from free. The kind of interactive web design you get will vary depending on the type of CSS (Cascading Style Sheets) programming used in the website development process.

cssInline-injection

CSS is the one responsible for how the website appears on your screen and the feel it brings to its viewers based on the environment it projects. We can even say that CSS is what gives life to a website.

When developing web design for small scale operation, developers typically use the inline injection approach which injects CSS directly to the parent HTML source code to manipulate the appearance, colour, texture, font and shape of a given element in the web page. This type of CSS is used on web pages where web designing activity is minimal but is considered effective when you only needed to change a specific part of a webpage.

Internal Style Sheet

This method of implementing CSS is similar to inline approach but instead of injecting CSS attribute directly to the HTML tag, CSS attributes are declared at the head tag of the specific HTML page using the keyword <style>. This method is commonly used when a specific web page acts as a multiple containers for other pages ceasing the need for an external source of master file CSS.

External Style CSS

A much more efficient way of implementing web designs is the use of External Style CSS. This enables developers to manipulate multiple pages with the same motif. Using a single CSS master file, the developers can declare values which correspond to specific attributes such as font, colour, size, width, height and even the position of an element in the HTML file. By using classes and ID’s to match the design declared in the CSS master file, web designers can handle multiple pages especially when the website elements are repetitive.

external-css

Here is an overview of the process that will able you to further understand external style CSS.

First, create a document HTML files using namely index.html, about.html and gallery.html in your root directory (C:\Documents\MyWebsite)

Then, create your master CSS file MyDesign.css in this directory (C:\Documents\MyWebsite\MyDesign)
Open your html files and connect them to your master CSS file by relative directory using this code
<head>
<script rel=”stylesheet” type=”text/css” src = “MyDesign/MyDesign.css“/>
<title> Web Designing Fundamentals Using CSS </title>
</head>

Once connected, you may now declare CSS attributes like background colour, font, font size and margins.
Note that there are three levels elements that react to CSS attributes depending on how you declare them.

1. The default method is multiple style sheets
h1 {
color: yellow;
margin-left: 25px;
}
In this level of declaring CSS attributes, all HTML element tags declared in with the same directory referred to as <h1> will result in text coloured yellow with a margin to the left by 25 pixels.

2. The second method is by using class:
.myClass{
color: blue;
font-size:20px
}
In this level of declaring CSS attributes, all an HTML element tags with a class name of myClass will contain text coloured blue with a font size of 20 pixels.

3. The third is by using ID’s
#myID{
color: red;
position:absolute;
}
In this level of declaring CSS attributes, all HTML element tags with an ID of myID will contain text coloured red in absolute position.

The External Style Sheet implementation of CSS is by far the most reliable source when developing web designs with dynamic content. This method will enable web designers to be as creative as possible because they can easily manage multiple web pages at once.

Bootstrap Web design (Pre – Made CSS)

Pre-made web designs are popular nowadays as the need for fast interactive dynamic designs for people who don’t have the luxury of time to develop their own websites has become more common. Business owners now have the variety of pre-made web designs to choose from; they just need to think about what’s suitable for their products and business processes. This type of design includes simple advertising web pages to far more complex e-commerce shopping carts for businesses complete with various payment options. Bootstrap offers much more flexibility than an average CSS framework because it relies on readymade libraries, enhanced by the latest in JavaScript and J-Query programming to support much more complex designs for more dynamic Web pages.