Basics of CSS

This lesson gives a brief Introduction to CSS (Cascading Style Sheets) and how they are used with HTML.

We’ll cover the following

  • Introduction
  • Linking CSS with HTML
    • Inline CSS
    • Internal CSS
    • External CSS
    • Page layout techniques
    • Animations
    • Preprocessors
      • SASS & LESS

Introduction

CSS, like HTML, isn’t always a programming language, it’s a styling language for HTML. To understand CSS, it’s really worth recalling the primary reason of HTML. HTML became originally designed as a structural language, however with time and updates, it’s been become a tool for presentation which makes use of fonts, colors, and other visible elements.

The purpose of CSS is to restore HTML to its original repute as a structural language. In different words, cascading fashion sheets are a way to format your web page layout, textual content, fonts, snap shots, and nearly anything that controls the appearance and feel of your internet web page. This leaves HTML with the structural work simplest.

Linking CSS with HTML

There are three ways to add CSS to the HTML code.

Inline CSS

CSS is said to be added ‘inline’ when it is used in the style attribute of HTML tags. This is inefficient and not scalable because each individual tag would have to have the CSS inserted. This method is generally never used as it is extremely impractical.

HTML Input

<h3 style ="color:blue">Blue Heading!</h3>

Output–>

Internal CSS

You can use <style> tags within the <head> of the HTML to define the style of a certain tag. For instance, in the example below, all h3 headings are defined to be blue. This approach is clearly better from using CSS inline because this makes the code less repetitive, easier to read and write, and overall economical.

HTML

<html>
 <head>
  <style>
   h3 {color: blue;}
  </style>
 </head>
 <body>
   <h3>Internal CSS</h3>
 </body>
</html>

Output–>

External CSS

CSS is most commonly written in a separate file and linked up with the HTML. The advantage of doing so is that it can be reused by other HTML files, updating it becomes simpler, and web pages can be tailored for different users, browsers, and platforms.

You can do so by writing a self-closing link tag in your HTML head like the following,

<link rel="stylesheet" href="cssfilename.css">

the rel attribute of the link element above tells the HTML to import a CSS file.

HTML

<html>
 <head>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <h3>External CSS</h3>
 </body>
</html>

CSS

h3{
  color: blue;
}

Output–>

CSS usage goes far beyond changing the colors of headings. It gives you complete control over the look of your page down to the very last pixel.

Page layout techniques

CSS page layout techniques provide us with an efficient way to layout, align, and distribute space among elements within your document, even when the viewport and the size of your elements are dynamic or unknown. Some essential page layout techniques involve Flexbox and Grid. To learn more about Flexbox, check out our course Understanding Flexbox .

Animations

CSS even provides us with a way to animate HTML elements without having to use JavaScript or Flash! So you can move things around with pure CSS.

Preprocessors

A CSS preprocessor is a scripting language that extends CSS and then compiles it into regular CSS.

SASS & LESS

Syntactically Awesome Style Sheets and Leaner Style Sheets are language extensions for CSS that allow you to use more conventional programming constructs such as variables, conditionals, and loops to generate CSS. The CSS preprocessor converts the SASS code into regular CSS.

In the next lesson, we’ll get an introduction to the world’s most popular programming language, JavaScript!

Also Read – Basics of HTML


That’s it!
You have successfully completed the post.

Peace Out!


Check Out Deals on -> Amazon , Flipkart , Myntra , Adidas , Apple TV , Boat , Canva , Beardo , Coursera , Cleartrip , Fiverr , MamaEarth , Swiggy


6 Comments

  1. Link exchange is nothing else except it is only placing the other person’s webpage link
    on your page at suitable place and otһer person will also do same in favor of you.

Leave a Reply

Your email address will not be published.