CSS

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"> 
<head> 
<meta charset="UTF-8"> 
<title>Internal CSS Example</title>
 <style> 
p { color: blue; font-size: 18px; }
 </style> 
</head> 
<body> 
<p>This is a blue colored, 18px sized text.</p> 
</body> 
</html>
HTML File:
<!DOCTYPE html> 
<html lang="en"> 
<head> <meta charset="UTF-8">
 <title>External CSS Example</title>
 <link rel="stylesheet" href="styles.css"> </head>
 <body>
 <p>This is a green colored, 20px sized text.</p> </body> 
</html>

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

Practice CSS:

codeacademy.com

Table of CSS Attributes

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

AttributeDescriptionExample
colorSets the color of text.color: red;
font-sizeSets the size of the font.font-size: 16px;
text-alignSets the horizontal alignment of text.text-align: center;
line-heightSets the amount of space above and below inline elements.line-height: 1.6;
marginSets the outer margin of an element.margin: 10px;
paddingSets the inner padding of an element.padding: 10px;
borderSets the border around an element.border: 1px solid black;
background-colorSets the background color of an element.background-color: yellow;
widthSets the width of an element.width: 100px;
heightSets the height of an element.height: 100px;
displaySets how an element should be displayed.display: block;
positionSets how an element is positioned in its parent element.position: relative;
opacitySets the opacity level for an element.opacity: 0.5;
border-radiusDefines the radius of the element border corners.border-radius: 5px;
box-shadowAdds shadow effects around the element’s frame.box-shadow: 5px 5px 5px grey;
z-indexSets the stack order of an element.z-index: 1;

Table of CSS selectors

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