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
A language used to describe the visual
representation of a document written in
HTML.
3 Better User Experience
CSS enables us to create consistent,
intuitive and visually appealing designs to
enhance the user experience.
2 Separation of Concerns
Allows for a clear separation of content and
presentation, making it easier to maintain
and update your website.
4 Increased Accessibility
By separating presentation from content, we
make it possible for assistive technologies to
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
Media Queries
Write CSS rules that apply under certain
conditions so your page looks good on
all devices.
1 Mobile First
Design with mobile devices in mind first,
then scale up for larger screens.
2
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.