Come Join our Internship Program with Us

Web Designing using CSS

This project-based lesson series will teach you to Cascading Style Sheets (CSS), a stylesheet language used to govern the presentation of webpages, by constructing a personal website based on our example site. Though our sample site contains Sammy the Shark, if you want to personalize your site, you may replace Sammy's information with your own.

CSS, like HTML and JavaScript, is a key technology of the World Wide Web. If you know basic HTML and want to improve your front-end programming abilities, studying CSS is an excellent next step.

The first part of this instructional series will explain CSS through hands-on activities, while the second half will give instructions for duplicating the example.

By the end of this CSS instructional series, you'll have files suitable for cloud deployment as well as a grasp of how to continue customising the site's look with HTML and CSS. You'll also have a solid basis for learning further front-end web development skills (like JavaScript) and frameworks (like Tailwind).

Prerequisites

Visual Studio Code or Atom are examples of code editors. This series will make use of Visual Studio Code as our default code editor, but you are free to use any code editor of your choice. If you use a different editor, certain steps may need to be slightly adjusted.

A browser such as Firefox or Chrome. This lesson series will make use of Firefox as our default browser, but you are free to use whichever browser you choose. If you use a different web browser, certain instructions may need to be slightly adjusted.

Two distinct profile photographs, graphics, or avatars (optional) for personalising your site.

HTML expertise is required. If you are unfamiliar with HTML or would want a refresher, you may start with the first ten tutorials in our series How To Build a Website With HTML.

How HTML and CSS Interact

An HTML file that provides content like text, picture links, and HTML tags and a CSS file that contains style guidelines are generally the two components of an HTML and CSS-built website. An HTML file, for instance, may contain paragraph text and header text that have both been marked up using HTML tags.

The browser may be instructed to make all header text 20 pixels in size and all paragraph text blue using the accompanying CSS file. Without you needing to provide style instructions in the HTML content, these CSS style rules would therefore apply to all header and paragraph text wherever they appeared. HTML document each time.

CSS is an effective technique for organising material on websites. In order to structure and design the layout of a webpage, content boxes may be made using CSS by assigning size, colour, and other characteristics to HTML elements.