Scribd
Upload
143 views

CSS Shortcuts

This document provides an overview of CSS (Cascading Style Sheets) elements for styling web pages. It describes various CSS selectors for targeting different HTML elements, properties for controlling text, color, background, boxes, layout and other styles. Examples are given for setting fonts, colors, borders, padding, margins and other styles on HTML elements using CSS.

Uploaded by

Wedad Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
143 views

CSS Shortcuts

This document provides an overview of CSS (Cascading Style Sheets) elements for styling web pages. It describes various CSS selectors for targeting different HTML elements, properties for controlling text, color, background, boxes, layout and other styles. Examples are given for setting fonts, colors, borders, padding, margins and other styles on HTML elements using CSS.

Uploaded by

Wedad Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like