⚡️ CSS - Quick Guide
You can’t do without it - CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML. Alongside HTML and JavaScript, it is one of the core technologies of the World Wide Web and is essential for creating visually appealing websites and user interfaces.
What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML. Alongside HTML and JavaScript, it is one of the core technologies of the World Wide Web and is essential for the creation of visually appealing websites and user interfaces.
Main features of CSS
- Separation of content and presentation: CSS allows developers to separate the content (HTML) from its visual presentation.This makes it easier to maintain and update the design of a website without compromising the structure.
2 Selectors and properties: CSS works by applying styles to HTML elements using selectors. Selectors target HTML elements, and properties define how these elements should be styled.For example:
p {
color: blue;
font-size: 16px;
}
This rule applies to all <p> elements so that their text is blue and the font size is 16 pixels.
3 Cascading and inheritance: “Cascading” in CSS refers to the priority scheme used to determine which style rules apply when multiple rules can be applied to the same element. CSS also supports inheritance, which means that child elements can inherit styles from their parent elements.
- Box model: CSS uses the box model to describe the layout and design of HTML elements. The box model consists of margins, borders, padding and the content area. Understanding the box model is crucial for designing layouts.
5 Responsive design: CSS enables responsive design, where websites adapt to different screen sizes and devices.This is often achieved with media queries that apply styles based on the properties of the device, such as width or orientation.
General CSS properties
- Color and background:
Color,Background color,Background image - Text and font:
font-family,font-size,font-weight,text-align - box-model:
width,height,border,padding,border - Layout:
Display,Position,Float,Flex,Grid - Effects:
Opacity,Transition,Transform
CSS syntax
The CSS syntax consists of a selector and a declaration block. A declaration block contains one or more declarations separated by semicolons, with each declaration containing a property and a value:
.selector {
porperty: value;
}
Beispiel:
h1 {
color: red;
text-align: center;
}
Verwendung
- Inline CSS: Directly within an HTML element using the
styleattribute.<p style="color: blue;">This is a blue paragraph.</p> - Internal CSS: Within a
<style>tag in the HTML document’s<head>.<style> p { color: blue; } </style> - External CSS: In an external
.cssfile, linked using the<link>tag.<link rel="stylesheet" href="styles.css">
Advantages of CSS
- Consistency**: Ensures a consistent look and feel across multiple pages.
- Efficiency: Facilitates global updating of styles on a website.
- Accessibility: Improves accessibility by enabling different styles for different devices.
To summarize, CSS is a powerful language for controlling the appearance of web content. It allows developers to separate content from presentation, improving both the functionality and aesthetics of websites.
“I hate CMS!”
You will come across this statement more often. The community still doesn’t agree on a final opinion of CSS. Some think CSS is terribly un-intuitive, others see CSS as an easy-to-use technology. In my own experience, I can say that CSS stops being terribly un-intuitive as soon as you learn it. CSS doesn’t come naturally, and just because someone comes from hardcore C++ land doesn’t mean they automatically know CSS.
If you hate CSS, take a step back, look at the basics (again), and be patient with progress. You’ll get there!
Gotchas in CSS
Here are some common CSS “gotchas” that can cause unexpected results, particularly for those who are getting comfortable with CSS’s quirks and intricacies:
Diva Inheritance
CSS inheritance can be tricky, as not all properties are inherited automatically (e.g., font-size inherits, but margin does not).
Specificity rules mean that more specific selectors (like #id or element.class) will override more general ones, even if the general selector appears later in the CSS. Ensure to review order and specificity of your selectors when styling doesn’t work as intended.
Content Only
By default, CSS calculates width and height based on content only, excluding padding and borders, yielding layout issues. Setting box-sizing: border-box; on elements ensures padding and borders are included in the width and height, simplifying layout consistency.
Positioning and z-index
When positioning elements, it’s easy to get caught up in z-index issues. The z-index property only works on positioned elements (position: relative, absolute, or fixed). Also, stacking contexts, which form when certain CSS properties are applied, can make z-index behave unpredictably.
Floats and Clearing
Floats (float: left or float: right) max cause parent elements to collapse if the floated elements are not cleared, resulting in layout issues (oh!). Using overflow: auto or the clearfix hack on parent containers can fix this.
Flexbox and Space Distribution
Flexbox can be a powerful layout tool, but properties like justify-content and align-items can lead to unexpected results if flex container or child properties aren’t well understood. Pay attention to default values, such as flex-shrink: 1, which can cause items to shrink unexpectedly.
Media Query Edge Cases:
Media queries may fail to activate at exact breakpoints due to fractional pixel rounding differences across devices. Setting breakpoints slightly off (like max-width: 1023.98px instead of max-width: 1024px) can make the behavior more predictable on different screens.
CSS Animations and Transitions Performance:
Heavy animations or transitions on properties like width, height, or position can lead to performance issues. For smoother animations, use transform and opacity instead, as they are generally more optimized for hardware acceleration.
Font Rendering and font-weight Differences:
Not all browsers and operating systems render fonts in the same way, leading to browser-specific messes in font-weight and general appearance. Test cross-plattform or use font smoothing properties (-webkit-font-smoothing) to address inconsistencies, though cautious is advices: Effects like these can affect readability.
Opacity and Child Inheritance:
When you set opacity on an element, its children inherit this opacity, which may not always be desirable. Instead of applying opacity to a container, use rgba color values on backgrounds to adjust transparency while keeping child elements opaque.
Unexpected Margin Collapse:
Adjacent block elements’ top and bottom margins can “collapse” into one, creating layout shifts that are hard to debug. Padding, borders, or positioning on parent containers can prevent margin collapse and stabilize layouts.
By staying aware of these potential issues, you can write CSS that’s easier to maintain and more predictable in behavior across different browsers and devices.
Conclusion
Yes, I know. CSS isn’t perfect, but who is? Me, for example? Come on! Earlier in the article I said that CSS is intuitive to use once you get to grips with it, and then I come up with a long list of CSS death traps?
The problem is that there is no simple and universal solution for all CSS process models. This starts with the fact that almost every web browser development team, whether Mozilla, Microsoft, Brave or Google, implements its own standards in the internal software engine for rendering CSS. This is why Firefox-specific properties also have the prefix moz-, to name just one example. This is often skipped in CSS 101, but is CSS to blame? Of course not. The developers behind CSS are doing their best to develop a solution that is as universal and portable as possible. A 100% cross-browser perfect solution is simply impossible to develop, and modern approaches such as SASS, Stylus or PostCSS are still based to some extent on CSS.
Look on the bright side! If CSS is so un-intuitive to use (which is only the case in the beginning), the job of front-end design is reserved for the real professionals - that makes the job much cooler!