Upgrading your HTML blog using CSS

Do you think something is missing from your HTML blog? Want to add some colors and get a classic look? that’s a simple task if know you some CSS tags!

CSS is the language we use to style an HTML document.CSS describes how HTML elements should be displayed.

In this blog, I am going to get you through some basic CSS

Lets get started…

01. Font

Getting the font right has a huge impact on how the readers experience a website. Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts — here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

In CSS, we use the font-family property to specify the font of a text.(see the following example)

Note: If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.

02. Color

The color property is used to set the color of the text.

The color is specified by:

• a color name — like “red”
• a HEX value — like “#ff0000”
• an RGB value — like “rgb(255,0,0)”

The background-color property sets the background color of an element.

03.Background

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image can also be set for specific elements, like the <p> element

Note: When using a background image, use an image that does not disturb the text.

04.Border

The border-style property specifies what kind of border to display.

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

These CSS properties will help you to enhance your blog.

The basic rule is one property shoultn’t affect another property, they should complement each other. Always keep that in mind.

Good luck with your blog post!!!