Basics of CSS : Part 1

3 min readJun 24, 2024

Ways to use CSS Styling

Inline Styles

This is when we use style attribute in a HTML tag directly. e.g.

<p style="color: blue; font-weight:bold">I am the Best</p>

Embedded stylesheet

In this case we use style tag inside head tag to define style for elements in the page. e.g.

<style>
p {
 color:blue;
 font-weight:bold;
}
</style>

External stylesheet

This is when we use external css file and we import that in the HTML file where its styles need to be used.
To import such file use:

<link rel="stylesheet" href="styles.css" />

Normalising CSS

The styles that we set on our DOM elements are perceived differently by different browsers. So to make sure that our styles remains consistent, we need to use normalising CSS. This can be done by importing a CSS file in the HTML page before our own style file.

Basic Selectors

We can select HTML elements by type, id, class, attribute.
Below is sample basic selectors:

body {
 background-color: blue;
}

//Selecting by id
#div1 {
 color: white;
}

//Selecting by class
.section{
 font-size: 12px;
}

Selecting by attributes

//To select by a tag that has target as its one of the attributes
a[target]{
 color: orange;
}

//To select a tag by attribute that equals a particular value
a[target="_blank"]{
 color: orange;
}

//To select by attribute that has some words
a[href*="google"]{
 color: orange;
}

//To Select by attributes that start with a particular value
a[href^="https"]{
 color: orange;
}

//To select that ends with
a[href$="https"]{
 color: orange;
}

//Combining above two
a[href^="https"][href$="https"]{
 color: orange;
}

Relational Selectors

To select any p elements inside a div with id #products, use:

#products p {
 color: orange;
}

To select only direct p elements inside a div with id #products, use:

#products > p {
 color: orange;
}

To select first siblings p element that comes just after div with id #products, use:

#products + p {
 color: orange;
}

To select all siblings p elements that comes after div with id #products, use:

#products ~ p {
 color: orange;
}

Pseudo Class Selectors

Pseudo classes are classes defined by default by browsers that we can use directly.
For example first-child, last-child, first-of-type, last-of-type, nth-child() etc.

div :first-child{
 font-size: 140%;
}

//Suppose we want to apply some style to all the childs of div that are first of their kinf

div :first-of-type{
 color: blue;
}

//Suppose from above we want only on *p* type then
div p:first-of-type{
 color: blue;
}

//Same can be done with others like
div p:last-child {
 color: blue;
}

//Suppose you want to style all odd elements of a list
ul li:nth-child(odd) {
 color: pink;
}
ul li:nth-child(even) {
 color: pink;
}
ul li:nth-child(3n) {
 color: pink;
}

//To change the color of link when it is visted
a:visited {
 color: darkblue;
}

//hover effect on line
a:hover {
 color: green;
}

Pseudo Element Selectors

These are also pre-defined selectors that browsers are aware of. These are mainly used to style a part of an element. Some examples are: first-letter , . These are represented by ::

\\Suppose we want to select first letter of paragraph
p::first-letter {
 font-size: 140%;
}

p::first-line {
 color: blue;
}

//Suppose we want that on selection color should be orange use
p::selection {
 color : orange;
}

//To append ... before the paragraph content
p::before {
 content: '...';
}

Thanks for reading. Let me know if you want Part 2 of this.

Until Next Time

Saquib Aftab