CSS3


Basic

Inline, Embedded, External CSS

Fonts and colors

Formatting

Boxes

Backgrounds

Lists

Links

Medium

Display and Visibility

Positioning and Floating

Clear and overflow

The z-index

Rounded corners

Shadows

Transparency effect

Advanced

Gradients and backgrounds

Transitions

Transforms

Filters

CSS meaning and history

CSS stands for Cascading Style Sheets and it is a language used to define the layout of HTML documents. It was firstly released in 1996 by W3C to facilitate page layout and decrease page size.

CSS allows to create a standard design for your website, defines the fonts to use, the sizes, the colors, all using a few line of code and without having to repeat them for each element.

It is very easy to learn and gives more possibility than the actual HTML formatting, imagine to have a website with 300 pages with standard text formatting where titles are blue and text is black and you want to change these colors and maybe also the size of the fonts. It will take ages to edit all 300 html files.

Well, with CSS you can actually do it in 1 minute!

On November 2014 W3C release the latest CSS version, CSS3 introduced media queries for responsive websites and more.

CSS3

Inline, Embedded and external CSS

There are 3 different ways of incorporating a CSS style in an HTML file.

The first one is the inline: using CSS directly in the HTML tags.

The second is to have an embedded internal CSS in the head section of the html file.
That allows you to be a little more flexible and of course you can style tags already existing like body, p, h1, etc. or create complete new styles to apply to the tags in your document.

But the best and easy way is always to create an External CSS file, it just need a link in each html pages and the changes done to this css file will be applied to all pages connected to it.

There is always the possibility to use a combination of the 3 to create even more personalized styles, however this is not recommended.

All you need to create a CSS file is a text editor, the one you use for HTML is usually more than enough but really also Notepad can do it

In Line:
<p style="color:black; size:16px">
  My black 16px text
</p>

Embedded:
<head>
  <style>
    p {
           color:black;
           size:16px;
           }
  </style>
</head>

External CSS:
<link href="style.css" rel="stylesheet">



Tools


Web development free apps

Web development

All softwares you need to design your websites. There are plenty of free tools that can be used to design a website.

Create a website
Coding apps for free

Coding

All you need to start coding. All free softwares that allow you to write your code and develop apps from scratch.

Create an app
Free Database tools

Databases

Create and query databases with these softwares. With these tools you can create, query and modify your own databases.

Query a database

Connect