Introduction to CSS3

Last Updated: 22nd June, 2023

What is CSS?

CSS, also known as Cascading Style Sheets, is a game-changing language that revolutionized the web design process. With its simple design, CSS makes it easy to enhance the presentation of web pages, by applying styles independently of the HTML that makes up each page. Essentially, CSS is responsible for the aesthetic appeal of a website, dictating everything from font choice to color scheme and spacing. With this language, developers and designers can create visually appealing websites that truly stand out.

Unlike HTML, which uses tags, CSS uses rulesets. Despite its powerful control over the presentation of an HTML document, CSS is easy to learn and understand. In fact, it offers many benefits that make it a highly practical choice for web development:

Time-saving: With CSS, you can write styles once and apply them to multiple HTML pages. This means you won't have to repeat the same style changes on every page.
Easy maintenance: CSS simplifies the process of updating your website's style. Making a global change is as simple as updating the style sheet, and all the relevant elements across all webpages will be updated automatically.
SEO-friendly: CSS is considered a clean coding technique that search engines can easily read and understand. This means your website's content will be more accessible to search engines, leading to higher rankings and more traffic.
Advanced styling features: Compared to HTML attributes, CSS offers a much wider array of attributes, allowing for more creative and sophisticated designs.
Offline browsing: CSS enables web applications to be stored locally with the help of an offline cache. This allows users to view websites offline, without needing to be connected to the internet.

CSS3 is the latest version of CSS, which offers even more advanced features and increased efficiency. With CSS3, developers can create highly personalized and user-friendly websites that truly stand out from the crowd.

CSS Syntax

A CSS consists of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. These style rules are made up of three essential parts, each of which contributes to the overall aesthetic of your website:

Selectors determine which HTML tags the style rules will be applied to. This could be any tag, from a simple <h1> heading to a complex <table> element.
Properties represent the attributes of HTML tags. Essentially, all the attributes that you'd typically use in HTML can be converted into CSS properties. These properties can range from simple ones like color to more complex ones like border.
Values are assigned to properties and dictate how they will be displayed on the web page. For example, a color property can have a value of red or #F1F1F1, among others.

Syntax:

selector { property: value }

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Example : In the following example all p elements will be center-aligned, with a blue text color:

p {
color: blue;
text-align: center;
}

Types of CSS

There are three types of CSS:

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS

Inline CSS is used to apply styling to a single HTML element. This type of CSS is added directly to the HTML element using the "style" attribute. Inline CSS is easy to use and can be added quickly, but it should be used sparingly as it can make the HTML code cluttered and difficult to read. Inline CSS is typically used for small changes, such as changing the color of a single element.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>
     
    <body>
        <p style = "color:#009900; font-size:50px;
                font-style:italic; text-align:center;">
            GeeksForGeeks
        </p>
 
    </body>
</html>

Internal CSS

Internal CSS is used to apply styling to a single HTML document. This type of CSS is added to the head section of the HTML document using the "style" tag. Internal CSS is more organized than inline CSS, but it can still be difficult to maintain if the HTML document is large. Internal CSS is typically used for medium-sized web pages, as it allows for more complex styling than inline CSS. Internal style sheets increase page load times, that’s why many developers avoid such practice

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-color: black;  
}  
h1 {  
    color: red;  
    padding: 50px;  
}   
</style>  
</head>  
<body>  
<h2>CSS types</h2>  
<p>Cascading Style sheet types: inline, external and internal</p>  
</body>  
</html>

External CSS

External CSS contains a separate CSS file that contains only style properties with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. This means that for each element, style can be set only once and that will be applied across web pages. External CSS is the most organized type of CSS, as it allows for easy maintenance and updating of the styling across multiple HTML documents. External CSS is typically used for large web pages or websites.

<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This text is styled by the 'styles.css' file.</p>
</body>

link tag is used to link the external style sheet with the html webpage.
href attribute is used to specify the location of the external style sheet file.

Conclusion

In conclusion, Cascading Style Sheets (CSS) is a language that revolutionized the web design process by making it easier to enhance the presentation of web pages by applying styles independently of the HTML that makes up each page. With its powerful control over the presentation of an HTML document, CSS is easy to learn and understand, offers many benefits such as time-saving, easy maintenance, SEO-friendly, advanced styling features, and offline browsing. CSS3, the latest version of CSS, offers even more advanced features and increased efficiency, enabling developers to create highly personalized and user-friendly websites that truly stand out from the crowd. CSS syntax is made up of style rules that consist of selectors, properties, and values. CSS also has three types: inline, internal or embedded, and external, each with its own unique advantages and disadvantages. By understanding CSS and its various types, developers and designers can create visually appealing websites that are easy to maintain and update.

Module 7: CSS3 and HTML5