Scribd
Upload
15 views

Chapter 2 - CSS Basics

Uploaded by

Japan Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Chapter 2 - CSS Basics

Uploaded by

Japan Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CHAPTER 2: CSS BASICS

❖ Introduction :

CSS, or Cascading Style Sheets, is a language used for describing the


presentation of a document written in HTML (HyperText Markup Language) or
XML (eXtensible Markup Language). It defines how HTML elements are to be
displayed on screen, paper, or in other media.

➔ Here are some key points about CSS:

1. Separation of Content and Presentation


2. Styling HTML Elements
3. Selectors and Declarations
4. Flexibility and Control

Overall, CSS plays a crucial role in web design by enabling developers to


create consistent, attractive, and responsive web pages across different
devices and platforms.

❖ Examples of CSS in web design :

● Setting Fonts and Typography


● Creating Layouts
● Adding Backgrounds and Borders, etc.

❖ Tools of CSS :

Text Editors and Integrated Development Environments (IDEs)

● Visual Studio Code: A popular and versatile text editor with built-in support
for CSS, including syntax highlighting, code completion, and debugging.
● Sublime Text: Another lightweight and highly customizable text editor used
by many developers for CSS and other web development tasks.

Gyanmanjari Innovative University 12 iSpark


● Atom: A hackable text editor for the 21st century, with a rich ecosystem of
plugins and packages for CSS development.

CSS Preprocessors:

● Sass (Syntactically Awesome Style Sheets): A CSS extension language


that adds features like variables, nesting, and mixins, making CSS more
maintainable and scalable.
● LESS: Another CSS preprocessor that extends CSS with variables, mixins,
nested rules, and functions.

CSS Frameworks:

● Bootstrap: A popular front-end framework for building responsive and


mobile-first websites, providing CSS and JavaScript components for common
UI elements.
● Foundation: A responsive front-end framework similar to Bootstrap but with
its own set of components and customization options.
● Tailwind CSS: A utility-first CSS framework that provides low-level utility
classes to quickly build custom designs without writing custom CSS.

CSS Grid and Flexbox Tools:

● CSS Grid Generator: Online tools like grid.layoutit.com and


cssgrid-generator.net help in visually designing CSS Grid layouts and
generating the corresponding CSS code.
● Flexbox Playground: Websites like flexboxfroggy.com and
flexboxdefense.com provide interactive tutorials and challenges to learn
and practise Flexbox layout techniques.

CSS Optimization Tools:

● CSS Minifiers: Tools like cssnano and uglifycss minify CSS files by
removing unnecessary whitespace, comments, and optimising the code for
faster loading times.
● Prefixing Tools: Autoprefixer (autoprefixer.github.io) automatically
adds vendor prefixes to CSS rules based on browser support, ensuring
compatibility across different browsers.

Gyanmanjari Innovative University 13 iSpark


Browser Developer Tools:

● Every modern web browser (Chrome, Firefox, Safari, Edge, etc.) includes
built-in developer tools that allow developers to inspect and debug CSS styles
applied to web pages, modify styles in real-time, analyse performance, and
more.

CSS Validation Tools:

● W3C CSS Validator: A tool provided by the World Wide Web Consortium
(W3C) that checks CSS code for syntax errors and ensures it follows CSS
standards (jigsaw.w3.org/css-validator/).

Online Resources and Communities:

● Websites like css-tricks.com, developer.mozilla.org, and


w3schools.com provide comprehensive documentation, tutorials, and
examples for learning and mastering CSS.
● Online communities like Stack Overflow, Reddit (r/css), and CSS-specific
forums are valuable resources for asking questions, sharing knowledge, and
● seeking advice related to CSS development.

❖ Properties of CSS :
● Typography
● Colours and Backgrounds
● Box Model
● Positioning
● Flexbox and Grid Layout
● Text and Typography
● Animation and Transitions

❖ Conclusion : Overall, CSS empowers web designers and developers to


craft visually appealing, functional, and accessible websites. Its versatility and
comprehensive set of features make it an indispensable tool in modern web
development, enabling the creation of engaging user interfaces and seamless
user interactions. As web technologies evolve, CSS continues to evolve with
new features and capabilities, further enriching the possibilities for creative
and responsive web design.

Gyanmanjari Innovative University 14 iSpark


❖ TASK : Create a “subscribe“ button using HTML and
CSS.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

<title>Subscribe Button</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<button class="subscribe-btn">Subscribe</button>

</body>

</html>

CSS (STYLES.CSS)

/* Basic styling */

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

Gyanmanjari Innovative University 15 iSpark


align-items: center;

height: 100vh;

margin: 0;

.subscribe-btn {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 10px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

border-radius: 4px;

transition: background-color 0.3s ease;

.subscribe-btn:hover {

background-color: #45a049; /* Darker green on hover */

Gyanmanjari Innovative University 16 iSpark


Explanation:

➔ HTML:
We have a simple button element with a class subscribe-btn.

➔ CSS:
The .subscribe-btn class styles the button:

● background-color: Sets the background color of the button.


● border: Removes the default button border.
● color: Sets the text color to white.
● padding: Adds internal spacing inside the button.
● text-align, font-size, margin, cursor,
border-radius: Miscellaneous styling properties for
appearance and behavior.
● transition: Smoothens the background color change on
hover.

.subscribe-btn:hover styles the button when hovered over, changing the


background color to a darker shade.

➔ Usage:
● Copy the HTML into an .html file and the CSS into a .css file (or
embed within <style> tags in the HTML <head>).
● Adjust the styles (colors, sizes, etc.) as needed to fit your design
preferences.
● This basic example can be enhanced with additional CSS for more
complex designs or animations.

Gyanmanjari Innovative University 17 iSpark

You might also like