Scribd
Upload
14 views

CSS in HTML

This document provides an introduction to CSS (Cascading Style Sheets) and HTML, covering basic syntax, selectors, the box model, typography, colors and backgrounds, responsive design with media queries, and best practices. CSS is used to describe the visual presentation of HTML documents and allows for separation of concerns between content and presentation. CSS enables consistent and accessible user interfaces across devices.

Uploaded by

Hero Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

CSS in HTML

This document provides an introduction to CSS (Cascading Style Sheets) and HTML, covering basic syntax, selectors, the box model, typography, colors and backgrounds, responsive design with media queries, and best practices. CSS is used to describe the visual presentation of HTML documents and allows for separation of concerns between content and presentation. CSS enables consistent and accessible user interfaces across devices.

Uploaded by

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

CSS in HTML

An introduction to HTML and CSS, basic syntax, selectors, box model,


typography, colors and backgrounds, and responsive design with media
queries.
by Hero Khan
What is CSS?
1 Cascading Style Sheets 2 Separation of Concerns
A language used to describe the visual Allows for a clear separation of content and
representation of a document written in presentation, making it easier to maintain
HTML. and update your website.
3 Better User Experience 4 Increased Accessibility
CSS enables us to create consistent, By separating presentation from content, we
intuitive and visually appealing designs to make it possible for assistive technologies to
enhance the user experience. better interpret information on our pages.
CSS Selectors

Universal Selector Class Selector Attribute Selector


Targets all elements on a page. Targets elements that match a Targets elements with a specific
Use sparingly. specific class name. attribute.

Descendant Selector
Targets an element that's a
descendant of another element.
The Box Model
Padding Box Margin Box
The space between the content and The space between the border of an
the border of an element. element and surrounding elements.

1 2 3 4
Content Box Border Box
Holds the content of an element The border around an element.
(text, images, etc.)
CSS Typography
Font Families Text Alignment
Choose from a wide variety of web-safe and Align text to the left, center, right, or justify.
custom fonts.

Line Height Text Decoration


Adjust the spacing between lines of text for Add emphasis to text with underline,
improved readability. strikethrough, and other styles.
CSS Colors and Backgrounds

Color Theory Gradients Background Images


Understand the basics of color Use gradients to add depth and Add images to background for
theory to create effective and dimension to your designs. visual interest and branding.
impactful designs.
Responsive Design with Media Queries
1 Mobile First
Design with mobile devices in mind first,
then scale up for larger screens.
Media Queries 2
Write CSS rules that apply under certain
conditions so your page looks good on
all devices. 3 Flexible Layouts
Make sure your designs are flexible, so
they can adapt to different screen sizes
and resolutions.
CSS Best Practices
1 Code Organization 2 Consistency
Organize your code in a logical, reusable, Be consistent with naming conventions,
and maintainable way. formatting, and spacing.
3 Accessibility 4 Performance
Ensure your designs meet accessibility Optimize your code for faster load times and
standards for users with disabilities. better user experience.

You might also like