Introduction to CSS

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be displayed.

CSS is made up of selectors and declaration blocks:

  • Selectors are used to declare which element or elements a set of CSS styling rules will apply to.
  • Declaration blocks contain one or more declarations that apply styles to the selected elements. Each declaration includes a CSS property name and a value, separated by a colon.

Example of CSS syntax:

selector { property: value; }

Here’s a simple example:

p { color: blue; font-size: 16px; }

In this example, p is the selector, and the declaration block contains two declarations. This CSS rule will apply a text color of blue and a font size of 16px to all paragraphs (<p> elements) in the associated HTML document.

There are three primary ways to integrate CSS into a webpage:

  • Inline Styling:
    • Inline styling involves adding the style attribute directly to the HTML tag
  • Internal (or Embedded) CSS:
    • Internal CSS involves adding the <style> tag within the <head> section of the HTML document and defining the styles there.

  • External CSS:
  • External CSS involves linking an external .css file to the HTML document using the <link> tag.
<p style="color: red; font-size: 16px;">This is a red colored, 16px sized text.</p>
<!DOCTYPE html>
 <html lang="en"> 
<meta charset="UTF-8"> 
<title>Internal CSS Example</title>
p { color: blue; font-size: 18px; }
<p>This is a blue colored, 18px sized text.</p> 
HTML File:
<!DOCTYPE html> 
<html lang="en"> 
<head> <meta charset="UTF-8">
 <title>External CSS Example</title>
 <link rel="stylesheet" href="styles.css"> </head>
 <p>This is a green colored, 20px sized text.</p> </body> 

CSS File: 
{ color: green; font-size: 20px; }

Practice CSS:

Table of CSS Attributes

please find the full list of attributes on the website of the W3C.

Attribute Description Example
color Sets the color of text. color: red;
font-size Sets the size of the font. font-size: 16px;
text-align Sets the horizontal alignment of text. text-align: center;
line-height Sets the amount of space above and below inline elements. line-height: 1.6;
margin Sets the outer margin of an element. margin: 10px;
padding Sets the inner padding of an element. padding: 10px;
border Sets the border around an element. border: 1px solid black;
background-color Sets the background color of an element. background-color: yellow;
width Sets the width of an element. width: 100px;
height Sets the height of an element. height: 100px;
display Sets how an element should be displayed. display: block;
position Sets how an element is positioned in its parent element. position: relative;
opacity Sets the opacity level for an element. opacity: 0.5;
border-radius Defines the radius of the element border corners. border-radius: 5px;
box-shadow Adds shadow effects around the element’s frame. box-shadow: 5px 5px 5px grey;
z-index Sets the stack order of an element. z-index: 1;

Table of CSS selectors

Selector Description Example
.class Selects all elements with the specified class attribute. .intro { color: blue; }
#id Selects the element with the specified id attribute. #firstname { color: red; }
* Selects all elements. * { margin: 0; }
element Selects all elements with the specified tag name. p { text-align: center; }
element,element Selects all specified elements. div, p { margin: 5px; }
element element Selects all elements inside the specified element. div p { color: red; }
element>element Selects all elements that are direct children of the specified element. div>p { color: blue; }
:hover Selects elements when you mouse over them. a:hover { color: orange; }