Getting started with Web Development: Basic CSS Styling

Photo by Hal Gatewood on Unsplash

What is CSS?

• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on a screen, i.e. it describes the presentation of your webpage.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS controls everything from the color of your text, the font, alignment to the background of your website, so needless to say it is a vital tool for any web designer.

CSS Syntax:

selector { property1 : value ; property2: value }

• Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. We can also define custom classes or even ids. More on that later.
• Property − A property is a type of attribute of HTML tag. They could be color, border etc. Multiple properties are separated by a semicolon.
• Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

Designing a basic website with HTML+CSS:

Here’s how the above code looks:

The <style> tag is used to do internal CSS styling. There are two other ways of doing so:

1. External styling: An external style sheet can be written in any text editor, and must be saved with a .css extension. It should not contain any HTML tags. It can then be applied to our HTML document using link tag in Head.
2. Inline styling: To use inline styles, just add the style attribute to the relevant element. eg: <h1 style =” color : blue; ”> text </h1>. However this is not usually preferred as not all browsers support it.

Breakdown of the code:

• Body, p and h1 here are selectors, specifically element selectors, i.e. those which select HTML elements based on the element name.
• Background-color is a CSS property that does exactly what the name suggests- it sets the background color.
• Color property in <p> changes the text color while text-align centers the text. Text-align can also take left, right and justify as values.

Some Useful CSS Properties:

• color: used to change color of text (can take values like blue, lightgrey or specific hex, hss or rgb values)
• font-family: to specify font of a text. CSS ahs some generic font families like serif and monospace. However you can download more fonts using sources like Google Fonts. To know more follow this link: https://www.w3schools.com/css/css_font_google.asp
• font-weight: to make text bold.
• font-style: to make text italic.
• background-color: can change background color of any html element like a <div>,<p> or the entire body.
• background-image: adds a background image.

• margin-top
• margin-left
• margin-bottom
• margin-right ( The margin properties can take a specific value like 20px, a percentage value or auto where the browser calculates the margin)
• padding
• border-width
• border-style
• border-color
• text-shadow: Adds shadow to text

More on CSS in our next article. Stay tuned!