Quick Reference Study Notes for Web Designing (Advanced)

Web Design

Web design is the creation of the layout of a web page or an entire website. Web design could include anything from only creating the layout of the design as an image to the complete implementation of the design as a Web page using images, software, and programming.

Designing Your Website with HTML/HTML5

If you’re designing websites, you’re probably going to want to use standards-compliant HTML5 markup — after all, you need to use some type of markup language so that your websites can communicate, right? The table here gives you a rundown of the most popular HTML5 tags and tells you what each does.



Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics — the style and positioning — of elements within a web document written in a simple markup language.CSS syntax is made up of two parts: the selector and the declaration block inside curly brackets. Inside the declaration block you can have multiple declarations. Each declaration is made of two parts — the property and the value:


p {font-face: Georgia, Tahoma; color: #ffcc00; }


In this example:

  • p is the selector.

  • {font-face: Georgia, Tahoma; color: #ffcc00; } is the declaration block.

  • font-face: Georgia, Tahoma; and color: #ffcc00; are separate declarations.

  • font-face is a property and Georgia, Tahoma is its value.

  • color is a second property and #ffcc00; is its value.


Four Types of Cascading Style Sheets in Web Design

  • Class style (aka custom style)

Class styles can be selectively applied to any HTML element using the class=“highlight“ syntax. For example, you could create a class style called highlight that has a bright yellow background color:

.highlight {
           background-color: #FFFF33;

  • ID

ID styles are automatically applied to one HTML element on the page with the same ID. For example, if you want to add a <div> tag to hold your sidebar content, you’d give that container a semantic ID such as sidebar:

#sidebar {


  • Tag

Tag styles let you automatically redefine the style and positioning of any existing HTML tag, such as body, p, h1, or li. For instance, you could set the font styles for all your <h1> tags throughout your entire site or within a particular section:

h1 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.2em;
          font-weight: bold;
          color: #8c9292;
          text-transform: uppercase;

  • Compound

Compound styles are also automatically applied to an element based on its location within the page, such as all <h1> tags inside the <div> with the ID of sidebar, which sits inside a parent container with the ID of wrapper:

#wrapper #sidebar h1 {
          color: # CC3300;
           font-family: "Times New Roman",Georgia,Serif;

Placing CSS in Your Web Design

  • External CSS

External is the preferred way of using CSS. Ideally, you place all your CSS styles into an external CSS file, and then add a link to it in all of your site’s pages. This is the most efficient way to work, as all the pages will rely upon a single CSS file, which makes your job easier when it comes to editing your styles across an entire website.

A link to an external CSS file is added to the code on each page before the closing </head> tag:

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="all">

To import an external style sheet instead of linking to one, insert style and comment tags before the closing </head> tag:

<style type="text/css" media="all">
@import url("stylesheet.css");

  • Internal CSS

Internal is good for single-page use and during development, but not for finished websites. Sometimes designers include internal CSS on a single page to override any links to external CSS files. To add CSS internally to a single page, place your CSS styles between a pair of <style> tags before the closing </head> tag on your page:

<style type="text/css">
body { background-image: url("images/pattern.gif"); }
p { font-family: verdana, arial, sans-serif; }


  • Inline CSS

          Occasionally, you may need to override both external and internal CSS styles using inline CSS. Inline is not advised unless it is the best or only way to apply a style to an object or element in the HTML. To add CSS inline with your code, add the style definition to your opening HTML tag:

<p style="color: #3399CC; font-size: 18px;">The Solar System</p>


This is the basic step for web designing. Now you can use latest framework for creating web pages with web design.


What is a framework?

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.

In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.


Take a look at the main frameworks that are open for developers to use in 2018.

1. Bootstrap
Bootstrap is known to rate highest in the popularity charts. The Bootstrap 3 edition is the latest offering. This resource makes use of grid system, navigational tools, amongst others. Also, start-up guidelines are made available to the users. The width layout can be fixed or fluid. A bootstrap-enabled website is also supported by mobile technology thereby making it viewable on mobile phones.

2. Foundation
The category of front-end frameworks is inclusive of Foundation. It can be learned easily and recommended for new users. This resource is useful for developing responsive web-pages, in addition to designing applications for email, mobile and web templates. Some of the components related to this framework are media, library containers, an extensive catalog of plug-ins, and navigational resources.


3. Material UI

The Material UI front-end framework is a responsive UI design library, which is known to be compatible with Google’s features. Due to its elaborate nature, it is not applicable for new web-based projects. This CSS processor makes use of React components and is preferred by developers for its customizable web design tools.

4. Materialize

This front-end responsive development framework is known to conform to Google’s specifications. Its components on offer are forms, cards, icons, and buttons. The two available versions are SASS-enabled and the standard-type. An inbuilt feature consists of an IZ grid column that is useful for web page layouts. Amongst its features are included the drag-out mobile menus, material-based design shadows, colors, typography, ripple-effect animation, and SASS mixins. The popular devices support the websites created via this framework.

*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree