Introduction to CSS Basics

You are here:
Estimated reading time: 2 min

CSS Basics Brief 

This is a guide for CSS Basics – CSS or Cascading Style Sheets. It is a language made for describing the presentation of Web pages, including colours, layout, and fonts, it allow us to present web pages in a presentable way to the users.

CSS was designed to make style sheets for the web. It operates separately of HTML and also can be used without XML-based markup language. let’s get introduced to the steps :

  •         Sheets: Writing our style in different documents
  •         Style: Adding designs/Styling our HTML tags
  •         Cascading: Falling of Styles

CSS Editors / Tools

Which editor is used for CSS?

There are several CSS editors software that are very popular we mention some :

  1. Brackets
  2. Visual Studio Code
  3. Atom
  4. Komodo Edit (Simple)
  5. Notepad++(Great for HTML & CSS)
  6. Simple) Espresso(For Mac OS  User)
  7. Sublime Text (Best Editor)

CSS Syntax

There are several syntaxes in CSS although the basic syntax in CSS is simple, but the basic syntax of CSS will not be enough.

You must get familiarized to the syntax for

  1. Color syntax
  2. Margin Syntax
  3. White space syntax
  4. Syntax for CSS pseudo classes
  5. Pseudo-element syntax
  6. attribute selector syntax
  7. background color syntax
  8. borders syntax
  9. padding syntax
  10. height and width syntax
  11. fonts syntax
  12. syntax for links, tables, lists.

 CSS Comment

  • There are 3 ways to write CSS in HTML files.
    • Inline CSS
    • Internal CSS
    • External CSS
  • Priority order
    • Inline > Internal > External

  Inline CSS

Before CSS, this was the only way to apply styles.
it wasn’t an efficient way to write because there is a lot of redundancy
The idea of ​​separation of concerns is lost

<h3 style=” color:red”> Have a great day </h3>
<p  style =” color: green”> I did this , I did that </p>

  Internal CSS

  • With the help of style tag, we can apply styles within the HTML file
  • Redundancy is removed
  • But the idea of separation of concerns still lost
  • Uniquely applied on a single document
  • Example:
    < style>
              h1{
                     color:red;
                   }
     </style>  
    <h3> Have a great day </h3>

  External CSS

  • With the help of <link> tag in the head tag, we can apply styles
  • Reference is affixed 
  • File saved with .css extension
  • Redundancy is abolished
  • The idea of separation of concerns is sustained
  • Only applied to each document
  • Example:
<head>
 <link rel="stylesheet" type="text/css" href="name of the Css file">
</head>
            h1{
                     color:red;         //.css file
                 }

Implementation of all the three types of CSS:

<!DOCTYPE html>
<html>
<head>
	<title>HTML</title>
	<link rel="stylesheet" type="text/css" href="first.css">
<style>
h1
{
   color:blue;
} 
</style>
</head>
<body>

<h1>This heading will be blue</h1>
<p style="color:Red">This paragraph will be purple</p> 
<p  id="center">This paragraph will be black and center-aligned</p> 

</body>
</html>


This is Css file

#center {
  text-align: center;
  color:pink;
}

Output:

This heading will be blue

This paragraph will be purple

This paragraph will be black and center-aligned

CSS Colors

There are numerous colouring tools in CSS

as mentioned below :

  • RGB
    • This starts with RGB and takes 3 parameter
    • 3 parameter basically corresponds to red, green and blue
    • The value of each parameter may vary from 0 to 255.
    • Eg: RGB(255,0,0); means color red
  • HEX
    • Hex code starts with # and comprises of 6 numbers which are further divided into 3 sets
    • Sets basically correspond to Red, Green, and Blue
    • Single set value can vary from 00 to 09 and AA to FF
    • Eg: #ff0000 ; means color red
  • RGBA
    • This starts with RGB and takes 4 parameter
    • 4 parameter basically corresponds to red, green, blue and alpha
    • Value of the first three parameters may vary from 0 to 255 and the last parameter ranges from 0 to 1 that is from 0.1, 0.2,…..0.9
    • Eg: RGB(255,0,0,0); means color red

Conclusion :

Knowing and understanding the basics and the diverse set of different programming languages ​​will also give you a good understanding of how the different languages ​​work together and the role each plays in a website, giving you a much better overview and approach to code in your future projects.

If you get stuck with CSS Basics, you can ask us to do it for you at https://smartyxweb.com

Was this article helpful?
Dislike 0
Views: 13