Introduction About CSS

CSS (Cascading Style Sheets) is a fundamental technology in web development. playing a crucial role in defining the visual appearence and layout of websites. It serves as a styling language that works hand in hand with HTML (Hypertext Markup Language) to create visually appealing and user-friendly web pages. Through CSS, developers can control various aspects of a webpage presentation, such as colors, fonts, spacing and positioning, to ensure a cohensive and engaging user experinece.

What Is CSS

CSS (Cascading Style Sheets) is like the paint you use to style a house. Just as paint give color and style to different part of a house, CSS adds design and visual appeal to webpages and websites.

When you want a house to look nice, you pick the colors you like and decide how you want to everything to look. CSS works in a smilar way for websites. It lets you choose colors, fonts, and layouts for your web pages, making them look attractive and organized.

CSS Allows to Change Styles

So, just like how you can change the color of the walls or the style of the furniture in a house with paint, CSS allows you to change the color, size, font, and layout of different elements on a webpage.

For example if you want the headings on your webpage to be bigger and bold, you can use CSS to make that happen. Or if you want the backrgound of your webpage to be blue instead of white, CSS can help you with that too.

CSS gives you the pover to make your website look exactly the way you want it, just like how you can make a house look beautiful with the right choice of paint and decorations.

Lets Build A CSS Code Together

Let's say you have a webpage with a heading that you want to style, Here's the HTML code for the webpage.

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my webpage.</p>
</body>
</html>

Now let's create a seperate CSS file named “styles.css” and add some styling to the heading.

/* styles.css */
h1 {
    color: blue; /* Change the color of the heading to blue */
    font-size: 24px; /* Increase the font size of the heading */
    font-family: Arial, sans-serif; /* Change the font family of the heading */
}

In this CSS code we've targetted the “<h1>” element and applied some styling to it.

"color": Changes the color of the text to blue,
“font-size”: Increase the font size of the text to 24 pixels,
“font-family”: Changes the font family of the text to Arial or any sans-serif font if Arial is not available.

Now, when you open your webpage in a browser, you'll see that the heading “Welcome to My Website” is styled according to the CSS rulses we specified.

Who Invented CSS

CSS (Cascading Style Sheets) was proposed by Hakon Wium Lie and Bert Bos in 1994 while working at CERN (the Europen Organization for Nuclear Research). They proposed CSS as a way to seperate the structure of web documents from their presentation. The first version of CSS, CSS1, was realesed in December 1996. Since then, CSS has undergone several revisions and updates and CSS3 is the latest version of CSS

What is the Advantage of CSS?

Seperation of Concerns: CSS allows for clear separation of content (HTML) from presentation (CSS). This separation makes the code easier to maintain and update because changes to the visual design can be made in the CSS file without altering the HTML structure.
Consistency: With CSS, you can create a consistent look and feel across multiple pages of a website or even across different websites by applying the same styles to various elements.
Flexibility and Control: CSS provides extensive control over the appearance of web pages. You can control evertything from colors, fonts, margins, paddings, borders, to layout and positioning, enabling you to achieve virtually any desired design.
Efficiency: By using CSS, you can apply styles to multiple elements simultaneously, which reduces redundancy in code and makes maintenance mor efficient. Additionally, CSS allows for the use of classes and IDs to target specific elements for styling, further enhancing efficiency.
Accessibility: CSS enables you to create accessible web designs by allowing the use of semantic HTML combined with styling. This helps ensure that content is presented in a clear and organized manner, making it eaiser for users with disabilities to navigate and understand.
Page Load Speed: By separating the styling from the HTML content, CSS files can be cached by browsers, resulting in faster page load times for returning visitors, as the browser only needs to download updated content rather than reloading all styles.

Overall, CSS plays a crucial role in modern web development by providing developers with powerful tools to create visually appealing, accessible, and efficient websites.

Can We Use CSS Just to Style Web Pages?

No, CSS is not limited to styling webpags only. While CSS is commonly associated with web development and is primiraly used to style HTML documents, it can also be applied to other types of documents and media.

Here are some examples of how CSS can be used beyond webpages.

Styling XML Documents: CSS can be used to style XML documents such ass RSS feeds, SVG images, or MathML equations. Smilar to HTML, XML documents can be styled using CSS to control their presantatin.
Ebooks and PDFs: CSS can be applied to format and style ebooks or PDF documents. Many ebook formats, such as ePub, support CSS for styling text, images, and layout.
Styling For HTML Emails: CSS can also be used to style HTML emails. When designing email templates, CSS can be applied inline or within <style> tags in the <head> section of the HTML email.
User ınterfaces (UI): CSS is often used to style user interfaces in applications and software. This includes styling buttons, menus, forms, and other UI components to create visually appealing and user-friendly interfaces.
Print Stylesheets: CSS can be used to create print stylesheets for webpages, allowing developers to specify how a webpage should be formatted and styled when printed. Print stylesheets enable customization of the printed output, such as adjusting marigns, hiding or displaying certain elements, and changing font sizes.
Presentations: CSS can be used to style presentations created with HTML-based presentaion frameworks like Reval.js or Bespoke.js. CSS allows users to customize the appearance of slides, transitions, and other presentation elements.

In summary, while CSS is primarily used for styling webpages, its versatility allows it to be used in various contexts beyond traditional web development, including styling XML documents, ebooks, email templates, user interfaces, print layouts and presentations.

What is CSS Syntax?

The CSS (Cascading Style Sheets) syntax consists of a set of rulses that define how styles should be applied to HTML elements. These rulse typically follow a specific structure:

Selectors: Selectors are patterns used to select the elements you want to style. They can be HTML elements (like “<p>” for paragraphs) , class names (prefixed with a period, like “.my-class”), IDs (prefixed with a hash like “#my-id”), or other attriubutes (like “[attribute=”value"]"). Selectors can also be combined or grouped to target specific elements more precisely.
Declaration Block: After the selector, there's a set of curly braces “{}” containing one or more declarations. Each declaration consists of a property and valur, seperated by a colon (":"). For example “color:blue;” sets the color property to blue.
Properties and Values: Properties are the attributes of an element that you want to style (e.g., color, font-size, margin). Values are the settings you assign to those properties (e.g., blue, 16px, 20px).
Declaration Seperator: Multiple declarations within a declaration block are separated by semicolons (";"). This allows you to apply multiple styles to the same element.

Here is an example of CSS Syntax

/* Selector */
h1 {
    /* Declaration Block */
    color: blue; /* Property: Value */
    font-size: 24px; /* Property: Value */
}

In this example :

“h1” is the selector, targetting all "<h1>" elements.
Inside the curly braces “{}”, there are two declarations: “color: blue;” and “font-size: 24px;”
Each declarations consists of a property ("color", “font-size”) and a value ("blue", “24px”), separated by a colon (":").
Multiple declarations are separated by semicolons (";")

How Does CSS Works?

CSS (Cascading Style Sheets) works by applying styles to HTML elements based on selectors defined in CSS rules. When a web browser renders a webpage, it interprets both the HTML and CSS files to determine hoe the content should be displayed.

Here is How CSS Works:

Selector Matching: The browser parses the HTML document and identifies the elements that match the selectors defined in the CSS rules. For example, if a CSS rule targets all “<p>” elements ("p {…}"), the browser will apply that style to every paragraph on the page.
Cascading and Specifying: CSS rules can be applied in multiple ways, and conflicts may arise when multiple rules target the same element. Styles defined inline (directly within an HTML element), in “<style>” tags within the HTML document, or in extarnal CSS files are applied in a specific order, with later rules overriding earlier ones. Specifying determines which rule takes precedence when multiple rules have conflicting styles for the same element.
Inheritance: CSS properties can be inherited from parent elements to their child elements. For example, if a font style is applied to the “<body>” element, it will be inherited by all its child elements unless overridden by a more specific rule.
Rendering: Once the browser has determined the styles to apply to each element, it renders the webpage according to those styles. This involves formatting text, applying colors and backgrounds, positioning elements on the page, and handling other visual aspects based on the CSS rules.
Responsive Design: CSS also enables responsive design, allowing developers to create layouts that adapt to different screen sizes and devices. Media queries can be used to apply different styles based on factors such as screen width, orientation, or device type, ensuring optimal display across various devices and viewport sizes.

Overall, CSS works by selecting HTML elements, applying styles based on defined rules, resolving conflicts, inheriting styles, and rendering the content accordingly, resulting in visually appealing and well-formatted webpages.

How To Add CSS to HTML

There are theree main ways to use CSS in a webpage: inline, internal, and extarnal styles.

Inline CSS: inline styles are applied directly to individual HTML elements using the “style” attribute. This method is useful for applying styles to specific elements without affecting other elements on the page.

Here's an example

<p style="color: red; font-size: 16px;">This is a paragraph with inline CSS.</p>

Internal CSS: Internal CSS styles are defined within the “<style>” element in the “<head>” section of the HTML document. This method allows you to apply styles to multiple elements throughout the page by targetting their HTML tags, classes or IDs.

Here is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <style>
        /* Internal CSS */
        p {
            color: blue;
            font-size: 18px;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with internal CSS.</p>
    <p class="highlight">This paragraph has a highlighted background.</p>
</body>
</html>

External CSS: External styles are defined in a separate CSS file and linked to the HTML document using the “<link>” element. This method is the most common and most convenient use to keep the HTML and CSS separate, making the code more organized and maintainable.

Here's an example:

HTML (index.htm)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This is a paragraph with external CSS.</p>
</body>
</html>

CSS (styles.css)

/* External CSS */
p {
    color: green;
    font-size: 20px;
}

In this example the CSS rules defined in the “styles.css” file will be applied to all “<p>” elements in the “index.html” file.

These three methods provide flexibility in applying styles to webpages, allowing developers to choose the most appropriate approach based on their sepecific needs and preferences.

HTML & CSS

What is CSS