Scribd
Upload
5 views

Introduction to Cascading Style Sheets CSS (Week11)

Cascading Style Sheets (CSS) is essential for styling web pages, allowing developers to control the visual presentation and layout of content. It differs from HTML, which defines the structure of a web page, by focusing on the aesthetic aspects such as colors, fonts, and positioning. CSS is crucial for creating responsive, user-friendly websites that enhance user experience and adapt to various devices.

Uploaded by

rashmianjelknecka03
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Introduction to Cascading Style Sheets CSS (Week11)

Cascading Style Sheets (CSS) is essential for styling web pages, allowing developers to control the visual presentation and layout of content. It differs from HTML, which defines the structure of a web page, by focusing on the aesthetic aspects such as colors, fonts, and positioning. CSS is crucial for creating responsive, user-friendly websites that enhance user experience and adapt to various devices.

Uploaded by

rashmianjelknecka03
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Introduction to

Cascading Style
Sheets (CSS)
Cascading Style Sheets (CSS) is a fundamental language for styling
web pages. It empowers developers to control the visual
presentation and layout of web content. CSS allows you to define
colors, fonts, sizes, and spacing for various elements on a web
page. Its power lies in its ability to control the appearance and
functionality of web pages.

by Janella David
Difference between CSS and HTML
HTML CSS

HTML (HyperText Markup Language) defines the CSS (Cascading Style Sheets) controls the presentation
structure and content of a web page. It uses tags to of HTML elements. It uses properties and values to
specify headings, paragraphs, images, links, and other define styles such as colors, fonts, sizes, and
elements. positioning. It allows you to create visually appealing
and user-friendly web pages.
Syntax and Structure of CSS
1 Selectors 2 Properties
Selectors target specific HTML elements based on Properties define the styles that are applied to the
their tag name, class, ID, or other attributes. selected elements.

3 Values 4 Comments
Values specify the specific settings for the properties, Comments are used to explain code, make it easier to
such as colors, font sizes, and positioning. read, and temporarily disable parts of the CSS file.
Selectors and Specificity
in CSS
Element Selector
Targets all elements of a specific type (e.g., <p> for all
paragraph elements).

Class Selector
Targets elements with a specific class attribute
(e.g., .container for all elements with the class
"container").

ID Selector
Targets a single element with a unique ID attribute (e.g.,
#header for the element with the ID "header").
CSS Properties and Values
Property Value

color red, #ff0000, rgb(255, 0, 0)

font-size 12px, 1em, 1.5rem

background-color lightblue, #add8e6,


rgba(173, 216, 238, 0.5)

text-align left, center, right

display block, inline, inline-block

margin 10px, 20px, auto

padding 5px, 10px, 15px


Styling Techniques in CSS
Transitions Animations
Create smooth visual effects Bring elements to life with
when an element's state dynamic movements and
changes (e.g., hovering over effects, such as fading,
a button). scaling, and rotating.

Gradients Shadows
Add depth and visual Add realism and depth to
interest with smooth color elements by simulating light
transitions, creating visually and shadow effects,
appealing backgrounds and enhancing the visual
borders. hierarchy.
Responsive Web Design with CSS

Media Queries
Target different screen sizes with specific styles using @media queries.

Flexbox
Flexible layout system to create responsive layouts that adapt to different screen sizes.

Grid
Powerful layout system for creating sophisticated and adaptable layouts on different
devices.
Importance of CSS in
Web Development
CSS is crucial for web development, enhancing user experience
and visual appeal. It allows developers to create visually appealing
and user-friendly websites that adapt to different screen sizes and
devices. CSS plays a vital role in creating websites that are
engaging, accessible, and optimized for various user preferences.

You might also like