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. 

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.

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.

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.