Latest revision as of 12:18, 3 May 2025

The information is obtained from w3schools.com.

To quickly test CSS code, go to online html editor website to try eg squarefree.com.

CSS

Learning

Syntax

p
{
color:red;
text-align:center;
}

where p is called selector and anything inside {} is declarations with a format of property:value.

Comments

A CSS comment starts with /* and ends with */. Comments can also span multiple lines

Selectors

https://www.w3schools.com/cssref/css_selectors.asp

selector	HTML	css
tag/type/element selector	<p>Every paragraph will be affected by the style.</p>	p { text-align:center;color:red; }
id selector	<p id="para1">Hello World!</p>	#para1 { text-align:center;color:red; }
class selector	<p class="center">Red and center-aligned paragraph.</p>	.center { text-align:center;color:red; } p.center { text-align:center;color:red; }

"element" selector

p {  text-align:center;color:red; }

The html example is

<p>Every paragraph will be affected by the style.</p>

Default CSS Values for HTML Elements

id selector

id selector is for one instance.

#para1  { text-align:center;color:red; }

The html example is

<p id="para1">Hello World!</p>

class selector, "element.class" selector

https://www.w3schools.com/cssref/sel_class.asp

.center { text-align:center;color:red; }

You can also specify that only specific HTML elements should be affected by a class.

p.center { text-align:center;color:red; }

The html example is

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

Real example in Chapter 9 <Style3Column.htm> of Creating a Website. The CSS has

.Header {
  text-align: center;
  background-color: rgb(210,210,210);
  color: white;
}
.LeftPanel {
  position: absolute;
  top: 75px;
  left: 10px;
  width: 150px;
  background-color:#eee;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  padding-bottom: 8px;
}
.RightPanel {
  position: absolute;
  top: 75px;
  right: 10px;
  width: 150px;
  background-color:#eee;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  padding-bottom: 8px;
}
.CenterPanel {
  margin-left: 161px;
  margin-right: 161px;
}

The Html has

<body>
<div class="Header"> ... </div>
<div class="LeftPanel"> ... </div>
<div class="RightPanel"> ... </div>
<div class="CenterPanel"> ... </div>
<div class="Class1 Class2"> ... </div>
</body>

group selectors

h1,h2,p { text-align:center;color:red; }

The html example is

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

Three ways to insert CSS

External style sheet: link tag

HTML: link tag, How to Create Printer-friendly Pages with CSS.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal style sheet

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>

Inline style sheet

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Cascading order (last one has the highest priority)

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

Box Model

Border

We can create border for a paragraph or an image (CSS [attribute~=value] Selector).

Padding

Space between texts and border box.

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Color

body {background-color:#b0c4de;}
body {background-image:url("paper.gif");}
body {background:#ffffff url("img_tree.png") no-repeat right top;}

A simple example is this page.

Text

Color, alignment, decoration and indentation, fonts, styles

body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

a {text-decoration:none;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

p {text-indent:50px;}

p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Text shadow

How to Use CSS text-shadow: 11 Tricks and Examples

CSS font size

Links

https://www.w3schools.com/Css/css_link.asp

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */

Lists

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

Tables

table, td, th 
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

See here for a link to create a fancy table.

Dimension (Width and height)

img.normal  { height:auto; }
img.big { height:120px; }
p.ex { height:100px; width:100px; }

Positioning

http://www.w3schools.com/css/css_positioning.asp How to show overflow in an element using scroll]

Float

An image with a caption that floats to the right
the example of creating a horizontal menu
the example of creating a homepage without tables (partition of a webpage)

F and Z-pattern

How To Build F and Z-Patterns Using HTML and CSS

Horizontal Align

Tips:

Use percent (%) instead of pixels (px).
Use margin:auto

.center
{
  margin:auto;
  width:70%;
  background-color:#b0e0e6;
}

How to Center Images

How to Center Images With CSS

Vertical Align

Pseudo-elements

The ::first-line pseudo-element is used to add a special style to the first line of a text.

Navigation Bar

li { float:left; }
a { display:block; width:60px; }

Image gallery

Image Opacity/Transparency

Creating transparent images - Hover effect
Creating a transparent box with text on a background image
Text in Transparent Box

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

Sprite editor

Pixel art
Pixelorama 2D Sprite Editor v0.6 Adds Support For Color Palettes, Multiple Themes
Piskel is a free online editor for animated sprites & pixel art

All Examples

http://www.w3schools.com/css/css_examples.asp

30 Seconds of CSS

mentioned in this article

Printing

Using CSS to Format Documents for Printing

Grid for Magazine-Style Layouts

Using CSS Grid for Magazine-Style Layouts

How to view CSS

This is useful if we want to copy relevant part of the code for our use by using the tag <STYLE type="text/css"> ... </STYLE>

Search "css" in the source code
Download css file to a local machine
Open the css file in VS code
Use View -> Command Palette -> type "Format Document".

CSS3

Box

Shadow. How to Use CSS box-shadow: 13 Tricks and Examples
Rounded corners

2D transform

Transition

Animation

Multiple columns

Check out the last example

Free and open source framework

simplecss

Simple.css {}

SASS

Sass (Syntactically Awesome Style Sheets).
https://www.w3schools.com/sass/sass_intro.asp
SASS is a CSS preprocessor that extends the capabilities of CSS by adding features like variables, nested rules, mixins, and functions.
- SASS makes it easier to write and maintain complex stylesheets by providing a more powerful and flexible syntax.
- There are two syntaxes for SASS: the older, indented syntax (Sass) and the newer, more CSS-like syntax (SCSS).
SCSS (Sassy CSS) is a syntax of SASS. It is a superset of CSS, meaning that any valid CSS is also valid SCSS. SCSS allows you to write CSS in a more powerful and flexible way, using the features provided by SASS.
A preprocessor is a type of software used in programming. It processes input data, often source code, before it is passed to the compiler or another program. The preprocessor performs various tasks such as macro substitution, file inclusion, and conditional compilation. In the context of web development, preprocessors like SASS process your stylesheets before they are converted into standard CSS. This allows you to use advanced features like variables, nesting, and mixins, which are not available in regular CSS.
Understanding CSS Preprocessors
Popular CSS preprocessors with examples: Sass, Less, Stylus and more

Simpel example from Copilot

Shell

mkdir project; cd project
npm init  # package.json will be generated
npm install sass # node_modules directory and package-lock.json 

mkdir scss
nano scss/styles.css

nano package.json

npm run sass # Compiled scss/styles.scss to css/styles.css.
             # Sass is watching for changes. Press Ctrl-C to stop.

scss/styles.scss file

$primary-color: #3498db;
$secondary-color: #2ecc71;

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: $primary-color;
}

h1 {
  color: $secondary-color;
  border-radius: 10px;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          color: $secondary-color;
        }
      }
    }
  }
}

There are several ways to compile
- Command line tools: Run sass styles.scss styles.css to compile the SCSS file to CSS.
- Code editor plugins: Plugins like Live Sass Compiler in VS Code can automatically compile SCSS to CSS.
- Build tools: Tools like Webpack (input is webpack.config.js & output is also a js file) or Gulp can manage SCSS compilation as part of your development process. package.json file. Add "scripts": { "sass": "sass --watch scss:css" } to the file.
```
{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass": "sass --watch scss:css"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "sass": "^1.78.0"
  }
}
```

Link the compiled CSS file (and include js file like <script defer src="main.bundle.js"></script>) to your HTML.
index.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Example directory structure

myproject/
├── css/
│   └── styles.css
├── node_modules/
├── scss/
│   └── styles.scss
├── package.json
└── index.html

NCI Design System - Getting Started for Developers