Experts

Experts

Pricing

Pricing

Papers

Papers

Blogs

Blogs

What is CSS ? Why CSS ? , Types of CSS and CSS Features

What is CSS ? Why CSS ? , Types of CSS and CSS Features

Welcome to CSS Foundation , where we will explore the fundamentals of web design.
Imagine turning plain HTML into an impressive site with just a few lines of this is the power of CSS.

Who developed CSS?

  • CSS was developed by Håkon Wium Lie and Bert Bos in 1994.
  • Håkon Wium Lie came up with the idea of CSS while collaborating with Tim Berners-Lee, the founder of the World Wide Web.
  • The idea behind CSS was to make web design more efficient and consistent.
  • Before CSS, styling a webpage was done directly in the HTML, which made it difficult to maintain and update as websites

What is CSS?

  • CSS (Cascading Style Sheets) is the key to amazing and appealing web pages.
  • It allows developers and designers to create responsive and user-friendly websites, enhancing the digital experience.
  • In web development, CSS is essential for controlling layout, colors, typography, and overall aesthetics.
  • It's what makes websites look good and function well across various devices and browsers.
  • It allows developers and designers to create responsive and user-friendly websites, enhancing the digital experience.

What CSS can do to your Web Pages?

image
CSS, or Cascading Style Sheets, is the unsung hero behind the scenes of every beautifully designed website.
  • It’s the tool that allows web developers to add many things to their HTML files, transforming plain text and basic layouts into visually stunning web pages.
  • With CSS, you have the power to control every aspect of a website’s appearance—from the colors and fonts to the overall layout and even the little details like spacing and animations.
  • Imagine a website without CSS, it would be nothing except a series of plain, unstyled texts.
  • But with CSS, you can create an amazing look and keep the audience engaged.
  • Beyond just making your website look good, CSS also plays a crucial role in user experience.
  • It ensures that your website is responsive, meaning it looks great and functions well on any device.

Types Of CSS

  • When styling a webpage, CSS offers flexibility in applying styles. You can choose any of them, Inline, Internal, and External CSS.
  • Each one of this method has its own purpose depending on your project’s needs. Let’s briefly study about each type of CSS

1) Inline CSS

Inline CSS is the simplest way to apply styles directly to HTML elements. You can add the CSS code directly within the HTML element's opening tag using the 'style' attribute.

Example

Let's say if you want to change the color of a specific paragraph to blue. Here is how you can do it :
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Inline CSS Example</title>
5</head>
6<body>
7
8    <p style="color: blue;">This text is blue.</p>
9
10</body>
11</html>
12
  • The style="color: blue; part is the inline CSS.
  • It's written inside the <p> tag, directly affecting the text inside that paragraph.

2) Internal CSS

Internal CSS allows you to define all your styles in one place inside the same HTML file. You can insert your CSS inside a <style> tag in the <head> section of your HTML document.

Example

Let's say if you want to change the color of all paragraphs on a page to green. Here is how you can do it :
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Internal CSS Example</title>
5    <style>
6        p {
7            color: green;
8        }
9    </style>
10</head>
11<body>
12
13    <p>This text is green.</p>
14    <p>This text is also green.</p>
15
16</body>
17</html>
18
  • The <style> tag contains all your CSS rules.
  • In this case, p { color: green; } applies green color to all <p> (paragraph) elements of the page.
  • Internal CSS is better than inline CSS because all the styles are in one place, but it’s still limited to a single HTML file.

3) External CSS

External CSS is the most organized way to apply styles. You have to write your CSS in a separate xyz.css (xyz is a random file name) file and link it to your HTML document. This method is preferred for larger projects because it keeps the CSS and HTML completely separate.

Example

Let’s say you want to change the color of all paragraphs on your website to red. Here is how you can do it :
Create a CSS File (e.g. styles.css)
1/* styles.css */
2p {
3    color: red;
4}
5
Link the CSS File to your HTML Document:
1<!DOCTYPE html>
2<html>
3<head>
4    <title>External CSS Example</title>
5    <link rel="stylesheet" type="text/css" href="styles.css">
6</head>
7<body>
8
9    <p>This text is red.</p>
10    <p>This text is also red.</p>
11
12</body>
13</html>
14
  • The link tag in the <head> section of the HTML file connects the CSS file styles.css to the HTML.
  • Now, any styles that you define in styles.css will be applied to all HTML files.
  • This approach is great for maintaining a consistent look on multiple pages and makes your code easier to manage.
And that’s an overview of CSS types! Inline CSS for quick changes, Internal CSS for keeping styles in one place within the same HTML files, and External CSS for managing styles across multiple pages.

The Core Features of CSS

image
  • CSS is the toolkit for web designers to make their HTML creations look cool and stylish.
  • Let’s see the key features of CSS and explore how each one contributes to creating beautiful and functional web pages.

1. Selectors

Selectors are essential for targeting specific HTML elements that you want to style. Here’s a look at the different types:
  • Element Selector: This selector applies to all occurrences of a specific HTML element.
  • For example, using p as an element selector will style all paragraph tags in your document.
  • Class Selector: Selects elements that have a particular class attribute.
  • If you want to style elements with the class highlight, you use .highlight in your CSS.
  • ID Selector: Targets a specific element using its unique ID attribute. For example, the #header will style only the element with the ID of the header.
  • Attribute Selector: Allows you to target elements based on their attributes and values.
  • For instance, [type="text"] selects all input elements where the type attribute is "text".
  • Pseudo-classes and Pseudo-elements: These provide additional styling options based on the state or position of an element.
  • For example, :hover can style an element when you mouse over it, and :: before can insert content before an element.

2. Properties and Values

CSS properties specify the aspects of an element that you want to style. Common properties include:
  • Color: Controls the text color. Example: color: blue;
  • Font size: Sets the size of the text. Example: font-size: 16px;
  • Margin: Adds space around elements. Example: margin: 20px;
  • Padding: Adds space inside the element, between the border and the content. Example: padding: 10px;
We will discuss these properties in Detail in upcoming blogs

3. The Cascade

The “cascade” is a crucial concept in CSS. It determines how styles are applied when there are conflicting rules. The cascade uses:
  • Importance: Inline styles (styles written directly in HTML) override external stylesheets.
  • Specificity: More specific selectors (e.g., ID selectors) take precedence over less specific ones (e.g., class selectors).
  • Source Order: When two rules have the same specificity, the one that appears last in the CSS file is applied.

4. The Box Model

Every element on a webpage is treated as a rectangular box. The CSS box model includes:
  • Margins: The outermost space around the box. Example: margin: 15px;
  • Borders: The line surrounding the padding. Example: border: 1px solid black;
  • Padding: The area between the content and the border. Example: padding: 10px;
  • Content: The element's actual substance, including text or images.
Understanding the box model is essential for controlling layout and spacing in your designs.

5. Flexbox and Grid

These are powerful tools for creating layouts:
  • Flexbox: Ideal for one-dimensional layouts, Flexbox helps align and distribute space among items in a container.
  • For example, it can be used to center items horizontally or vertically within a flex container.
  • Grid: A two-dimensional layout system, Grid lets you create complex grid-based layouts with rows and columns.
  • It’s perfect for designing layouts with precise control over both vertical and horizontal spacing.

6. Animations and Transitions

CSS allows you to add animations and transitions to make your web pages more dynamic:
  • Animations: Let you create keyframe-based animations.
  • For example, you can animate an element to change colors or move across the screen.
  • Transitions: Smoothly change property values over a specified duration.
  • For example, you can transition an element’s color from red to blue when you hover over it.

7. Responsive Design

  • CSS helps you create designs that work well on different devices and screen sizes. Media queries are a powerful tool for this.
  • They allow you to apply different styles based on the device’s screen size or other characteristics.
  • For instance, you can create a mobile-friendly layout that adjusts for smaller screens.

Conclusion

Here's a brief conclusion of what we've covered:
  • CSS Origins: Developed by Håkon Wium Lie and Bert Bos in 1994 to enhance web design efficiency.
  • What is CSS?: A tool for styling web pages, controlling layout, colors, typography, and improving user experience.
  • CSS Types: Explored Inline, Internal, and External CSS, each with its own use cases.
  • Core Features: Discussed selectors, properties, the cascade, the box model, Flexbox, Grid, animations, transitions, and responsive design.