In the last article, we learned to customise tables using CSS and also created a cool table with special effect. Did you all able to create that one? Comment for any doubts...
Today we are going to see one of the most important CSS property and it is used in almost every element you create.
Let's begin...
We studied this concept deeply previously here:
WDS13 - Block Level and Inline Elements
Read the above post before moving forward...
Similarly, try changing default display value of span.The default value for span element is inline. Change it to block so that each span element will be created on a new line instead of one after another.
That's all for today. We will some more applications for this while learning javascript where you will have more control over the elements. In the next article, we will study some more important properties.
Till then #keepCoding.
Today we are going to see one of the most important CSS property and it is used in almost every element you create.
Let's begin...
The display property
The display property is used to specify how the element is displayed. Every HTML element has a default display value depending on what type of element it is associated with it. The default display value for most elements is block or inline.We studied this concept deeply previously here:
WDS13 - Block Level and Inline Elements
Read the above post before moving forward...
display: none;
display: none; is commonly used to hide and show elements without deleting and newly creating them. We need javascript to achieve this. As we are not familiar with javascript yet, just remember that what the concept is. When the element has display: none; property, the page will be displayed as if that element is not there. By using javascript you can remove this property, to get element back.Change default property
Until today, we never wrote display property explicitly in any CSS use, but you can use that to the change default behavior of that element. For example, by giving display: inline; to li element which represents the list elements, the list will be displayed with all its elements in one line instead of default one item per line.Similarly, try changing default display value of span.The default value for span element is inline. Change it to block so that each span element will be created on a new line instead of one after another.
That's all for today. We will some more applications for this while learning javascript where you will have more control over the elements. In the next article, we will study some more important properties.
Till then #keepCoding.
Comments
Post a Comment