Lädt...


🔧 VANILLA CSS BASICS YOU SHOULD KNOW


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

BASICS OF CSS (Cascading Style Sheets)

Here in CSS, we get a target and pick up that specific element which we want to work on, from the web page.

How CSS works.

CSS has mainly 2 parts, that is to say;

  • Selectors
  • Declaration:This is also divided into : property and then, value.

THREE LEVELS OF CSS;

Inline CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

Internal CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

External CSS

  • For this case, CSS file is linked to the index.html file.

  • When compiling the CSS code, CSS also bases on priority. In such case, inline CSS always has the highest priority, followed by internal CSS then external CSS.

CSS SELECTORS

  • These selectors enable us to know how to select elements from the html file. For the CSS selectors, we just need to know the type of selector we want to use, and also what it does to the target element.

The following are some of the common CSS selectors used.

Universal Selector: When such selector is used, everything in the html file (all the html tags) is targeted or selected.

For example:
*{
background-color: grey
}

This means that all the webpage will have a background color of grey

Individual Selector

  • This targets individual elements for example, <p> targets all paragraphs in the index.html accordingly.
  • In case you want each paragraph to have its own color or look, we can then go for *Class or Id selectors.

Class and Id Selectors

  • For the class selectors, we use a dot while applying it .Then for an id selector, we use a hash (#) when applying it.

For example;
.warning{
align items: center;
}

  • An id name should not be applied or used multiple times, although, even when you do so, there would be no error thrown in our file during compilation. But this would be a bad coding practice.

  • Yet for a class name, you can use the same name multiple number of times .

Child Selector

  • In this selector, we target the child of the parent element.
  • For example: nav ul{ display: flex }
  • This means we are targeting the ul element which is a child of the parent, nav.

We also have other selectors

  • Like the nth child selector.

The most commonly used selectors are the class and id selectors

NOTE:

  • When using colors for CSS, it is always best practice to use standard color codes (like #4d4d4d) unlike word colors like red or green.

  • This is because, different browsers view the colors in different ways, but if color codes are used, this acts like a standard overall color which is viewed as the same color even in different browsers.

MARGIN AND PADDING.

  • Margin is the amount of space from the outside and padding is the amount of space from inside where the text is.*

Note: We only apply FOCUS to input tags.

POSITIONS ON CSS

Absolute;

  • This gives position of the target depending on the parent webpage, that is, border of the whole web page.

Relative;

  • This gives position to the target element depending on the body or boxes in which the current target is ,that is, depending on the original position of the target.

Sticky;

  • This gives position to the target, and after this, it will not move to another position.

Fixed;

  • After applying this, the target won't be changed or modified. It would be in this position fixed as it had been allocated.

FLEX BOXES

When flex is applied, it means that the target elements can be placed in only one horizontal dimension.

  • Therefore, flex is unidirectional. When using flex, we flex the parent. And based on the parent, the child will behave.

Incase we want dynamic display, this is where we can use grid.

  • Grid is therefore bidirectional.

CONCLUSION

We use CSS to modify our webpages as it helps us to easily style our text.

...

🔧 VANILLA CSS BASICS YOU SHOULD KNOW


📈 46.14 Punkte
🔧 Programmierung

🔧 🌟 Why You Should Use a CSS Preprocessor (SCSS) Over Vanilla CSS


📈 37.42 Punkte
🔧 Programmierung

🔧 Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 35.47 Punkte
🔧 Programmierung

📰 Vanilla OS: More Than Just Vanilla GNOME With Ubuntu


📈 29.3 Punkte
📰 IT Security Nachrichten

📰 How to Check Vanilla Gift Card Balance 2025: Quick Steps for Your Vanilla Visa Gift Card


📈 29.3 Punkte
📰 IT Security Nachrichten

🐧 Vib (Vanilla Image Builder) is Vanilla OS's tool for building container images using YAML recipes.


📈 29.3 Punkte
🐧 Linux Tipps

🔧 You Should Know CSS. My questions to level up your CSS skill


📈 28.61 Punkte
🔧 Programmierung

🔧 Tailwind CSS vs. Vanilla CSS: When to Use Each for Your Web Development Projects


📈 28.53 Punkte
🔧 Programmierung

🔧 Creating an animated text gradient with Tailwind CSS (and vanilla CSS)


📈 28.53 Punkte
🔧 Programmierung

🔧 Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 27.76 Punkte
🔧 Programmierung

🔧 Should I Choose Tailwind or Vanilla CSS?


📈 27.29 Punkte
🔧 Programmierung

🔧 It’s not what you know, it’s how you know you know it


📈 27.06 Punkte
🔧 Programmierung

🐧 The More You Know, The More You Know You Don’t Know (Project Zero)


📈 27.06 Punkte
🐧 Linux Tipps

🔧 10 Tell-Tale Signals You Should Know To Know Before You Buy Compensation For Asbestos


📈 23.75 Punkte
🔧 Programmierung

🔧 CSS Guide: Basics of CSS


📈 23.71 Punkte
🔧 Programmierung

📰 NIST AI Risk Management Framework: What You Should Know and Why You Should Care


📈 23.62 Punkte
📰 IT Security Nachrichten

🔧 Level Up Your Web Development: Why You Should Ditch jQuery for Vanilla JavaScript


📈 23.54 Punkte
🔧 Programmierung

🔧 I can't code HTML CSS by myself even though i know the basics and theory why help me


📈 22.6 Punkte
🔧 Programmierung

📰 What is SSH and how do you use it? The secure shell basics you need to know


📈 22.04 Punkte
📰 IT Nachrichten

🔧 Despite AI: you should know these CSS snippets!


📈 21.67 Punkte
🔧 Programmierung

🔧 The 5 modern CSS tricks that you should know


📈 21.67 Punkte
🔧 Programmierung

🎥 You Should Know These 7 CSS Responsive Sizing Features


📈 21.67 Punkte
🎥 Video | Youtube

🔧 15 Time-Saving Websites You Should Know As A CSS Developer


📈 21.67 Punkte
🔧 Programmierung

🔧 I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript


📈 21.59 Punkte
🔧 Programmierung

🔧 10 Best Websites for Free Vanilla CSS Templates


📈 21.59 Punkte
🔧 Programmierung

🔧 Vite Vanilla JavaScript with Tailwind CSS


📈 21.59 Punkte
🔧 Programmierung

🔧 Text Typing Effect in HTML CSS and Vanilla JavaScript


📈 21.59 Punkte
🔧 Programmierung

🔧 Infinite horizontal scroll, vanilla CSS


📈 21.59 Punkte
🔧 Programmierung

🔧 How to Build a Weather App with HTML,CSS and Vanilla JavaScript


📈 21.59 Punkte
🔧 Programmierung

🔧 10 Best Websites for Free HTML Templates Vanilla CSS


📈 21.59 Punkte
🔧 Programmierung

matomo