CSS it’s pretty easy to use, but t’s also hard to become CSS Master. Have you ever heard about pixel-perfect web building? This is a popular requirement, for web developer positions. But what this it mean’s? For what elements of CSS you should look closer to achieve pixel-perfect design? In this post, I wrote about few CSS properties, that allow you to understand, how to achieve pixel-perfect pages thanks to CSS.
CSS Positioning
Let’s start with positioning web elements on-page. We have two types of web elements: inline and block. Inline elements take only these parts of a page, which is necessary to display the whole element in this HTML element. On the other hand block elements will take 100% width of screen size. But there is also a type called inline-block and this is the “2 in 1” category because it includes also inline and blocks behavior. In real projects, this inline-block property is used often, because it allows you to easily position elements on a webpage, and this kind of element doesn’t occupy the whole line.
So how to set the position of elements on the web?
To do this you can use CSS properties like absolute, relative, sticky, or fixed.
Absolute position properties allow you to define element position according to page begin, whit means left top corner. If there is some parent element with attribute position: relative, all parameters (top, left, right, or bottom) will be calculated according to element with attribute position: relative.
The next position property is sticky. This attribute allows you to pin some elements to the top of the page. It’s is very useful, when you want to make the header bar always visible, no matter how long the user will scroll down the page.
The last position attribute is fixed. This attribute will pin the elements to the window. Often is used to display some advertisement or politics.
CSS border
All elements on the web page have a rectangle shape. Around this shape, there is an element named border. Like in the image the border could be fat, slim, or there even could be a 0 px border. Why this is important? Because we would like to build pixel perfect page. So even 1px width border matters. What event more important, when you don’t set up border width, the web browser could set its own default border width. When we build a pixel-perfect page, this could make a total mess.
CSS padding
These properties set up white space between elements inside the box and the border. It’s useful when you’d like to make some space to peel off for example text from the border. Sometimes image from the border, or form elements from wrapping element.
CSS margin
These properties set up space between elements on the page. When some spaces between elements are set up on the page, the page looks nicer in most cases.
Let’s assume a pixel-perfect web buildings strategy. When the gap between two pieces of text should be equal to 3px, so this means that the sum should include padding properties in both boxes, margin properties in both boxes, and also border width in these two boxes. When you trying to find out why the gap between the two elements isn’t as big as you want to I suggest checking these three values.
CSS align
There is also a property well know from document editors, that allows you to align text, to the right or left side of the box, or justify and center text in the box. Using Flexbox properties, you can align all kinds of elements in the box. More about how to use flex, you can find here.
The new thing in the CSS properties family is Text-orientation. Very handy properties allow you to make all these crazy things with text, that you well know from your document editor.
CSS specificity
Finally, I would like to write something about CSS specificity. A lot of web developers don’t like using CSS, because they set something in CSS code, and this property doesn’t work. There are two main reasons why CSS properties don’t work: first -> web browser doesn’t support these properties, and second -> CSS specificity.
What exactly CSS Specificity is?
Well, there are several types of CSS style: default style, user style, inline style, external style sheets, and internal style sheets. Finally, which properties should be added to HTML elements? The name cascading style sheets are used because there are several rules, that decided which properties are finally used to display HTML elements on the web page.
First of all inline styles are on the top always. There are nested inside web elements. For example:
<h1 style=”font-size: 14px”> will be used by web browsers for sure.
Secondly, style nested in HTML document file in <head> tag will be used before styles described in an external file like style.css
But what if some properties aren’t set in the CSS file or inside the HTML file?
The web browser will check if the user sets some default CSS properties in the web browser client. If so, this kind of property will be used. If not web browsers have their own default properties, and they will use it.
Usually, web developers insert CSS code in an external file. But even in this situation, there are three roles that allow you to figured out which CSS properties will be used. In big pictures, more specified pointer have more points and have a chance to be used. The most specified pointer is id.
As you know id can be used only for one element on the page. When you describe more than one element on the page using these same id values, there is a huge chance to make some mistakes. So id is considered unique.
Less unique is class. You can describe several elements on the web page in these same classes, and nothing wrong will happened. So class is less specified than id. The lowest specified value has HTML tags like p or div.
You can also imagine that one CSS property is assigned to some id, class, and even from some HMTL Tag. What in this case? To count CSS specificity value you should give 1 point for each id, class, and HMTL tag.
For example CSS property described as #big .header .h1 gained [1 1 1] because in square brackets there is places to count each values like this [id, class, HTML tag]. So we give 1 point to each element to get a 111 score value. Second CSS property is like this .header .h1 so it’s get [0 1 1 ] score value 11. This means the first CSS property will be used.
There is a nice tool to calculate CSS Specificity: https://specificity.keegan.st/
That’s all about CSS Properties. If you want to know more, let me know in a comment.