Getting started with CSS

5 min readOct 6, 2020

What is CSS

It is Not a programming language
It is a Styling language
Not used for content, but for presentation

Let’s take a look at the syntax:

A CSS style starts with a selector to apply the style to. Next comes in an opening and closing curly braces that are used to denote the start and the end of the style that apply to the selector. Everything between the curly braces will be styles that apply to the HTML element that matches the selector. Inside the curly braces is one or more property value pairs, each of the pairs defines a property such as color, font size, width etc. and a value for that property.

p = selector

property = color

value = blue

Let’s move on to selectors:

CSS contains many different types of selectors but the main selectors are element, class and ID selectors. The above picture is an example of an element selector that turns all P tags red. Any HTML element can used as a selector and the style that is defined for that selector will apply to all HTML element of that type.

CLASS SELECTOR:

By far the most common and useful selector is the class selector. The class selector let’s you select HTML elements based on their class attribute. All HTML element can have attributes assigned to them such as an href for an <a> anchor tag. A class is an attribute that all HTML elements can have, and is used with CSS to distinguish elements for specific styling. The class attribute can have multiple different classes in the same attribute as long as they are separated by a space. In order to select an element by class, we need to use a period (.) before the class name as the CSS selector. This period tells CSS that whatever follows is a class name and not an HTML element name.

The style is applied to the HTML elements with class “intro”.

“.” symbol is used to specify class.

ID SELECTOR:

The last common selector is the ID selector. The Id selector is very similar to the class selector, in that, it is an HTML attribute but an element can have only one ID while it can have multiple classes. An ID also should be unique across the entire webpage. To use an ID as a selector, you simply need to use a # sign followed by the ID name much like how classes use period (.) followed by the class name.

The style is applied to the HTML element with Id “top”.

“#” symbol is used to specify Id

How to Load CSS

External CSS:

Other than Inline and Style Element, the best way to define a CSS styles is to use an External CSS file and link to it from the HTML. All the styles for the entire webpage can be found in one or more CSS files and they can be added to any webpage by using a simple link element inside the head. The link element can be used to link files to the HTML and it’s main use is to link CSS files. The link element is also an empty element that uses the “rel” attribute, which stands for relationship which defines the relationship between the linked file and the HTML document. In the case CSS, the “rel” attribute will be stylesheet since CSS is a stylesheet for the HTML. The only other attribute that we need to define is the “href” attribute This attribute works exactly the same as the “href” attribute of an anchor tag and should point to either your CSS file or url of another person’s CSS file.Using external CSS file like this is the best way to use CSS since it separates the presentation and contents of websites and allows reusability of styles across the website.

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to the HTML like this:

Some quick CSS styling tips:

1. Absolute positioning

Use top, right, bottom and left, accompanied by a pixel value to control where an element stays.The CSS above sets the position of an element to stay 20px from the top and right edges of your browser.

2. Hover effects

This is used for buttons, text links, icons, and more. If we want something to change colors when someone hovers their mouse over it, use the same CSS, but add :hover to it and change the styling. This changes the color of the h2 tag when someone hovers over it.The great thing about using :hover is that we don’t have to declare the font-size or weight again, if it isn’t changing. It only changes what is being specified.

3. Resize images to fit

Using the max-width we can specify that the largest the image could ever be is 100%, and the height is automatically calculated based on the image width.