CSS is as a whole and it refers to the actual stylesheet language. On the other hand, CSS3 is the latest version of CSS. Like any other software, CSS also upgraded its version three times. On December 17, 1996, W3C published the CSS that we call CSS1. See more detail about the CSS history. Likewise, the next version is called CSS2, and then CSS3 (final/forever version). But all those are the CSS itself as a whole. Not to mention, sometimes you may hear about CSS4 but it does not exist. One of CSSWG (CSS Working Group) members said: They’re all CSS3 […]
Read More →
CSS stands for “Cascading Style Sheets.” It’s a stylesheet language and not exactly a programming language. The history of CSS CSS was created 25 years ago. On December 17, 1996, W3C (World Wide Web Consortium) officially published it. [ref] Hakon Wium Lie (Håkon) first proposed the concept of CSS on October 10, 1994. And Bert Bos was an influencer & he is a co-creator of CSS. [ref] If you’re curious enough, check the brief history. The second version of CSS (CSS2) was released on November 04, 1997 (first public working draft). Finally, the latest version of CSS (CSS3) was published […]
Read More →
CSS position is one of the most used properties that confuses many web designers & developers. In this post, I will explain this property in depth. Hopefully, this will make things clear. Let’s get started. CSS position property There are 5 different values for the CSS position property: static, fixed, relative, absolute & sticky. The static is the default value. And the absolute is the most puzzle piece among them. Let’s discuss & make things clear. Static position As I mentioned, the static is the default value. Think of it as a normal situation on your web page. Fixed position […]
Read More →
Centering anything horizontally is easy but centering vertically is a little bit trickier. The display: block; margin: 0 auto; will center an HTML element horizontally. On the other hand, you can center anything vertically in a few different ways. In this post, I will show you two different ways to vertically center anything. And you can think of these two methods as the blueprints of centering elements. Centering vertically with Flexbox The HTML markup matters while centering with Flexbox. That means you have to organize or wrap your HTML elements in a specific way before you write the CSS. See the markup or structure below: HTML MARKUP You have to […]
Read More →
In this post, I will show you how to write comments in your HTML document & CSS file. You’ll also learn keyboard shortcuts for them. This will be a fairly very quick & short post. Let’s get started. How to write HTML comments? No matter if you write a single line or many lines of comment, the syntax is the same in HTML. This statement is also true about CSS comments. HTML comment The above is an example of an HTML comment. You can also break the comment into multiple lines. See the example below. Multiline HTML comment HTML comment […]
Read More →
This post will show you CSS background-color property in depth. I will also give you an overview of the background property. And explain their differences. Let’s get started. background-color property In CSS there is a background-color property that can implement & change the background color of certain HTML elements. This color could be hex code, RGB, RGBA, CMYK, and even names. If you need inspiration, I have listed 148 color names, hex code, RGB & CMYK in another post. Protip: Use the Pixie color picker to copy color values from any objects. Place the cursor anywhere on your computer and […]
Read More →
This post will show you how to connect your stylesheet to an HTML file. Also, you’ll learn different approaches to writing CSS. For example, inline, embed & external CSS. It means there are three ways to write CSS for your HTML documents. Here you’ll learn all of them. Let’s get started. Linking external stylesheet or CSS to your HTML file The above line will work if your HTML file and the stylesheet live in the same directory. Assuming that the name of your stylesheet or the CSS file is “style.css” See the screenshot below: And the above line of HTML […]
Read More →
The most commonly used CSS for rounded corners Example of rounded corner Use the border-radius: 30px; property to make rounded corners. Not to mention, you can use any value instead of the 30px. CSS round corners with fill color Round corners and fill with color Use the background: #FFE797; property to fill with color (you can use any color code). And useborder-radius property to make rounded corners. CSS for button or link round corners Rounded Link Rounded Button Different border-radius for different corners Four unit border-radius Lorem ipsum dolor sit amet consectetur adipisicing elit molestias at et ducimus error dolorem […]
Read More →
CSS strike through is not an exact property but you can achieve this goal with text-decoration. This is an example of css strike through. Also, you can use the class name to apply the text-decoration: line-through; property. Strikethrough certain word(s) Consectetur adipisicing elit necessitatibus sit quaerat liquid. HTML <del> versus CSS strike through (text-decoration: line-through) Also, you can use HTML <del> tag for the same purpose. And this <del> tag is semantically meaningful to web browsers. Especially if you are going to display outdated content or which content is not applicable at a certain context. The pricing tables are a great example of the basic uses of this <del> tag.This is an example of deleted text or strike through. Basic Package Premium […]
Read More →
Center a div both in vertical and horizontal directions using two different methods. In this post, I explained the CSS to centering a div using flexbox, positioning, and auto margin. Also, I mentioned one of the common fixes for CSS absolute position.
Read More →