Scribd
Upload
11 views

Core Concepts in CSS

Uploaded by

abdurezak.mohammed-ug
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Core Concepts in CSS

Uploaded by

abdurezak.mohammed-ug
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Core Concepts in CSS

by : Emmersive Learning

Join us :
Telegram : https://t.me/EmmersiveLearning
Youtube : https://www.youtube.com/@EmmersiveLearning/

Core Concepts in CSS

1. Selectors
Selectors are patterns used to select the elements you want to style. There are various
types of selectors, including:

● Element Selectors: Target HTML elements by their tag name (e.g., p for
paragraphs).
● Class Selectors: Target elements with a specific class attribute (e.g., .classname).
● ID Selectors: Target elements with a specific ID attribute (e.g., #idname).
● Attribute Selectors: Target elements based on their attributes (e.g., [type="text"]).

2. Box Model
The box model is a critical concept that describes how elements are structured in terms
of width and height.

It consists of:

● Content: The actual content of the box (text, images).


● Padding: The space between the content and the border.
● Border: The line surrounding the padding (if any).
● Margin: The space outside the border, separating the element from others.

Understanding the box model is essential for layout design and spacing.
A few important notes:
● Margin is always transparent; padding can have a background color
● Margins collapse into each other; padding stacks on top of each other
● Margin can have negative values; padding cannot have negative values
● Padding adds to the area of an element that can be clicked; margin does not
● Padding (and border) add to the total size of an element; margin does not

Box-sizing!
● do padding and borders count as part of the element's size, or not?
● Border box says yes! Borders and padding are part of an element's size!
● Content box says no! Borders and padding are not part of an element's size!

My recommendation? Set box-sizing to border-box on everything (*).


Always. Don't even think about it! On the rare occasion something needs to be a
content-box, you can override it.
This is one of the few things IE got right - making border-box the default while the rest of
the browsers use content-box as the default.

3. Specificity
Specificity determines which CSS rule applies when multiple rules target the same
element. It is calculated based on the types of selectors used:

● Inline styles have the highest specificity.


● ID selectors come next.
● Class selectors, attribute selectors, and pseudo-classes follow.
● Element selectors have the lowest specificity.

This hierarchy ensures that more specific rules override less specific ones, allowing for
precise styling.

4. Inheritance
CSS properties can be inherited from parent elements to child elements. This means
that if a parent element has a style applied, its children will automatically adopt that style
unless overridden. This feature helps maintain consistency across a webpage.

5. Layout Techniques
CSS provides various methods for creating layouts, including:

● Flexbox: A one-dimensional layout model that allows for responsive design by


distributing space along a single axis.
● Grid: A two-dimensional layout system that enables complex designs with rows
and columns.
● Float: An older method for positioning elements, now largely replaced by Flexbox
and Grid but still useful in certain scenarios.
6. Responsive Design
Responsive design ensures that web pages look good on all devices, from desktops to
smartphones. This can be achieved using:

● Media Queries: Allow you to apply different styles based on the viewport's size,
enabling adaptive layouts.

By mastering these core concepts, you will build a solid foundation in CSS, enabling
you to create well-structured and visually appealing web pages.

7. Best Practices
1. Use a preprocessor: Consider using a CSS preprocessor like Sass or Less to
write more efficient and modular CSS code.
2. Use a CSS framework: Use a CSS framework like Bootstrap or Tailwind CSS to
speed up your development process.
3. Write semantic HTML: Write semantic HTML code to make your CSS code more
efficient and easier to maintain.
4. Use CSS variables: Use CSS variables (custom properties) to define reusable
values and make your code more maintainable.
5. Test and debug: Test your CSS code thoroughly and use the browser's developer
tools to debug any issues.

Thank You and Happy Coding!

Mehammed Teshome

You might also like