Dr.
Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags
Adding CSS to web page
<head> <title>title </title> External CSS
<link href="css_file.css" type="text/css" rel="stylesheet"/> </head>
<head> <title>Titles</title> <style> External CSS
@import url("css_file.css"); </style> </head>
<head> <title>Titles</title> Internal CSS
<style type="text/css"> Css elements </style>
<style type="text/css"> body{cokor:black;} </style>
<html tag style="color:red;"> Inline CSS
CSS Selector
*{} All elements in the page
h1, h2, h3 { } <h1>, <h2> and <h3> elements
.class { } Elements with class name
p.class { } P with class name
#id { } Element with id name
e1>e2 { } e2 elements that are direct children of e1
e1 e2 { } Any e2 elements inside e1 element
e1+e2 {} First e2 element after (sibling) e1 element
e1~e2 {} All e2 elements after (sibling) e1 element
pseudo-selector
e:hover{} When mouse over e element
e:focus{} When clicking of e element
e:visited{} If e element was visited
e:required {} For required e element
e:checked {} When e element is checked
e:first-child {} Style for first child of e element
e:last-child {} Style for last child of e element
e:nth-child(num) {} Style for nth child (given in ()) of e element
E:nth(2n) one every 2 element and so on
e:only-child {} If e has only one child
e:last-of-type {} Last element of type e
e:first-of-type {} first element of type e
e:not(selector( Any e do not have selector
[att=”v”] Any element that has attribute named att =v = exact match, ^= start with,
$= end with, *= inside anywhere
[att] Any element that has attribute named att
Colors
s { color: DarkCyan; } Text color of s element with three ways
s { color: #ee3e80; } of giving color
s { color: rgb(100,100,90); }
s { background-color: rgb(200,200,200); } Background color of s element
s { background-color: DarkCyan; }
1
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags
s { background-color: #ee3e80; }
s { background-color: white; }
s { background-color: rgb(0,0,0); opacity: 0.5; } Two ways to give background color with
s { background-color: rgba(0,0,0,0.5); } opacity
Text
s { font-family: "Courier New", Courier, 3 choices of fonts for s element
monospace;}
s { font-size: 12px;} Font size 12 pixels
s { font-size: 200%;} Font size 200% of 16 px
s { font-size: 1.3em;} Font size 1.3* 1 em=1.3*16px
@font-face { font-family: 'new name'; Downloading new font and name it
src: url('url’);} Using this new font
s { font-family: “new name”, Georgia, serif;}
Text shape
s { font-weight: bold;} font-weight: Bold, normal, bolder, 100,200…
s { font-style: italic;} font-style: Italic, normal
s { text-transform: uppercase;} text-transform: uppercase, lowercase, capitalize
s { text-decoration: underline;} text-decoration: none, underline, overline, line-
through, blink
s {line-height: 1.4em;} Increasing the line-height increase vertical gap
between lines
s { letter-spacing: 0.2em;} Space between letters
s {word-spacing: 1em;} Space between words
s { text-align: left;} text-align: left, right, justify, center
s { vertical-align: text-top;} vertical-align: text-top, baseline, text-bottom
s { text-indent: 20px;} Space from left, it can be -ve
s { text-shadow: 2px 2px 7px horizontal distance, vertical distance, blur amount,
#111111;} color
s.intro:first-letter {css style } Pseudo class of first letter
s.intro:first-line {css style } Pseudo class of first line
Boxes
s { height: 300px; width: 300px; } Height, width of boxes around s element
s { height: 75%; width: 75%; } 75% of the containing element size
s { min-width: 450px; max width or height the boxes might cause text to
max-width: 650px;} will not be larger than overwhelm to another
s { min-width: 450px; min width or height the boxes element if not enough
max-width: 650px;} will not be smaller than space given
s {overflow: hidden;} overflow: for overwhelming
what to do: hidden, scroll
s { border-width: 2px;} 2px for each line of border
s{ border-width: 1px 4px 1px 4px; Value for each line top, right, bottom, left
2
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags
border-top-width: 20px Value for top border
border-right-width:20px Value for right border
border-bottom-width:20px Value for bottom border
border-left-width:20px } Value for left border
s {border-style: solid;} Style of box solid
s {border-style: dotted;} Dots
s {border-style: dashed;} Dashes
s {border-style: double;} Double line
s {border-style: groove;} Craved into page
s {border-style: ridge;} Stick out from page
s {border-style: inset;} Embedded to the page
s {border-style: outset;} Coming out from page
s {border-style: none;} No border. Default value
s {border-color: #0088dd;} Color for border
s { border-color: #bbbbaa Color for each side of border
#111111 #ee3e80 #0088dd;}
s{ border: 3px dotted #0088dd;} Border width style and color of box
s { padding: 10px; Padding from all sides
padding: 10px 5px 3px 1px; Padding for each side
padding-top: 10px; Padding from top
padding-right: 10px; Padding from right
padding-bottom: 10px; Padding from bottom
padding-left: 10px; } Padding from left
s { margin: 20px; margin from all sides
margin: 1px 2px 3px 4px; margin for each side
margin-top: 1px margin from top
margin-right: 1px margin from right
margin-bottom: 1px margin from bottom
margin-left: 1px } margin from left
s { margin: 10px auto 10px auto;} auto margin to right and left to make it
center always
s { display: inline;} Display: inline, block or none. make
element inline block or hidden
s { visibility: hidden;} Make element hidden but keep the space
s { box-shadow: 5px 5px 5px 5px Make box shadow values are horizontal
#777777;} distance, vertical distance, blue amount,
spread of shadow
s{ border-radius: 10px;} Rounded corner with radios value
List Style Type
OL { list-style-type: lower-roman;} OL style can be decimal, decimal-leading-zero,
lower-alpha, upper-alpha, lower-roman, upper-
roman
3
Dr. Jamil Alagha
BSWE 4327 - Programming Web HTML Shortcuts Tags
UL { list-style-type: disc;} UL style can be none, disc, circle, square
ul { list-style-image: url("url.png") ;} UL style can be image
ul { list-style-position: inside;} Position of marker can be inside or outside
Layout
e { position static;} each block-level element sits on top of the next
one (normal flow)
e { position relative To more element from where it was in normal
top: 10px; left: 100px;} flow using top, left, right, bottom.
The position is preserved ( no element will occupy
it)
e { position: absolute; More element and lift the position for other
top: 0px; left: 500px; elements (like it does not exist)
width: 250px;} Movement will be in relation to the containing
e { width: 450px;} element (that has position)
e { position: fixed; Move and lift the place to other elements
top: 0px; left: 50px;} Move to new place in relation with browser
windows
e { position: fixed; z-index to show one element over another when
top: 0px; left: 0px; overlapping happens
width: 100%;
z-index: 10;}
e { position: relative;
top: 70px; left: 70px;}
e { float: right; Floating element to the right of the page always
width: 275px; } If it applied to multi elements next to each other
will be side by side
e { clear left ; } To clear float from element
Left, right, both floating
e1 { float: left; Two elements float left to make two columns
width: 620px; margin: 10px;} layout
e2 { float: left;
width: 300px; margin: 10px;}
Dr. Jamil Alagha
BSWE 4327 - Programming Web
University of Palestine
