Series: Dive into Web Front-End Programming
CSS enables us to change the style of the content. It controls how the content is rendered.
A CSS rule is made up of a selector and a group of declarations. A CSS declaration consists of a property (e.g.,
color) and a value (e.g.,
Here is an example of typical CSS rules:
This post mainly focuses on CSS positioning. But before that, I’d like to introduce some frequently used CSS propertyies. To learn CSS, you don’t have to know it property by property. Instead, you can totally get to know a new property once you meet with it. Although to be a good Web designer, you need to have a good command of coloring, in this post, we are just going to have a basic idea of it.
There are several types to represent colors. You can use words like
yellow and etc. for color names. But they’re quite limited. A full list is available at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Usually, we can represent a color using the proportion values of red, green and blue. In CSS, a hex value
#f31492 or an RGB group value
rgb(24, 52, 200) can be used to represent colors.
For hex value
#f31492, the first two digits
f3 are used to present the red proportion, the next two digits
14 are for green, the last two digits
92 are for blue. Since two hex digits can represent values from
ff, each of red, green, blue components are from 0 to 255. So,
#f00910 is equal to
rgb(240, 9, 16).
If the hex value is formed like
#ff7733, it can be abbreviated to
color is used to set the color of text, while
border-color set the color of background and border respectively.
If you don’t set the width and height of a component, it depends on the content.
If the width is set, the height depends on the content.
If both width and height are set, the content may overflow.
You can set the overflowed content to be hidden using
overflow: hidden;, or display a scroll bar when overflow using
overflow: auto. If you don’t want a horizontal scroll bar, you can set
overflow-x: hidden; overflow-y: auto;.
px unit, which stands for pixel, you can also use percentage to represent width and height.
width: 80%; set the width to be 80% of its parent’s. For
width: 100% and
height: 100% are the width and height of the browser content, which is equal to
Margin is the outside distance from other elements, while padding is the inside distance from its child elements. Let’s see the following example to have a general idea.
Use Inspect Element of Chrome or Firebug of Firefox to have a more deep understanding of this example.
CSS position can sometimes be confusing and in this post, I’m going to talk about it in detail.
display is one of the CSS properties that determines position, whose frequently used values are
Different elements have different default values for
display, even possibly different default values in different Web browsers. For example,
block by default, while that of
inline by default. We can overwrite
display using CSS as we can always do with other CSS properties.
Next, I’m going to explain what these values mean in detail.
display: block takes the position of area of its own size and the right area of its parents. It’s quite ambiguous to say so… Let’s see it in an example.
Because the default value of
block, here although the total width of the red block and the green one is less than that of the yellow block, the green block is shown below the red one, rather than at the right side of the red one.
Use Inspect Element of Chrome or Firebug of Firefox to see the
marginof these elements and the highlighted area when hovering an element in Inspect Window.
We set the
display property to be
inline-block to the previous example and now the green block is shown right to the red one, since their total width are less than their parent’s width.
Please pay attention to how the green block is aligned with the red one.
If you are wondering about the gap between the elements, see StackOverflow: display: inline-block extra margin.
The gap can be easily removed by writing the red and green block in the same line with no space in-between.
If we set
display property to be
inline to the previous example, we’ll see they are not displayed at all.
In fact, we can’t say they are not displayed. Let’s see another example.
You see in this example that they are displayed when there’s text in them. You can see now that when
display is set to be
inline, the element is rendered, but we can’t control other properties like
padding and etc. any more. You may find it a little confusing, but this is very useful in some cases. For example, we can use
<span style="color: red"></span> to highlight some content without changing the text’s position.
As we can guess from this code, elements with
display: none will not be displayed. Why bother writing elements that are not displayed? You may find it extremely helpful when you want to toggle some elements to display and hide.
You may probably be familiar with setting an image to float to left or right in Office Word. In CSS, you can also float elements to left or right of its parent. But careful! It can be somehow surprising to you.
Basically, you can set
float of the element to be
none if not to float.
Why isn’t yellow displayed?
This is because when an element is set to be
float: left or
float: right, it’s height will be no longer counted when computing its parent’s height. So you may need to do as following. See CSS Tricks for more information.
You may find
display: inline-block and
float: left are quite similar in some ways. So how should we choose between them?
The first thing you need to note is that
display: inline-block align at top vertically, while
float: left align at bottom.
We talked about some useful CSS properties in this post and most importantly, how to control the position of elements. By the end of this post, you should have learnt how to implement Web designs into code. But practice is extremely important in learning HTML and CSS. You need to be patient and learn bit by bit.
You are welcomed to tell me if you find this series helpful and about how you would like me to improve it to help you learn better.
The inspiring news is that you can make Web sites now!
To build a Web site, you should first design what to show and how to display it. Since we haven’t talked about how to design yet, in this homework, you are given a design image and your task is to implement the design (including all description in the image).
I suggest you put your code on GitHub and share a link as comment to this post, so that we can discuss more about it.
Here we give a possible solution. You should ask yourself why this is different from your implementation and ask me if you have any wonder. :smiley: You can use jsFiddle to share your code.
A better way to check this is to run the demo and use Inspect Element for information.
Series: Dive into Web Front-End Programming
View All Posts