CSS - Howto learn, best resources

CSS - Howto learn, best resources

Written by Ghost on Sep 1st, 2019 Views Report Post

Hello Guys & Girls, I am Robert and i will explain you how to use CSS. I will collect good code snippets and links for your CSS journey. I want to explain how you can learn CSS directly and fast. If you learn CSS you can improve your design talents.

CSS is a simple technique to format elements which are available in the dom of your website. 

last update of this tutorial : 01.09.2019

I will update it regulary and improve this tutorial, hope you enjoy. :)

What is CSS and why I should use it?

CSS stands for Cascading Style Sheets.

CSS is a great way to format and style websites and web documents. CSS is supported by all modern browsers and is defacto a web standard, every good web developer know CSS.

If you want to style your website - CSS is the best way!

You can include CSS inline directly in html code. That is called inline css. The simplest but badest programming style.
But the better way is to put all your CSS in an extra file.

How CSS look

The syntax of CSS is clean and very easy you can learn some simple commands, normaly all commands are logicaly.

Include your CSS-file

To work with CSS you should add all your css commands to an .css file. It is an plain text file. To put all your code into an file is much better as inline CSS ;)

Here you can see how you can set a link to your CSS file. After that the magic happens! And you have added your first CSS file successfully to your website!

<!DOCTYPE html>  
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
ok now let's start with formating some elements.

Styling body

Here we start with styling the <body> element of your page. With the following snippet you can style the whole body-element of your website. The two lines style your background in red and align your text to the center of the page.

/* style the body-element */

body {
    background-color: red;
    text-align: center;
}

Styling headlines

Here I show you how you can format h1, h2, h3.

/* formating the h1 */

h1 {
    color: blue;
    font-size: 40px;
}

/* formating the h2 */

h2 {
    color: red;
    font-size: 30px;
}

/* formating the h3 */

h3 {
    color: green;
    font-size: 20px;
}

Styling Tables

It's also possible to style complex elements like tables.
Here you see how you can format the table itself, the th and the td-elements.

/* this will style the table, the th and td elements */

table, th, td {
  border: 1px solid black;
  padding: 5px;
}

With the following snippet you can format an website link.

The snippet makes unvisited links red, visited orange and hover color is darkgreen.

/* this formats unvisited links */
a:link {
  color: red;
}

/* this will format visited link */
a:visited {
  color: orange;
}

/* here you can design the hover style */
a:hover {
  color: darkgreen;
}
Styling body

css-tricks.com is a great ressource with cool articles:

https://css-tricks.com/

on w3schools you will find great examples:

https://www.w3schools.com/css/default.asp

You can use scratchpad to test html and css live directly in your browser:

http://scratchpad.io

https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

Comments (0)