Categories
CSS

Styling text in CSS

There are few properties that are used for text styling in CSS. They are enormously used in CSS when it comes to styling a web page. Following properties are all related to text styles. p { color: #333333; text-indent: 60px; text-align: center; text-decoration: underline; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; line-height: 20px; direction: rtl; word-spacing: […]

Categories
CSS

Setting Width and Height of an element in CSS

Setting width and height of an element is a useful but not always important to do that. There are plenty more properties that you can achieve your solution such as grid and flex box. We will cover these in another post. Height and Width properties go parallel to each other. Properties of width and height […]

Categories
CSS

How to use margin in CSS

Margin is used to create more space between the elements. Margin is applied on the outside of an element i.e. after outline of an element. Margin can be applied either on any number of corners or all the corners. The example below explains it further. div { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; […]

Categories
CSS

How to use padding in CSS

Padding is an extra space within an element block. Padding goes around the content of an element that is before the border and outline properties of a element. Padding works very closely with margin, in fact their properties act and work the same way. However there is a slight difference between margin property and padding […]

Categories
CSS

How to add Outline to an element in CSS

Outline is a border that goes between margin and border, which mean Outline goes after the border property and before the margin property. However all the border values can be applied to outline property too. Also the colour property values can be applied on the colour too. The outline property has 3 values (outline: 3pt […]

Categories
CSS

How to add borders to an element in CSS

Border can be applied on any block or none block element. Block level element are body, div, img, p, article, header and footer etc. The border property has 3 values (border: 3pt solid red), the 3pt is the width of the border, solid is the style of outline and red is the colour pattern. The […]

Categories
CSS

Using background attachment on an element in CSS

Background attachment is used to fix or scroll an image a background image when applied on an element.. It’s normally used on a full width background image. .attachment { background-image: url(http://bracketswebsolutions.co.uk/wp-content/uploads/2019/07/background.jpg); background-size: cover; background-attachment: fixed; /* Try to change the background-attachment value to scroll, unset, inherit, local and initial to see the change */ padding: […]

Categories
CSS

How to use background image in CSS

Background image has capability to use an imagee in the bacground of a div or a paragraph etc. It gives you wider option to let repeat the background image or just position it in at one corners of the div or any other element. body { background-image: url(“https://blog.codepen.io/wp-content/uploads/2012/06/codepen-wordmark-display-inside-black@10x.png”); background-size: 200px; background-repeat: no-repeat; background-position: top right; […]

Categories
CSS

How to use background colour using colour names, RGB, HEX, HSL, RGBA and HSLA

Background colour works similarly to the text colour property. All the colour properties such as colour names, RGB, HEX, HSL, RGBA and HSLA can be applied to the background colour. Let’s have a look at each one of them in the following examples. Colour Names There are hundreds of colour names that can be applied […]

Categories
CSS

How to use CSS predefined colour names

CSS predefined colour names are very useful andd handy to use when it comes to quick solution. Compared to RGB or HEX values for colours, it gives you accurate and true colour result. These colour names can be used on anything such as border or background colour etc. The example below demonstrates the usage of […]