CSS terms

Lakukan tugas rumah & ujian kamu dengan baik sekarang menggunakan Quizwiz!

/* comment */

Comment

background shorthand

body {background:#ffffff url('ing_tree.png') no-repeat right top;}

text color

body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}

set text direction

div {direction:rtl;} (Right to left text)

declaration

property and value color:blue

set font size with em

1em = 16px pixels/16=em ht {font-size:2.5em;} /* 40px/16=2.5em */

external style sheet

<link rel="stylesheet" type="text/css" href="ystyle.css">

Cascading order

Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)

selector

HTML element you want to style

combination of percent and em

WORKS IN ALL BROWSERS body {font-size:100%;} h1 {font-size:2.5em;}

text décoration remove

a {text-decoration:none;}

Styling link - unvisited

a:link {color:#FF0000;}

styling link - visited

a:v

shorthand order

background-color background-image background-repeat background-attachment background-position

background image no repeat

background-image:url('gradient2.png'); background-repeat:no-repeat;

background image repeat x or y

background-image:url('gradient2.png'); background-repeat:repeat-x;

background image location

background-image:url('ing_tree.png'); background-repeat:no-repeat; background-position:right top;

background color

body {background-color:#000000;}

background image

body {background-image:url('paper.gif');}

CSS

cascading style sheets

font size absolute

ets text to a specified size, does not allow user to change text size in all browsers, absolute size in useful when physical size of output is known

set font size with pixel

h1 {font-size:40px;}

text décoration add

h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}

font family

hold several font names as a fallback system start with what you want and end with a generic family p{font-family:"Times New Roman", Times, serif;}

text alignment

ht {text-align:center;} p.date {text-align:right;}

Align text with image bottom

img.bottom {vertical-align:text-bottom;}

Align text with image top

img.top {vertical-align:text-top;}

font style

mostly for italics p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}

text indentation

p {text-indent:50px;}

Word Spacing

p {word-spacing:30px;}

text transformation capitalize

p.capitalize {text-transform:capitalize;}

text transformation lowercase

p.lowercase {text-transform:lowercase;}

font weight

p.normal {font-weight:normal;} p.thick {font-weight:900;}

font variiant - small caps

p.small {font-variant:small-caps;}

text transformation uppercase

p.uppercase {text-transform:uppercase;}

relative size

sets teh size relative to surrounding elements, allows a user to change the text size in browsers

class selector

specify a style for a group of elements. Set particular style for many HTML elements with the same class. ".center" or "p.center" for a specific element

id selector

specify a style for a single element #paral (Don't start with a number)


Set pelajaran terkait

Abdomen Board Exam: Ch. 6 - Spleen

View Set

respuestas antes de un quizz y quizzes !!! ( 91% - 100 % )

View Set

Introduction to Mastering Anatomy and Physiology

View Set

SOC 1 FINAL SHORT ANSWER QUESTIONS

View Set