Scribd
Upload
9 views

Chapter 04 Web_Engineering

CSS 3 is the latest version of Cascading Style Sheets, offering advanced features such as animations, gradients, and media queries that enhance web styling. It includes various types of selectors, rules, and methods for applying styles, including inline, internal, and external styles. Additionally, CSS 3 supports responsive design through media queries and allows for smooth animations without the need for JavaScript.

Uploaded by

Daud Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Chapter 04 Web_Engineering

CSS 3 is the latest version of Cascading Style Sheets, offering advanced features such as animations, gradients, and media queries that enhance web styling. It includes various types of selectors, rules, and methods for applying styles, including inline, internal, and external styles. Additionally, CSS 3 supports responsive design through media queries and allows for smooth animations without the need for JavaScript.

Uploaded by

Daud Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Introduction to CSS 3

Tauseef Alam Qureshi


Department of Computer Science
City University of Science & Information Technology Peshawar
Introduction to CSS 3

• CSS 3 is the latest evolution of Cascading Style Sheets. It


introduces new features and improvements that enhance
styling capabilities for modern web development.
Difference between CSS and CSS 3
• CSS: Basic styling, limited animations, no advanced selectors.
• CSS 3: Advanced animations, gradients, media queries, new
selectors.

• Example: Rounded corners using `border-radius`.


Levels of Style Sheets
• 1. Inline Style: Applied directly to an element.
• 2. Internal Style Sheet: Defined within `<style>` tags in the
HTML file.
• 3. External Style Sheet: Separate CSS file linked to HTML using
`<link>`.
Inline Style Example
• <p style="color: blue; font-size: 20px;">This is a blue
paragraph.</p>

• Out put
• This is a blue paragraph.
Internal Style Sheet Example
• <style>
• p{
• color: green;
• font-size: 18px;
• }
• </style>
• <!DOCTYPE html>
• <html>
• <head> <style>
• p { color: green; font-size: 18px; } </style>
• </head>
• <body>
• <p>This is a paragraph.</p> <p>
• Another paragraph with the same style.</p>
• </body>
• </html>
Out put will be
Text Color: Green✔
Font Size: 18px✔
Applies to all <p> elements
External Style Sheet Example
• <link rel="stylesheet" href="styles.css">

• p{
• color: orange;
• font-size: 16px;
• }

Out put will be


• The <p> text will appear in orange with a font size of 16px.
Rules in CSS

• A CSS rule consists of a selector and declaration block.


• The declaration block contains properties and values.

• Example:

• h1 {
• color: red;
• text-align: center;
• }
Types of Selectors
• 1. Universal Selector (*)
• 2. Element Selector (h1, p)
• 3. Class Selector (.classname)
• 4. ID Selector (#idname)
• 5. Attribute Selector ([type="text"])
Universal Selector Example
• The universal selector (*) in CSS3 is used to apply styles to all elements
on a webpage. It is useful when you want to reset margins, padding, or
apply a default style to every element.

• *{
• margin: 0;
• padding: 0;
• }
Element Selector Example
• The element selector (also called type selector) is used to
select and style HTML elements based on their tag name. It
applies styles to all instances of the specified element.

• p{
• font-size: 20px;
• }
Class Selector Example
• The class selector is used to apply styles to multiple elements that
share the same class. It allows you to define a specific style once and
apply it to different elements without modifying the HTML structure.

• blue-text {
• color: blue;
• }

• <p class="blue-text">This text is blue.</p>


ID Selector Example
• The ID selector is used to style a specific HTML element that has a unique id
attribute. Unlike class selectors (which can be used multiple times), an ID
should be unique within a page.

• #header {
• background-color: grey;
• }

• <h1 id="header">Welcome</h1>
Attribute Selector Example
• The attribute selector allows you to style elements based on the
presence, value, or partial match of an HTML attribute. This is useful
for styling form inputs, links, and other elements dynamically.

• input[type="text"] {
• border: 2px solid blue;
• }
Grouping Selectors
• The grouping selector allows you to apply the same styles to
multiple elements by separating them with a comma (,). This
helps to reduce redundancy in CSS code and make it more
efficient.

• h1, p, div {
• color: green;
• }
Pseudo-Classes
• A pseudo-class is a keyword added to a selector that defines a special state
of an element. It allows you to apply styles based on user interaction,
position, or other conditions without modifying HTML.

• Used to define a special state of an element.


• Example:

• a:hover {
• color: red;
• }
Pseudo-Elements
• A pseudo-element in CSS allows you to style specific parts of an
element without modifying the HTML. They are used to add special
effects to text, elements, or content.

• p::first-letter {
• font-size: 30px;
• color: red;
• }
Descendant Selector
• The descendant selector is used to style elements that are nested
inside another element. It applies styles to all matching elements that
are inside a specified ancestor, regardless of how deep they are nested.

• div p {
• color: blue;
• }
Child Selector
• The child selector (>) is used to select only the direct children
of an element. Unlike the descendant selector ( space), it does
not apply styles to deeper nested elements.

• div > p {
• font-weight: bold;
• }
Adjacent Sibling Selector
• The adjacent sibling selector (+) selects an element that comes
immediately after another element and shares the same
parent.

• h1 + p {
• color: red;
• }
General Sibling Selector
• The general sibling selector (~) selects all elements that come
after a specified element and share the same parent.

• h1 ~ p {
• color: purple;
• }
Media Queries
• Media queries allow developers to apply different styles depending on the screen
size, resolution, or device type. They are essential for responsive web design
(RWD), ensuring that websites look good on all devices, from desktops to mobile
phones.

• @media (max-width: 600px) {


• body {
• background-color: lightgray;
• }
• }
CSS 3 Animation
• CSS3 animations allow elements to change styles gradually over a period
of time, without using JavaScript or Flash. It provides a smooth and
efficient way to create dynamic effects like fading, sliding, and bouncing.

• @keyframes example {
• from {background-color: red;}
• to {background-color: yellow;}
• }
• Create loading indicators
✔ Improve user experience (UX)
✔ Add hover effects
✔ Replace JavaScript for simple animations

You might also like