Live Master Class

Getting Started with CSS

Beginner

Skill level

Free

Course cost

About this session

Great Learning brings you this live session on "Getting Started with CSS". In this session, you will be learning about a stylesheet language that bases every website on the Internet. We will start by discussing how CSS can be used for describing the presentation of a document written in a markup language such as HTML. This session will also help you to answer a variety of questions you may come across, such as: What are the different types of CSS?, What are the different types of Selectors?, How you can style your webpage? and much more. We will also help you understand how to use the number of properties and styles available in CSS, post which we will cover concepts such as borders, padding and margin. Finally, we will end this session by looking at some webpages example along with relevant practical demonstrations. This is a beginner-friendly live session that aims at helping you get started with CSS on the right note!

About the Speaker

Mr. Ritwik Raj

Great Learning

Profile

Ritwik is an experienced Technical Trainer, who has been working in the field of Full Stack Development and having expertise in languages such as HTML, CSS, JS, Java, Python, and SQL. He also has expertise in the field of Data Structure and Algorithm and has worked in Front end development projects using languages such as Angular and NodeJS.

Frequently Asked Questions

General Queries On This Free Course
What is CSS?

Cascading Style Sheets (CSS) is the styling language for the markup pages and accountable for the representation of the HTML (markup pages) on the internet. CSS are obliging for the layouts, fonts, colour and all the things that are related to the representation of the HTML pages on the internet.

 

One can learn CSS online in Hindi or in English through various platforms to know the extent of flexibility CSS provides for specific styling of the markup pages via multiple .css files incorporating the styling of multiple landing pages, and excluding the repetition of the same CSS styling code. After knowing the intricacies of CSS or rather advance CSS, whether learning it online or from any other source, provide the coder with a certain level of free hands in CSS to present the same HTML page with different presentational skills.

What is CSS used for?

 

While HTML is used for structuring the data, CSS helps to beautify the data and boosts up the aesthetic value of the page by making changes to the fonts and color, layouts of the pages, and basically, all the presentational related things can be done with CSS, this way developers realize the extent of the use of CSS and helps them to display the pages according to the screen of different users and on the different devices. 

CSS provides a helping hand to the developers to change the layout of the landing page by dividing the page into rows and columns, this way the positioning of the content and how the content has to be displayed can be decided with a certain ease. Advance CSS helps in making the pages more attractive, increasing the aesthetic value of the site. Advanced CSS helps in subsuming the animations on the landing pages. Therefore choosing the best CSS course online or anywhere else is important to know the use of CSS

What are the three types of CSS?

 

Three types of CSS involve: -

  • Inline CSS
  • Internal CSS
  • External CSS

 

1. Inline CSS – 

This type of style is assimilated in the body tag of the HTML page, there is no need to add any .css file to the HTML page, no reference is needed to be given for.css file rather the HTML tag incorporates the CSS styling by using the “style” attribute to the specific HTML tag.

     Example-

                  <html>

                      <head>

                           <title>INLINE CSS</title>

                      </head>

                      <body>

                              <p style=” color: red ; text-align: center;”> This is an inline CSS                 example. One of the types of CSS. </p>

                     </body>

                  </html>

 

2. Internal CSS-   

In this type of CSS the styling code for a single HTML page is included in the head tag of the html page. Under the style tag in the head area, all the styling of different html tags are done, for the html page where style tag is subsumed.

       Example-

<html>

<head>

<title>INTERNAL CSS</title>

      <style>

            body{

              text-align: center;

            }

           div{

              color: red;

              font-style : bold;

            }

           p{

              color: green;

              font-size: 50px;

           }

      </style>

</head>

<body>

<div> Online CSS course in hindi </div>

<p> Online CSS certification </p>

<h1> CSS training </h1>

</body>

</html>




 

3. External CSS-           

In this type of CSS, styling of the html page is done in a separate file with the extension, .css  with help of the tag name, and tag attributes like class, id etc to style the html landing pages. The separate .cc file must be linked to the respective html page, that means the styling coded in .css file will be applied across the web pages.

Example-

CSSintoduction.css-

Body{

Text-align :center;

Font-size: 50px;

}

.tutorial css{

Color:red;

Font-style: bold;

}

P{

Font-family: serif;

}

CSSTutorial.html-

<html>

<head>

<title>EXTERNAL CSS</title>

<link  rel = ”stylesheet”  href = “CSSintroduction.css” />

</head>

<body>

<div class=”tutorialcss”>  <h1>Advanced CSS</h1>  </div>

<p>Introduction to css</p>

</body>

</html>

What are the Advantages of CSS?

CSS is obliged to maintain the look and aesthetic value of the web page, it is accountable for the modification of the web page layout, text, colour, etc.

Following are the advantages of knowing the advanced CSS-

 

Time-Saving – the developer doesn’t have to write the styling code for separate HTML pages, assimilating the CSS code for different styling codes in a single CSS file and linking it to the HTML pages would be enough.

 

Reduces redundancy – the same styling for the same tag in different HTML pages can be done via a single CSS file which reduces the work for the developer by not writing the same code again and again.

 

Cross-Platform – this means that CSS is supported by the latest browsers and is compatible with different and upcoming browsers.

 

Easy Modification – code for the CSS is so easy to handle and easy to understand that it can be easily modified at any time.

 

Faster Download Time – less code for styling provided by advanced CSS helps in reducing the download time as heavy code might add up the load to the web page and makes it more time consuming to download.

 

Search Engine Optimization – less code of CSS not only reduces the load on web pages but also helps the browser to know what the web page is about, and this less muddling of the code and usage of CSS layouts in web pages tends to rank higher in search engines. 

There are many more advantages of CSS like more formatting options, great accessibility etc, but the mentioned above advantages are important for any developer.

Is CSS difficult to learn?

Taking online classes of CSS is very helpful to learn it, albeit the initial level of CSS is very easy to learn and these level mainly includes the basic and fundamentals of CSS, but as one starts to steps up to harder levels it opens the gate for advance CSS which becomes cumbersome and confusing to the learners.

One needs to have training in CSS to master the elementary concepts of cascading like CSS box modelling, CSS components and some root rules of CSS in mind then developers have an easy path for mastering CSS. 

Having the best course in CSS and with proper training in CSS one can easily achieve expertise in cascading

How can I learn CSS for free?

 

CSS is accountable for the styling of the HTML pages, keeping structural and styling parts of the web pages apart. Different layouts, components of CSS and intricacies of CSS radical rules help in styling the diversified markup pages, making it easy to play with CSS.

There are many websites and learning portals where courses are provided for free. Amateur in CSS don’t have to pay even a single penny to learn cascading right from the basics to intermediate and then finally to the advanced CSS levels.

All the stages of CSS learning are available on the internet for free, there are many online certification programs going on where one can learn CSS at every level. The certifications evidently show that one has clear fundamentals of CSS rules and helps in frolicking the rules for a wide variety of web page designs

How long does it take to learn CSS?

Both HTML and CSS go hand in hand, as together they are accountable for the over presentation and positioning of the information on the web page. 

For the beginners or more precisely the amateurs in CSS learning, they take at least 10 to 15 days to learn the fundamentals by heart, which are enough for the basic designing of the web pages.

For those who want to learn the intermediate level to learn CSS, training in CSS fundamentals is very necessary and important to make the web pages more aesthetically pleasing and eye-catching.

Now for those who are trying to learn advanced CSS need to have and must have ample amount of training in styling, advanced CSS involves animation, GPS etc, which makes the CSS modern websites that companies look for, making the web pages more responsive.

Albeit the learning curve of CSS totally depends upon the individual plus the training one does in CSS. The time span to learn CSS also depends on one’s interest, the more the interest less will be the time taken to learn cascading.

Is CSS a programming language?

HTML is the markup language but it is not the programming language, similarly, CSS is the cascading style sheets language whose main purpose is to style the markup page.

On the other hand, a programming language is a language with the purpose of computation and algorithm. Programming language serves some purpose and helps in writing the programs for specific computation, program is a set of instructions that altogether helps in achieving a specific purpose when executed by a computer.

CSS language is moreover a declarative language that doesn’t serve a specific purpose but contributes to the styling of the web pages, that’s why CSS is technically a programming language, but it is not designed to be one.

What is a CSS Example?

 

  • Background Color and Opacity

div{

background-color : red;

opacity : 0.3;

}

  • Border Style

p.dotted{ border-style:dotted; }

p.dashed{ border-style:dashed; }

p.solid{ border-style:solid; }

p.groove{ border-style:groove; }

p.hidden{ border-style:hidden; }

p.none{ border-style:none; }

  • Margin

p{

margin-top : 100px;

margin-bottom : 100px;

margin-left : 50px;

margin-right : 50px;

}

  • Padding 

div{

padding-top : 30px;

padding-bottom : 30px;

padding-left : 20px;

padding-right : 20px;

}

  • Text Styling

div{

background-color : balck;

color : white;

text-align : center; 

}

  • Font Styling

div{

font-family : sans-serif;

font-size : 50px;

font-style : italic;

}

Albeit there are more examples of CSS but the mentioned above examples are the basic, and most fundamental examples, which clearly shows the basics of the CSS and how the coding or precisely styling is done for a presentational purpose.

Which Software is used for CSS?

There is no specific CSS editor to code styling of an HTML page, every HTML editor can be used for CSS language also. 

 

Some of the editors for HTML and CSS are :

  • Atom
  • Brackets
  • Sublime Text
  • Espresso
  • Notepad
  • Notepad++
  • Komodo edit
  • Visual studio code
  • Stylizer
  • Bluefish
  • Rapid CSS

Great Learning Academy - Free Online Certification Courses

Great Learning Academy, an initiative taken by Great Learning to provide free online courses in various domains, enables professionals and students to learn the most in-demand skills to help them achieve career success.

Great Learning Academy offers free certificate courses with 1000+ hours of content across 100+ courses in various domains such as Data Science, Machine Learning, Artificial Intelligence, IT & Software, Cloud Computing, Marketing & Finance, Big Data, and more. It has offered free online courses with certificates to 1 Million+ learners from 140 countries. The Great Learning Academy platform allows you to achieve your career aspirations by working on real-world projects, learning in-demand skills, and gaining knowledge from the best free online courses with certificates. Apart from the free courses, it provides video content and live sessions with industry experts as well.

X
popup asset

Welcome to Great Learning Academy