The Coding Express

Posts

Showing posts with the label WDS

WDS42 - Style Links

In the last article, we learned about CSS Icons and now you can easily insert favorite icons in web pages using icons library like font awesome or google material icons. Now moving forward, today we are going to customise links on web pages using CSS. Let's begin... Styling Links depending on states Now, what the heck states are? Oh, don't worry! Links on web pages are categorized in following 4 states: link - Normal unvisited link visited - A link that user has already visited hover - When a user hovers the mouse over the link active - A moment of clicking the link Now you can customise each of this states using CSS. Let's see how... How to Access States If you want to access particular state of the particular element, the syntax is as follows: element : state{ color: red; } In our case we can access, let's say visited state of the link that is a tag using: a : visited{ color: blue; } Note: While setting styles for several li

WDS41 - CSS Icons

In the last article, we learned about fonts in CSS and see how to implement it in your web pages to make it more versatile. Now moving forward, in today's article we are going to see about Icons in CSS. Let's begin... Where will I get Icons? Best and easiest way to get icons on our HTML pages is to use icon libraries which contains thousands of icons. Some of the famous icon libraries are as follows: Flaticons Icons8 Font Awesome Google Icons Bootstrap Icons We are going to use Font Awesome in our articles as they are free and literally there is the icon for most of your needs. Let's see how to use them... Font Awesome Icons To use Font Awesome icons, we first have to add the following link inside the <head> section of our HTML page: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> This will directly load icons on your web page and you don't need

WDS39 - CSS Fonts

In the last article , we learned about various properties to customise text in web pages using CSS. Customisation of text is incomplete without applying various fonts to text. So let's study about fonts in CSS. Font Family The font-family property is used to set the font family to the text. Although only one argument is required as value to this property, it is always recommended to add several font names to property as the browser will check next font names if it does not support the first font and so on. To add more than one font family, use commas to separate fonts. Font Style The font-style property is used to specify the italic text. The following three values are supported: normal - Normal text italic - Italic text oblique - Similar to italic, but not used and supported frequently Font Size The font-size property is used to set the size of the text. Size is of the following two types: Absolute size Sets text to the specified size User cannot chang

WDS38 - Customising Text (Part 2)

In the last article, we learned about various ways to customise text using CSS and in today's article, we are going to continue it. Let's begin... Text Indentation The text-indent property is used to make the indentation for the first line in the paragraph. It is also used when writing code in languages having strict indentation rules like python. Value of indentation can be expressed in any valid length units like px, em or percentages. Letter Spacing The letter-spacing is used to adjust the density of letters in the text, where positive values make letters with more spacing and negative values reduce space between characters. Line height The line-height property is used to describe space between lines in the text. The default line-height value is 1 . Text Direction The direction property is used to change direction in which text is written on the screen. The values supported are ltr (left to right) and rtl (right to left) with default as ltr . Word Spacin

WDS37 - Customise the Text

In the last article, we learned about outlines in CSS and how they are different from borders. Now I hope that you are comfortable with box model in CSS and can easily use it on web pages. Now focusing on various elements of CSS, in today's article we are seeing the text in CSS and how to customise or format it. Let's begin... Text Color The color property is used to set the color of text. Color can be specified using all the formats seen in previous articles like the color name, HEX or RGB value. Text Alignment The text-align property is used to set horizontal alignment of a text with possible values as left , right , center or justify . Text Decoration The text-decoration property is used to add or remove decorations to text. By default value of text-decoration is set to none . Following values can be used for text-decoration : overline : Line is drawn above text line-through : Line is drawn through text underline : Text is underlined Text Transformation

WDS36 - Outline our CSS

In the last article , we learned about CSS box model in detail and was really very easy concept due to the fact that we have studied padding and margin in detail. In the CSS box model main parts are: Content padding border margin This all are parts of element's height and width. There is one more element associated with the element known as the outline. Let's study it in detail... CSS Outline An outline is a line which is used to make element "stand out" outside the borders. If you look at above image carefully, you will notice that border and outline are two completely different concepts. Borders are part of height and width of the element while on the other hand outline is not the part of element's dimensions. Outline Style The outline-style property specifies the kind or style of the outline. Following values can be used: dotted : Defines a dotted outline dashed : Defines a dashed outline solid : Defines a solid outline dou

WDS35 - CSS Box Model

In the last article we learned about width and height properties of CSS in detail and now it's time to see what the CSS box model is. Let's begin... The CSS Box Model While learning CSS box model we will consider HTML elements as boxes. CSS box model is used to discuss design and layout of boxes that are HTML elements. CSS box model includes following parts: Content - This is the main and core part of the box. All the text, image, and other content are in this part. Padding - This is the area around the content. The padding is transparent. Border - Boundary around content and padding. Margin - This is the area outside the border. The margin is also transparent. That's all we have to understand. All the practical usages are already covered in padding and margins. Just remember: Total width of element = width + left margin + left border + left padding + right padding + right border + right margin Total height of element = height + bottom mar

WDS34 - CSS height and width

In the last three articles, we learned about padding and margin in CSS. Hope you have read the articles linked in the last article and you have no confusion between padding and margin now. If there is any confusion, feel free to comment and ask doubts. Now in this article, we are going to learn about width and height in CSS. Although the concept is very simple, if you don't know about this it will cause problems in learning box-model in CSS. Let's begin... CSS height and width The height and width properties are used to describe height and width of an element. We can set both of this properties to auto (default) which means browser calculates height and width . Another way is to specify length values in px, cm, etc. units or in percentage(%) of the containing block. See the Pen WDS34-1 by blackbird ( @blackbird98 ) on CodePen . About max-width The max-width property is used to set the maximum width of an element. All the possible values are same as width property

WDS33 - STORY OF TWO CSS FRIENDS (PART 3)

In the last article, we learned about padding in CSS with all it's all other properties. Now in the final part of this padding vs margin showdown, I am not going to tell you anything new. You just have to read all the following links and you will no longer be confused between margin and padding. Let's begin.. Padding vs Margin for Web Design Spacing Margin or padding? - Some thoughts on when to use which That's all for today. In the next article we are going to see something about CSS box model so that managing CSS will be easy. Till then #keepCoding.

WDS32 - Story of Two CSS Friends (Part 2)

In the last article, we learned about what actually CSS margins do and how to use them with various properties like auto and inherit . Now let's move forward to learn about padding in CSS so that we actually differentiate both and you will no longer be confused. So let's begin... CSS Padding The padding property in CSS is used to create space around the content of an element inside of defined borders. Actually, padding property is shortcut property for the following individual properties: padding-top padding-right padding-bottom padding-left In fact, padding: 10px 20px 30px 40px is same as padding-top:10px padding-right:20px padding-bottom:30px padding-left:40px. Just remember order is important while writing in the padding which is top , right , bottom and left . Note : The padding can be mentioned in any valid length unit in CSS like px, pt, cm, etc. We can also mention padding in % of the width of the containing element. Value of padding p

WDS31 - Story of Two CSS Friends (Part 1)

In the last article , we learned about how to use borders in web pages including their styling with colors, styles and rounded corners. Now in this article, we are going to see something that confuses most of the new web developers and need to be clear as soon as possible. We are going to study margins and padding in CSS. We have already studied a little bit in HTML articles, but let's study in detail and avoid any future confusion. Let's begin... There are two ways in CSS to create space around elements: margins and padding In most usages, they give the similar output.For example, if we add 10 pixels of margin or padding to the right side of the element, that element will generally move 10 pixels to left on the screen. But in reality, they both are doing this same thing in a different way. So let's see what actually happens behind the scenes... CSS Margins Basics The margin property in CSS is used to create space around the elements outside of defi

WDS30 - Let's have some Borders

In the last article , we learned about all the ways in which we can customise backgrounds in our web pages using CSS. Now in this article, we are going to learn about the use of border in CSS. Let's begin... Border Style The border-style property specifies the kind or style of the border. Following values can be used: dotted : Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines a double border groove: 3D grooved border ridge: 3D ridge border inset: 3D inset border outset: 3D outset border none: No border hidden: Hidden border If you give only one value, then all the sides of the border will have same given style. If you mention more than one values(up to four), then styling of borders on each side will be different. Border Width The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border). It can be mentioned in px, pt, cm,

WDS29 - All About CSS Backgrounds

In the last article , we learned about various ways to express CSS colors and where we can use them. Now in this article, we are going to see another important thing in web page visuals and that is background. Let's begin... CSS Backgrounds Background Color Syntax : background-color: red; Covered in the last article Color can be mentioned in any valid format learned yesterday Background Image Syntax : background-image: url("sample.png"); By default, the image is repeated so it covers the entire element. Background Repeat Syntax : background-repeat: repeat-x or repeat-y or no-repeat repeat-x: Repeat image horizontally to fill the screen repeat-y: Repeat image vertically to fill the screen no-repeat: Image does not repeat itself Background Position Syntax : background-position: value where value can be right top right bottom left top left bottom This is useful if you do not want your image to disturb the text Ba

WDS28 - All About CSS Colors

In the last article , we learned about multiple style sheets and effect of applying more than one styles to the particular element. Hope you all have tried various examples involving all types of styles. In today's article, we are going to see some CSS properties most of which we have already covered in style tag in HTML. Let's begin... CSS Colors All the standard web browsers support 140 standard colors which you can directly use by specifying the color name. Here is the link to 140 Standard Colors. You can also specify other colors by one of the following methods: RGB Value Formula : rgb(red, green, blue) Each parameter that is red, green and blue defines the intensity of the color between 0 and 255. Examples: Red: rgb(255, 0, 0) Black: rgb(0, 0, 0) White: rgb(255, 255, 255) HEX Value Formula : #rrggbb rr(red), gg(green) and bb(blue) are hexadecimal values betwwen 00 and ff (which is same as 0-255 in decimal) Examples: Red: #ff0000 Black: