Design Web Pages using CSS

-

CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages. It's an essential tool for web developers and designers to create visually appealing and user-friendly websites. In this blog, we will explore the basics of CSS, its types, and some exciting properties that can make your web pages interactive and interesting.

Types of CSS

There are three types of CSS:

1. Inline CSS: This type of CSS is applied directly to an HTML element using the style attribute. It has the highest priority among all CSS types.

2. Internal CSS: This type of CSS is defined within the <head> section of an HTML document using the <style> tag.

3. External CSS: This type of CSS is stored in an external file with a .css extension and linked to an HTML document using the <link> tag.


CSS Syntax

The basic syntax of CSS consists of a selector, property, and value:

selector {

  property: value;

}


CSS Properties

There are many CSS properties that can make your web pages interactive and interesting. Here are a few examples:

1. Animations: CSS animations allow you to create complex animations using keyframes and animation properties.

2. Shadows: CSS shadows can add depth and dimension to your web pages. You can create text shadows, box shadows, and more.

3. Transitions: CSS transitions allow you to create smooth transitions between different states of an element.

4. Transforms: CSS transforms allow you to manipulate elements in 2D and 3D space.

Examples

Here are some examples of CSS properties in action:

/* Animation example */

@keyframes animate {

  0% {

    transform: scale(1);

  }

  100% {

    transform: scale(2);

  }

}

/* Shadow example */

.text-shadow {

  text-shadow: 2px 2px 4px red;

}

/* Transition example */

.transition {

  transition: background-color 0.5s ease-in-out;

}

/* Transform example */

.transform {

  transform: rotate(45deg);

}

CSS is a powerful tool for web developers and designers. By understanding the basics of CSS and its various properties, you can create visually appealing and interactive web pages.

Comments

Post a Comment

Popular posts from this blog

My First Stipend-Based Internship💻🚀

-
  How I Choose a Different Path as a Fresher🚀 Getting a first internship as a fresher is not easy. Everyone applies on the same job portals, sends hundreds of resumes, and waits for replies that never come.  I was also in the same situation — confused, stressed, and unsure. But instead of giving up, I decided to try a different approach . This blog is about my first stipend-based internship , what I learned, and how choosing my own path helped me move forward in my tech career. 📚  My First Internship Experience  (Sep 2025) In September 2025 , I completed a one-month work-from-home internship . It was my   first  stipend-based internship , and it gave me real confidence as a fresher. Before this, I only knew theory. During this internship, I worked on real-time live projects , which helped me understand how actual development works. 📝What I Learned During This Internship This internship helped me build a strong foundation. 💻 Technical Skills HTML –...
Read more

How I Fixed the Prisma Error

-
How I Fixed the Prisma "The table public.User does not exist" Error It was one of those moments every developer dreads—you've set up your project, written your Prisma schema, and you're ready to seed the database. You run: npm run seed …and immediately get greeted with this error: PrismaClientKnownRequestError: The table `public.User` does not exist in the current database. I stared at it for longer than I'd like to admit. The User model was clearly defined in my schema.prisma file, so why was Prisma saying the table didn't exist? After a bit of digging, I realized the issue wasn't with my code at all—it was with my understanding of how Prisma works. If you're seeing this error too, here's exactly why it happens and how to fix it. Why This Error Happens One of the biggest misconceptions for developers new to Prisma (myself included) is believing that defining a model in schema.prisma automatically creates the corresponding table in the databas...
Read more