CSS Vocabulary and Grammar Basics

Size: px

Start display at page:

Download "CSS Vocabulary and Grammar Basics"

Sharlene Cain
7 years ago
Views:

1 CSS Vcabulary and Grammar Basics CSS Stands fr Cascading Style Sheet CSS is a language system that allws yu t define the presentatin f elements in HTML The Presentatin f HTML elements has tw aspects t it: Frmatting the way an element appears. Examples f this wuld be the fnt a piece a text is displayed in r a brder placed arund an image. Psitining the way an element fits int a dcument. Fr example hw a sidebar is psitined in a dcument There are three types f styles that can be used in HTML dcuments: Tag styles this type f style cntrls the presentatin f HTML elements frmatted with a particular tag. Fr example a p tag style cntrls the frmatting f a paragraph. Class styles A class is a style that can be applied t any HTML element. It is applied by adding the class attribute t an HTML element. Fr example yu culd create a class style called blue-text that frmats the element it is applied t with a blue fnt clr regardless f the tag it is applied t <h1 class= blue-text > and <p class= blue-text> will frmat bth elements as blue text. ID styles An ID style is a style that is applied t an element n an HTML page. Since an ID can nly be applied t ne element n a page it is a unique style fr the element. Fr example <div id= sidebar > wuld apply the sidebar style t the div that references it. CSS Style names are case sensitive. class= bluetext is different frm class= bluetext There are three different lcatins styles can be defined in: Inline this is when a style is defined within the element it affects. Yu can nly define class styles in this way nt tag r id styles. Inline styles are almst never used because f varius limitatins and prblem assciated with them. Internal this is when a style is defined in the <head> sectin f the HTML dcument and then applied t elements in the <bdy> sectin. Yu can define tag, id and class styles as internal styles. Internal styles avid sme f the issues related t inline styles but still have significant limitatins are nt cnsidered best practice when wrking with styles. External External styles are styles defined in a separate dcument and then HTML pages are linked t this separate files. External style sheets allw fr the full benefit f styles and are the best way t wrk with styles.

2 When yu define a style yu name them with the fllwing rules: Class styles prefix the style with a. perid. S the class style bluetext wuld be named as.bluetext ID styles are prefixed with the # number symbl. S the id style sidebar wuld be defined as #sidebar Tag styles d nt have a prefix and are written with the plan tag name such as p r h1 CSS styles are written in a specific frmat: stylename { prperty:value; prperty:value; prperty:value; } The stylename is fllwed by a space and then an pening curly bracket { On the next line yu will enter in a prperty-value statement. The prperty is separated frm the value by a cln : The statement ends after the value with a semicln ; On the final line yu will place a clsing curly bracket } Yu can have as many r few prperty values statements as yu need in a single style. Remember t end each prperty value statement with a semicln ; Yu can grup multiple selectrs tgether t frmat them with the same style by separating the different selectrs with cmmas h1, h2, h3 { clr:blue; fnt-weight:bld; } This wuld make the tags <h1>, <h2> and <h3> all blue and bld. Yu can specify a a parent child relatinship t select particular tags and frmat them with a style. Fr example if yu wanted t make <li> blue and bld but nly list items cntained in <l> rdered lists nt <ul> unrdered list yu wuld use the fllwing frmat: l li { clr:blue; fnt-weight:bld; } This targets any <li> tags that are cntained r are children f <l> tags. Prperties are characteristics f an element. Fr example text can have a fnt-family prperty, a fnt-size prperty and a clr prperty. Every HTML element has many prperties. The value is the setting fr the prperty. Fr example the text prperty fnt-size culd have the value 24px and the text prperty clr culd have the value blue.

3 There are a variety f acceptable units f measurement is CSS Pixels: This is the standard fixed unit fr measurement fr stylesheets intended fr screens. It is abbreviated px. Fr example a fnt size can be expressed as 24px Percentages: Yu can als use percentages as a prprtinal unit f measurement. Fr example yu culd express that the width f a layut take up 100% f the screen. Ems: A em is a prprtinal unit f measurement that is relative t the base line f the element being measured. This is expressed in the frm 10em Pints: The standard unit f measurement fr print targeted stylesheets. This is the same as the pints used in wrd prcessrs. Fr example if yu create a print style sheet yu culd express the standard paragraph fnt size as 12pt Clrs can be expressed in a variety f ways. Nrmally clrs are expressed in hexadecimal frmat in a three part part tw digit frmat prefixed by a number sign #. Each place in the clr cde can have a value between zer 0 and fifteen 15. Ten is represented by the letter A, Eleven by the letter B and s n. Fr example the standard clr blue link clr culd be expressed as #0000FF This six digit cde represents an RGB (red, green, blue) clr value and is divided int three tw digit parts. The first tw digits represent Red, the secnd tw digits Green, and the final tw digits Blue. In the RGB clr mdel zer 0 is the absent f clr. The value fifteen 15 represented by the letter F represents the clr being turned up t maximum. Fr example #FF0000 is a bright red, #00FF00 is a bright green, #0000FF is a bright blue. Black is the absent f all clr s it is represented by the value # and white is represented by all the clr values turned t maximum #FFFFFF If a clr value has the same value fr each f the places in the tw digits sets it can be abbreviated. S the value # can be expressed as #369. This is pssible but nt necessary.

4 The CSS Bx Mdel The CSS Bx mdel is a frm that represents hw spacing is added arund bjects. The mdel has three different values: Padding, Brder, and Margin. The padding is the area between the bject and any brder arund the bject. The margin is the space between the brder arund the bject and the bjects surrunding the bject.

5 CSS Prperties Vcabulary List Text Prperties fnt-family fnt-size fnt-weight fnt-style clr line-height text-align text-decratin The is the fnt the text will be displayed in. Can have multiple values. Subsequent values will be used if the preceding fnt is nt available n the visitr s cmputer This is the fnt size text is displayed in. This is the prperty t set a fnt weight t either bld r nrmal This is the prperty t set a fnt style t italics r nrmal The clr f the text The line spacing in between lines f text. The alignment f text The underline and underline style n text and links Bx Mdel Prperties width height padding The width f an bject The height f an bject The spacing between an bject and the brder (if any) arund the bject. Yu can specify the lcatin f the padding fr example yu can use the prperty - padding-left, padding-right, padding-tp, padding-bttm. If nly ne value is given fr the padding it is applied t all sides f the bject. Fr example padding:10px; wuld place ten pixels f padding n all sides f an bject. If tw values are given fr the padding it is applied t the tp and bttm and the left and right side f an bject. Fr example padding:10px 20px; wuld apply 10px t bth the tp and bttm and 20px n the left and right f an bject. If fur values are given fr the padding, it is applied t the tp, right, bttm and left sides f an bject (clckwise). Fr example: padding:10px 4px 8px 12px; margin brder The spacing between the brder arund an bject. Fllws the same rules as the padding prperty. Applies a brder arund an bject. Requires three values: width, clr and style. Fr example brder:1px # slid; wuld apply a 1px black slid brder arund the bject. If yu wish t specify a particular side f an bject t apply the brder t yu can use brder-tp:1px # slid;, etc just as yu can specify a side f an bject fr padding and margin. Other Prperties list-style-type backgrund-image The bulleting r numbering style fr an rdered r unrdered list The prperty that sets an image as a backgrund fr an bject

6 backgrund-repeat backgrund-clr display flat clear The prperty that specifies if an image backgrund repeats hrizntally r vertically r bth. The backgrund clr fr an bject Cntrls the way a brwser displays an element. The tw standard values are display:blck;, display:inline; and display:nne The value nne will cause an element nt t be displayed. The value blck frces an element t display as a blck level element and allws fr CSS bx mdel prperties t be applied. The value inline causes an element t be displayed as an inline level element. Inline element d nt have breaks after them and cannt have bx mdel prperties applied t them. Remves an element frm the nrmal flw f elements in a dcument causes it t flat either left r right. Fr example a left side navigatin sidebar wuld be flated t the left t allw the cntent area t be displayed t the right. Returns an element t the nrmal flw f the dcument after a flated element

Basic HTML Vocabulary Rules

Basic HTML Vocabulary Rules Basic HTML Vcabulary Rules Belw yu will find an essential list f HTML tags and attributes and their meanings. HTML: An acrnym fr Hypertext Markup Language HTML Element: An HTML element is an individual