Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconSoftware Developmentbreadcumb forward arrow iconCSS Tutorial: Learn CSS from Scratch

CSS Tutorial: Learn CSS from Scratch

Last updated:
5th Jul, 2022
Views
Read Time
7 Mins
share image icon
In this article
Chevron in toc
View All
CSS Tutorial: Learn CSS from Scratch

Have you ever been fascinated by a website’s overall design, colours, layout, user interface, and other elements that seem appealing? But, do you wonder how various graphics are added to the website? It is done through a coding language called CSS. 

This blog helps you understand what CSS is, its fundamentals, its advantages, and how you can use CSS to design your website or build a career in website designing.

Learn Software Development Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs or Masters Programs to fast-track your career.

What is CSS?

Cascading style sheets (CSS) form an integral part of a website. It is a coding language used along with HTML and JavaScript to design the website’s entire layout – webpages, colours, font size, space between texts, various elements, and their positioning, background, and screen size. 

Ads of upGrad blog

The term cascading refers to a style added to the parent text cascades down to subsequent texts. CSS makes it easier to design and edit web pages. Before CSS, the web designers had to manually copy the tags, font, colours, alignment, and other styling rules on all web pages. It took a lot of time and effort. CSS solves this problem by copying the styling rules and applying them to different pages. Even if the styling rules of one page are changed, the modifications automatically apply to the other pages on the website. CSS allows businesses to create an appealing user interface for their websites and mobile applications.

Explore our Popular Software Engineering Courses

 

The following are a few other significant advantages of CSS:

  • Enhanced speed:

    CSS adds colour and style to the website and makes it more user-friendly by enhancing the loading speed of the web pages. In addition, it offers a smooth browsing experience, thus increasing the website traffic organically.

  • Easy Maintenance:-

    Another crucial advantage of using CSS for your website is that it offers easy maintenance of the website. You can change the layout of an entire website through a single line code. 

  • Device Compatibility:-

    A website that appears to have a specific layout on a desktop might not be the same on a mobile phone or tablet. The website layout changes according to the screen size. Therefore, website designers must ensure that the layout remains consistent for all devices. It is made possible with the help of CSS.

 

What are the Different Types of CSS?

  • Inline CSS:-

    It is used to style a single element in HTML rather than the entire section. The designers use inline CSS to style the single element in continuation.

  • Internal CSS:-

    It is also called embedded CSS and is available within the style. It is used on a single page by including it at the top of the document.

  • External CSS:-

    Unlike inline and internal, external CSS applies the same styling rules across different web pages. It is the most extensively used CSS type because it makes it easier for the designers to make alterations in one file rather than applying changes to several files.

You can associate various styles to an HTML document with the help of different types of CSS. The CSS that gets the higher priority is the inline style. It overrides the styling rules in embedded CSS and external CSS. Next is the internal or the embedded CSS that overrides the rules in external sheets. Finally, comes the external CSS that cannot override the other two styling sheets.

 

Syntax in CSS

Syntax in CSS refers to the various styling rules or elements that a browser interprets while a webpage is being designed. The following are the three core elements of CSS:

  • Selector:-

    You can understand the selector in CSS as a tag in HTML that selects the single element on which styling rules are applied. Here are the different types of selectors in CSS:

  • Universal selector:-

    It does not select the elements based on type. Instead, it selects all the elements with the same name.

  • Descendant selector:-

    These selectors are used for applying a style rule to an element only when it is present inside another particular element.

  • Class selectors:-

    As the name suggests, these selectors apply the styling rule to all the elements of a particular class. For example, all elements in a web page marked as H2 shall have the font size 12.

  • ID selectors:-

    These selectors apply the styling rules based on similar id.

  • Property:-

    CSS properties are referred to the various attributes or features of the HTML tags like the colour, size, border, and alignment.

  • Value:-

    These are the values assigned to CSS properties. For instance, a particular colour or size shall have the value #A2A2.

 

CSS Colour Codes

The various colours used in the CSS language are assigned a specific value or code. It enables the website designer to set particular colours for elements like background, text, or borders. The following are the various formats to assign colour values in CSS:

  • Hex Codes:-

    These are six digits codes used to represent a colour value. The initial two digits of the code (RR) represent the red colour value and followed by two values for Green (GG) and the last two values for blue (BB). You can use hexadecimal values from various graphics software like Adobe and the Advanced Paint Brush. It is important to note that the hexadecimal codes in CSS begin with a hash sign.

  • RGB Values:-

    In this property, there is a specific value for each of the three colours, namely, red, green, and blue.  

 

How To Set Background Color with CSS?

Using various CSS properties, you can style the background colour, image, position, or scrolling of the image on a web page. For example, you need to use the background-colour property to set the colour. Here is how you can execute it. 

<p style=”background-colour: blue;”>. It will give that particular text or tag a blue background colour. Similarly, you need to use the property- “background-image” to set the background image. To repeat the image in the background, you can use the property “background-repeat”.

 

Following are the various CSS properties used to style the fonts:

  • Font-family changes the face of the font.
  • Font size is used to increase or decrease the price text size.
  • Font-variant makes the text in small caps.
  • The font-style property makes the font bold or italic. The font weight helps to increase or decrease the boldness of the text.

 

CSS Properties to Style the Text and Images

CSS also has various properties to style the text of an element.

  • The ‘colour’ property sets the colour, whereas the direction property is used to style the ‘direction’ of the text.
  • The text-indent and text-align properties are used to set the indent of the text and align the text, respectively.
  • The letter-space property helps increase or decrease the space between words.
  • You can use the text-decoration property to underline or strikethrough the text.
  • Text-transform property helps convert the text from lowercase to uppercase and vice versa.
  • You can also use the text-shadow property to arrange the shadow around the text.

 

The web page images can be styled by using the following CSS properties.

  • Height and width properties set the height and width of the image, respectively.
  • You can use the border property to set the width of the image border.
  • The -moz-opacity property helps fix the image’s transparency or opaqueness.

 

You can also prepare numbered, or bullet point lists with CSS. The following are the list properties that you must know:

  • List-style-type property helps set the shape of the bullet, number, or any other marker.
  • You can also use the list-style-image property instead of the above one to add images instead of bullets or digits.
  • List-style-position property controls the alignment or indent of various points.

Read our Popular Articles related to Software Development

Ads of upGrad blog

 

Conclusion

Websites have become crucial for businesses, mainly due to increasing trends in online purchases. Therefore, businesses need to create a website that is visually appealing to the customers. CSS helps companies get more customers by attracting them to website animations, UI, and other graphics. 

If you wish to pursue a career in website designing, you can pursue the Masters of Science in Computer Science Course by upGrad. 

Profile

Pavan Vadapalli

Blog Author
Director of Engineering @ upGrad. Motivated to leverage technology to solve problems. Seasoned leader for startups and fast moving orgs. Working on solving problems of scale and long term technology strategy.

Frequently Asked Questions (FAQs)

1What is CSS?

CSS or the cascading style sheet is a coding language in HTML used to design web pages. The various properties of CSS facilitate styling and editing the website layout, text, font, background colour, animations, UI, and other design elements on the website.

2What are the three essential elements of CSS?

The three essential elements of CSS that form its syntax are selectors, property, value. The selectors are used to tag the elements that need to be styled. Properties serve as styling rules or attributes. Different values are attached to each CSS property.

3What is the purpose of CSS?

The primary purpose of CSS is website design and layout. It applies the same styling rules to all the web pages, increases the website loading speed, and enhances the browsing experience for the target customers.

Explore Free Courses

Suggested Blogs

Scrum Master Salary in India: For Freshers &#038; Experienced [2023]
900129
Wondering what is the range of Scrum Master salary in India? Have you ever watched a game of rugby? Whether your answer is a yes or a no, you might h
Read More

by Rohan Vats

05 Mar 2024

SDE Developer Salary in India: For Freshers &#038; Experienced [2024]
904660
A Software Development Engineer (SDE) is responsible for creating cross-platform applications and software systems, applying the principles of compute
Read More

by Rohan Vats

05 Mar 2024

System Calls in OS: Different types explained
5010
Ever wondered how your computer knows to save a file or display a webpage when you click a button? All thanks to system calls – the secret messengers
Read More

by Prateek Singh

29 Feb 2024

Marquee Tag &#038; Attributes in HTML: Features, Uses, Examples
5058
In my journey as a web developer, one HTML element that has consistently sparked both curiosity and creativity is the venerable Marquee tag. As I delv
Read More

by venkatesh Rajanala

29 Feb 2024

What is Coding? Uses of Coding for Software Engineer in 2024
5030
Introduction  The word “coding” has moved beyond its technical definition in today’s digital age and is now considered an essential ability in
Read More

by Harish K

29 Feb 2024

Functions of Operating System: Features, Uses, Types
5062
The operating system (OS) stands as a crucial component that facilitates the interaction between software and hardware in computer systems. It serves
Read More

by Geetika Mathur

29 Feb 2024

What is Information Technology? Definition and Examples
5026
Information technology includes every digital action that happens within an organization. Everything from running software on your system and organizi
Read More

by spandita hati

29 Feb 2024

50 Networking Interview Questions &#038; Answers (Freshers &#038; Experienced)
5073
In the vast landscape of technology, computer networks serve as the vital infrastructure that underpins modern connectivity.  Understanding the core p
Read More

by Harish K

29 Feb 2024

10 Best Software Engineering Colleges (India and Global) 2024
5376
Software Engineering is developing, designing, examining, and preserving software. It is a structured and trained approach through which you can devel
Read More

by venkatesh Rajanala

28 Feb 2024

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon