Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Chapters Menu

CSS Introduction

CSS, or Cascading Style Sheets, is a language used to describe the presentation or styling of markup languages such as HTML, XHTML, and XML. It is used to define how web pages look, including layout, fonts, colors, and other visual aspects. CSS works by selecting elements in an HTML document and applying rules to them that define how they should be styled.

The basic syntax of CSS consists of a selector, which targets an HTML element, and one or more declarations, which specify the properties and values to apply to that element. For example, to set the font color of all headings in an HTML document to blue, you could use the following CSS code:

CSS can be included in an HTML document in several ways, including in an external file, in the document's head section, or inline with the HTML. External style sheets are often preferred because they allow for greater flexibility and control over the styling of a website, and can be reused across multiple pages.

 

CSS Code Editor

You can use the following code editors and compiler CSS code:

  • visualstudio.com (This Advanced Code editor is provided by Microsoft to create, edit and test HTML, CSS, JavaScript and many programming languages. It works in local machine for windows, mac and Linux machines)
  • Online code editors such as Jsbin, CodePen and JSFiddle are also available, that allows you to create, edit and test HTML, CSS and JavaScript online.

 

Official CSS Documentation

You can learn more about CSS from official documentation by following from this reference: https://developer.mozilla.org/en-US/docs/Web/CSS

 

Basic Syntax for an Internal CSS: 

Internal CSS is written inside the <style> element in the <head> section of an HTML document.

 

Syntax:

<head>
    <style>
    	selector {
    		property: value;
    	}
    </style>
</head>

 

Example:

<head>
    	<style>
    		h1, h2, h3 {
    			color: blue;
    		}  
    	</style>
    </head>

 

Basic Syntax for an Inline CSS: 

Inline CSS is written inside the style attribute of an HTML element.

Example:


    <h1 style="color: red;">This is a heading</h1>

 

Basic Syntax for an External CSS: 

External CSS is written in a separate file with a .css extension and linked to the HTML document with a link element. For example, this HTML document uses an external CSS file called style.css.

Example:

<html>
    <head>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<h1>CSS Overview</h1>
    	<p>This is a paragraph.</p>
    </body>
    </html>

CSS can also be used to create responsive designs that adapt to different screen sizes and devices. This involves using media queries to apply different styles based on the width, height, and orientation of the viewport.

Overall, CSS is an essential tool for web developers and designers, and mastering its syntax and capabilities is crucial for creating modern, attractive, and functional websites.