Introduction to CSS in Malayalam

Hello, students! Do you want to master the fundamentals of CSS in Malayalam? As a learner, you are probably familiar with HTML, but you may be unaware of CSS’s power and potential. CSS is a powerful web development technique that may significantly improve the appearance and experience of your website. CSS is a programming tool for web development and design, and it has become an essential skill for modern web developers. This blog is an introduction to CSS in Malayalam, and it will teach you the fundamentals of the language as well as how to utilize it to construct visually appealing web pages. Here, we will provide you with an in-depth introduction to the fundamentals of CSS, giving you the foundation you need to begin constructing your projects. You will also learn the basic principles of CSS, its syntax, and how to apply them to create beautiful and functioning websites. So, without further ado, let’s get started!

What is CSS?

CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language that is used to describe the display of a document authored in a markup language like HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. The term cascading derives from the priority mechanism used to determine which style rule applies if more than one rule fits a specific element. This priority structure with cascading priorities is predictable.

Experience the power of our web development course with a free demo – Enroll Now!

History of CSS

• 1994: First Proposed by Hakon Wium Lie on 10th October
• 1996: CSS was published on 17th November with influencer Bert Bos
• Later he became co-author of CSS
• 1996: CSS became official with CSS was published in December
• 1997: Created CSS level 2 on 4th November
• 1998: Published on 12th May

Why Use CSS? Uses of CSS

• Enable the separation of content and presentation, including layout, colors, and fonts.
• Enable to add  unique styles to our old documents of HTML
• CSS Improves content accessibility, provides greater flexibility and control in the specification of presentation characteristics; allows multiple web pages to share formatting by specifying the relevant CSS in a separate.css file, reducing complexity and repetition in structural content; and allows the.css file to be cached to improve page load speed between the pages that share the file and its formatting.
• In most websites, a CSS can be used in conjunction with JavaScript and HTML to create user interfaces for a variety of mobile applications and web applications.
• We can alter the general appearance and feel of our website by making modifications to the CSS code.
• The CSS specifications are maintained by the World Wide Web Consortium (W3C).
• RFC 2318 (March 1998) registered the Internet media type (MIME type) text/css for usage with CSS.
• The W3C offers a free CSS validation service for CSS documents.
• CSS is supported by a number of markup languages in addition to HTML, including XHTML, plain XML, SVG, and XUL. CSS is also utilised in GTK widget toolkit.

Components of CSS

• Simple to Maintain
• CSS Saves Time
• Superior Styles to the Native Front End
• Search engine Usability
• Consistent and Spontaneous Changes
• Ability to Re-position
• Effective Cache Archiving
• Compatibility with Devices
• Faster Webpage Speed

Get hands-on with our web development course – sign up for a free demo!

Features of CSS

• CSS is used for defining the styles for web pages.  It is generally used with HTML to change the style of web pages and user interfaces.
• We may use CSS to control numerous styles such as text colour, font style, paragraph spacing, column size and layout, background colour and images, layout design, display variants for different screens and device sizes, and many other effects.
• Anyone who desires to start a professional career in web design must be familiar with CSS and HTML.
• CSS has control over HTML documents, making it simple to understand. It is compatible with the HTML and XHTML markup languages.
• Since HTML characteristics are being phased out, using CSS is advised. Therefore, it is an excellent choice to start using CSS in HTML pages to make them compatible with future browsers.

learn full stack development ! join now !

CSS Editors

• Atom
• Visual Studio Code
• Brackets
• Espresso(For Mac OS  User)
• Notepad++(Great for HTML & CSS)
• Komodo Edit (Simple)
• Sublime Text (Best Editor)

CSS Syntax

• Selector: It picks the element to be styled. It is always the same whether we use internal or external styling. Tags, IDs, and classes are examples of basic selectors. This key-value pair can take any form.
• Keys: properties (attributes) such as colour, font-size, background, width, height, and so on.
• Value: the values that are connected with these attributes.

CSS Comment

• Comments don’t render on the browser
• Helps to understand our code better and makes it readable.
• Helps to debug our code
• Two ways to  comment:
• • Single line
  • Multiple lines

Example of Single Line:

/*<h6> This represents the most/ least important line of the doc. </h6>*/

Example of Multiple Lines

/* h1 { color: red; text-align: center; } */

CSS Selectors

• The selector is used to target elements and apply CSS 
• Three simple selectors
  • Element Selector 
  • Id Selector
  • Class Selector
• Priority of Selectors

Id > Class>Element

Element Selector

• Used to select HTML elements by their name
• How we do it

h1

     {

      Color: red;

     }

We choose the heading tag and updated the color property, i.e. the text color, to red. Whatever is written in this tag (content) will now have a red text color. 

  ID Selector

• The id attribute is used to select the HTML element
• Used to target specific or unique element 
• How we do it

#unique

     {

      Color: red;

     }

<h1 id=”unique”> Hi </p>

We selected the id and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color red 

  Class Selector

• The class attribute is used to select the HTML element
• Used to target a specific class of the element 
• How we do it

group

     {

      Color: red;

     }

<h1 class=”group”> Hi </p>

We selected the class and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color red 

Implementation of all three selectors in CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel=”stylesheet” type=”text/css” href=”first.css”>
<style>
#center1 {
  text-align: center;
  color:pink;
}

.center2 {
  text-align: center;
  color:red;
}

h1

{
  text-align:center;
   color:green;
} 

</style>
</head>
<body>

<h1>This heading will be green and center-aligned </h1>

<p class = “center2”>This paragraph will be red and center-aligned </p> 

<p id =”center1″>This paragraph will be pink and center-aligned</p> 

</body>
</html>

Output:

Let’s see how style falls or cascades now that we’ve seen all three selectors. We’ll write one program that adds style to the same element by using tags, ids, and classes as selectors. The goal of this is to demonstrate how one style cuts the other style, which may also be referred to as Priority. We’ll see that id takes precedence over tags and classes.

Now let’s see its implementation:

<!DOCTYPE html>

<html>
<head>
<title>HTML</title>
<style>
p{
color:red;
}
.class {
color:green;
}

#id{
color:orange;
}

</style>
</head>
<body>

<p id=”id” class=”class”> This is CSS </p> 

</body>
</html>

If you’ve ever noticed how one style competes with another to style an aspect. If all of the selectors are classes or tags, the one that is closest or applied at the end will win the race. If both a class and a tag selector are used on the same element, the race will be won by the class selector.

Full Stack Development Courses in Different Cities