what does "|" do in function calls?

It is an binary OR operator.

If you have a 3 bytes , say 00001000, 00010000,01100010,

when you binary OR all these, the result shall be bitwise OR of each of the bits i.e.
01111010

Rules for ORing:
0 | 0 = 0
0 | 1 = 1
1 | 0 = 1
1 | 1 = 1

To add:
WS_CHILD , WS_VISIBLE etc are bit flags..i.e. in a DWORD ( 2 bytes ) of data, only 1 bit is set to high ( 1 ) . All other bits are low ( zeroes )

for example WS_CHILD could be 0x00000001 and WS_VISIBLE may be 0x00000010 ( actual values are different, just keeping it simple here )

So, when you saw WS_CHILD | WS_VISIBLE, it becomes 0x00000011

which means that , your window needs to be child as well as visible , since those bits are set.

There could be overlaps.. some styles may not be combined together.
Also, note that for some window classes, where probably you have exceeded 32 bits, they have what is called a extended style WS_EX ;)

Yeah I know about the extended styles. But the 14 edit control and 27 window styles are normal and not extended styles.To find that out, it is sufficient to look at the actual WS_XXX definitions in Winuser.h:
#define WS_OVERLAPPED 0x00000000L
#define WS_POPUP 0x80000000L
#define WS_CHILD 0x40000000L
#define WS_MINIMIZE 0x20000000L
#define WS_VISIBLE 0x10000000L
#define WS_DISABLED 0x08000000L
#define WS_CLIPSIBLINGS 0x04000000L
#define WS_CLIPCHILDREN 0x02000000L
#define WS_MAXIMIZE 0x01000000L
#define WS_CAPTION 0x00C00000L /* WS_BORDER | WS_DLGFRAME */
#define WS_BORDER 0x00800000L
#define WS_DLGFRAME 0x00400000L
#define WS_VSCROLL 0x00200000L
#define WS_HSCROLL 0x00100000L
#define WS_SYSMENU 0x00080000L
#define WS_THICKFRAME 0x00040000L
#define WS_GROUP 0x00020000L
#define WS_TABSTOP 0x00010000L

#define WS_MINIMIZEBOX 0x00020000L
#define WS_MAXIMIZEBOX 0x00010000L

#define WS_TILED WS_OVERLAPPED
#define WS_ICONIC WS_MINIMIZE
#define WS_SIZEBOX WS_THICKFRAME
#define WS_TILEDWINDOW WS_OVERLAPPEDWINDOW

/*
* Common Window Styles
*/
#define WS_OVERLAPPEDWINDOW (WS_OVERLAPPED | \
WS_CAPTION | \
WS_SYSMENU | \
WS_THICKFRAME | \
WS_MINIMIZEBOX | \
WS_MAXIMIZEBOX)

#define WS_POPUPWINDOW (WS_POPUP | \
WS_BORDER | \
WS_SYSMENU)

#define WS_CHILDWINDOW (WS_CHILD)
You can see that WS_OVERLAPPED is actually 0 (which just means the absence of other window type styles). Likewise, WS_CAPTION is just a combination of WS_BORDER and WS_DIALOGFRAME. Same for WS_TILED, WS_ICONIC etc. The flags WS_GROUP and WS_TABSTOP are reused for WS_MINIMIZEBOX and WS_MAXIMIZEBOX, since the first two only make sense for child windows, while the other two can't be used with child windows. Several of the constants are just synonyms for others, so you end up with only 16 different window style flags.
In the same way, the 14 ES_XXX styles are actually only 13 (ES_LEFT is again 0):
#define ES_LEFT 0x0000L
#define ES_CENTER 0x0001L
#define ES_RIGHT 0x0002L
#define ES_MULTILINE 0x0004L
#define ES_UPPERCASE 0x0008L
#define ES_LOWERCASE 0x0010L
#define ES_PASSWORD 0x0020L
#define ES_AUTOVSCROLL 0x0040L
#define ES_AUTOHSCROLL 0x0080L
#define ES_NOHIDESEL 0x0100L
#define ES_OEMCONVERT 0x0400L
#define ES_READONLY 0x0800L
#define ES_WANTRETURN 0x1000L
#if(WINVER >= 0x0400)
#define ES_NUMBER 0x2000L
#endif /* WINVER >= 0x0400 */