The Coding Express

In the last two article, we learned about pseudo-classes in CSS and also done some interesting examples to practice it. Hope you have checked the link given in the last article, where we get a complete list of pseudo-classes in CSS. It is very easy to learn them when you know what the concept is used in it. Moving forward, today it's time for pseudo-elements. Let's begin... Pseudo...again Just like the pseudo-classes, pseudo-elements are used to style specified parts of an element. They can be useful in styling particular letter of text or insert content after some specified character using CSS. Syntax The syntax for pseudo-elements is similar to that of pseudo-classes: selector:: pseudo-element {     property: value; } Note : We used single-colon for pseudo-classes while double-colon for pseudo-elements . The ::first-line Pseudo-element As the name suggests, ::first-line pseudo-element is used to select first-line of any text. It is important to note that,

In the last article, we learned about pseudo-classes in CSS and completed one example related to links where we change the color of links based on pseudo-classes applied to it. In this article, we are going deep inside pseudo-classes so that we can use them more powerfully. Let's begin... Let's Create a Custom Tooltip The tooltip is a common graphical user interface element which provides more information about an element on the screen. It generally appears when we hover over a particular element. Let's create it using pseudo-classes... The first-child Pseudo-class The first-child pseudo-class matches a specified element that is the first child of another element. In web development many times we have to access a first child of a particular element. So to make it easy, this class is in-built in CSS. Match the first <a> element This will match any <a> element that is the first child of any element. See the Pen &lt;a href='https://codepen.i

In the last article, we learned about combinators in CSS which helps to select elements in various fashions in a very easy way. You are going to use them frequently in your web development. You must have noticed, on various websites the if you have already visited a particular link, it shows up in a different color. Also, when you hover over buttons, they show various effects like a change in color, etc. In today's article, we are going to learn the same using pseudo-classes. Let's begin... What are Pseudo-classes? Some of the elements in HTML like a link, div or paragraphs have some special states which can be accessed by using pseudo-classes. Syntax selector: pseudo-class {     property: value; } Various Pseudo-classes related to links The best way to use pseudo-classes is on the element link. Let's see how... See the Pen WDS55-1 by blackbird ( @blackbird98 ) on CodePen . Using pseudo-classes with CSS selectors See the Pen WDS55-2 by blackbird ( @bla

In the last article, we learned to align various elements including text and images in both vertical and horizontal way. Now it is very easy for us to align elements in the way we prefer. Moving forward, as of now we are using the just single element as CSS selector which is one of the element name, class name or element id. In today's article, we are going to learn to combine these simple selectors to form more complex selector in CSS. Let's begin... Need of Combinators Combinators help us to create complex CSS selector which selects the elements more precisely to apply CSS properties on them. The following four different combinators are in CSS: descendant selector( space ) child selector( > ) adjacent sibling selector( + ) general sibling selector( ~ ) Descendant Selector The descendant selector matches all elements that are descendants of a specified element. The selectors are separated by space in between them. To select all the images that are in

In the last article, we learned about inline-blocks in CSS which helps us to get the same effect as we get by using float and clear properties. Hope you have tried examples given in the previous article. In today's article, we are going to learn about align property in CSS so that you can align text wherever you want. Let's begin... Center Align Element To horizontally center a block element: margin:auto; If you set up the specified width, the element will take that much space and remaining space will be split equally between the two margins. Center Align Text To center the text inside any element: text-align: center; Center an Image To center an image, change the image into a block element and set left and right margin to auto. display: block; margin-left: auto; margin-right: auto; Left or Right Align Element Using Position Let us see how to right align element... position: absolute; right: 0px; Using Float Let us see how to rig

In the last article, we learned about practical examples of float property and also created a sample website look using float and clear properties. In this article, we are going to see another way to do it using inline-block . Let's begin... We have already seen that it is possible to create div 's that fills the width of browser and they resize accordingly when the browser resizes. We can achieve same by using inline-box value of display property. Let's see how... Without display property #floatingElement{     float: left;     width: 100px;     height: 50px;     margin: 5px;     bordr: 2px solid black; } #otherElement{       clear: left; } Using display property #floatingElement{     display: inline-block;     width: 100px;     height: 50px;     margin: 5px;     bordr: 2px solid black; } You can try, this both codes with multiple floating boxes and you will get the same output. I am keeping this as homework📝 to you... Th

In the last article, we learned about float and clear properties in CSS and also seen two examples involving both of them. Now in this article, we are going to see some problems while using them and some practical examples. Let's begin... Too much height If you have tried it(or mistakenly encountered it 😎), if the height of an element is taller than element containing it, and it is floated then that element will overflow outside of its container. To solve this issue, we can add overflow: auto; to the containing element to fix this issue. Let's see an example... See the Pen WDS51-1 by blackbird ( @blackbird98 ) on CodePen . Practical example We can create entire web layout using float and clear properties now. I have given one below. You should just see the output and try to code to see how far you can reach... You can definitely style it much more using concepts of CSS we have learned but I have presented simplistic output. Try... See the Pen WDS51-2 by blackbi

Hi, here we are...Today is the 50th article of the 'Web Development Series'. Although 50 is a really small number, still we all have managed to learn something new every day about web development. Starting with no knowledge of web development, today we have almost complete knowledge of HTML and we are going strong in CSS. The Coding Express already has 55 followers on Twitter.Let's hope this journey never ends... Follow @theCodingExprs Some changes... Added Twitter timeline to sidebar Each post will contain link to Twitter post Let's begin... In the last article, we learned about overflow property in CSS and also code one example involving various values for overflow property. In today's article, we are going to learn about float property which is used extensively in CSS layouts. The float property The float  CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap

In the last article, we learned about positions in CSS and also created one example involving each of position available in CSS. Today we are going to study about overflow property in CSS. Let's begin... The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container. The overflow property has the following values: visible - This is the default. The overflowing content is not clipped. It renders outside the element's box. hidden - The overflowing content is clipped and rest of the content will be invisible. scroll - The overflowing content is clipped but scrollbar is added to see the rest of the content. auto - If overflow is clipped, a scrollbar is automatically added. overlay -  Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browser

In the last article, we learned a little bit about positions in CSS. Now in today's post let's continue learning about positions in CSS. Let's begin... position: static This is the default value for position property. The elements which are positioned with the static value are not affected by the top, bottom, left and right properties. The element with static value is positioned in the normal flow of page without any special treatment. div {     position: static; } position: relative An element with a relative as the value of position property is positioned relative to its normal position. We have to set top, right, left or bottom properties of the relatively positioned element will cause to set its position relative to original position. div {     position: relative;     left: 40px; } position: fixed An element with position: fixed; is positioned such that its position will not change even if the page is scrolled. The top, left, bottom and right propert

In the last article, we learned about CSS display property which helps us to change between inline and block values for different elements. In today's article, we are going to study some more important properties related to width and position of elements. When and why to use max-width As we have seen while learning HTML... The  max-width  property is used to set the maximum width of an element. All the possible values are same as width property with  none  as default which means there is no restriction on maximum width. In the case of above  div , if you decrease the width of browser window below specified width then you will get the horizontal scrollbar. If we use  max-width  instead, the browser will handle small windows properly. Let's see an example in CSS to do it: Now let's move to the position property in CSS... The position property The position property is used to specify how to position that particular element. The following values can be used

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... 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; propert

In the last article, we learned basics about customising tables in web pages using CSS. There are some more things about customising tables. Let's begin... Table Padding To set the space between content and borders, use padding property on <td> and <th> elements. td, th {     padding: 5px; } Horizontal Dividers Sometimes instead of the complete box like tables, horizontal lines make look tables great. You can add horizontal lines after each element and heading by using border-bottom property to <th> and <td> elements. th, td {     border-bottom: 2px solid black; } Color the Headings th {    background-color: black;    color: white; } Striped Tables Make alternate rows look different by using color on either on even or odd rows. tr:nth-child(even) {     background-color: gray; } Let's make one cool table with CSS... First, see the output and then try to code yourself. There is one thing in code that

In the last article, we learned about customising lists with CSS properties and also created one cool looking list. Now in today's article, we will style tables in HTML using CSS. Let's begin... Table Borders To give borders to the table using CSS, we have to use border property which is same as we used till now. The only catch is which elements, will you select to apply border for? To get the outer border to table, select table element. To get the border to all headings, select th element. To get the border to all elements, select td element. Final Syntax: table, th, td {     border: 1px solid black; } If you run the above syntax if you notice our table is looking pretty bad(admit it...). The reason behind this is that there are double borders everywhere. This is because <th> and <td> elements have separate borders. What to do remove this double borders?  There is CSS property named border-collapse.  Apply this property to the table and set its va

In the last article, we learned about customising links on the web pages and even learn to convert a link into beautiful button without using any button element. Now in this article, we are going to customise lists in web pages with the help of CSS. Let's begin... Changing List Markers The list-style-type property allows changing the type of list marker using CSS. We can do this same thing also using HTML syntax but it is always better to have our styling in CSS file so that we can change it easily. Following values are available for unordered lists: disc square circle none Following values are available for ordered lists: decimal decimal-leading-zero (decimal numbers padded by initial zeros) lower-roman upper-roman lower-greek lower-latin upper-latin lower-alpha upper-alpha none An Image as List Item Marker The list-style-image property specifies an image as the list item marker. ul{     list-style-image: url('sample.png'); }