Download Web technologies(basics,styles , blocks) and more Study notes Computer Science in PDF only on Docsity!
Style Properties and Values
Font properties and values:
CSS provides numerous font oriented properties to set the font family, style, size and variations of font used within a web page. font-family : Fonts are identified by giving the name of a specific font. Syntax : font-family : (or) Where < family name> is any valid font a like arial, Times new Roman. is family of fonts like serif, cursive, fantasy, monospace. Ex : P { font-family : Times New Roman; } font-style : This property provides the style to the font. Syntax : font – style : ; Where value = normal | italic | oblique A value of ‘normal ’ produces text that is in the Roman style straight up and down. A value of ‘ italic ’ should select an italic version of a font. A value of ‘ oblique ‘ might simply slant the font. In many cases italic or oblique results in the same exact rendering. Ex : h { font-style : italic ; }
font-weight : The font-weight property selects the weight, or darkness of the font. Values for the property range from 100 to 900, in increments of 100. Keywords also are supported, including normal, bold, bolder and lighter. Keywords such as extra-light, light demi-light, medium, demi-bold, bold and extra-bold which correspond to the 100 to 900. Ex : h { font-weight = 900 ; } P { font-weight : extra-bold ; } font-variant : The font-variant property is used to select a variation of the specified font family. The only variant supported with this property is ‘small – caps’. Which displays text as small uppercase letters and ‘normal’, which displays text in the normal style. font-variant : normal | small-caps; Ex : em { font-variant : small-caps ; } font-size : The font-size property is used to set the relative or physical size of the font used. Keyword size values includes xx-small, x-small, small medium, large, x-large and xx-large or a relative word, such as larger or smaller. Physical sizes also might include, such as 48pt, 2 cm, 12px or 25in. Relative measurement including percentage values, such as 150% also are valid for sizing.
The background- repeat property determines how background image tile in case where they are smaller than the canvas space used by their associated element. A value of repeat-x for the property limits tilling to the horizontal diversion. The repeat-y value behaves similarly for the vertical dimension. The no-repeat value prevents the image from tilling. Ex : p { background – image : url (image1.jpg);} background – repeat : repeat-x; } body { background – image : url (image2.jpg);} background – repeat : no-repeat; } Background - attachment : The background- attachment property determines whether a background image should scroll as the element content, with which it is associated. The default value is scroll. The alternate value is fixed. Ex : body { background – image : url (image1.jpg);} background – attachment : fixed ; } Background - Position : The background - position property specifies how a background image is positioned within the canvas space used by its element. The position can be specified as a percentage along the horizontal and vertical dimensions. The position can be specified with keywords to describe the horizontal and vertical dimensions. The keywords are topleft, topcenter, top right, center left, center center, center right, bottom left, bottom center, bottom right. Ex : body { background – image : url (img1.jpg);} background – position : center center; } body { background – image : url (img2.jpg);} background – position : 20% 40%; }
Text - Properties
Text properties are used to effect the presentation, spacing and layout of text. The basic properties includes such as decoration, indentation, word spacing, letter spacing, spacing between lines, horizontal and vertical text alignment. text - transform : The text – transform property determines the capitalization of the text that it affects. The possible values for this property are capitalize, uppercase, lowercase, and none which is the default value. Ex : p { text – transform : uppercase;} text - decoration : The text – decoration property is used to define an effect to text. The standard values for this property include line-through, overline, underline, and none. Ex : h1 { text – decoration : overline;} p { text – decoration : none;} The text – decoration property often is used with the a (anchor tag) element and link state which include a:link, a : active, a : visited and a : hover to change presentation. a : hover { text – decoration : underline;} word - spacing : The word spacing property specifies the amount of space between words. The default value is normal, which uses the browser’s word spacing default. body { word – spacing : 10pt;} letter - spacing : The letter – spacing property specifies the amount of space between letters. The default value is normal. Ex : p { letter – spacing : 0.2 cm;} body { letter – spacing : 2 px;} text - align : The text – align property determines how text in a block – level element such as
tag , horizontally aligns The values for this property are left, right, center and justify. Ex : p { text – align : justify;}
Border properties : Elements can be completely or partially surrounded by borders placed between their margins and their padding. The border properties control the edges of block elements by setting whether they should have a border, how the borders look like, their width, their color and so on. Borders properties are border – style : dotted | dashed | solid|double | groove | ridge |inset | outset ; border – width : 10 px | thick | thin | medium ; border – top - width : 10 px | thick | thin | medium ; border – right - width : 10 px | thick | thin | medium ; border – bottom - width : 10 px | thick | thin | medium ; border – left - width : 10 px | thick | thin | medium ; Ex : p { border – style : solid; border – width : thick; border – color : red; } border – color : yellow; border – top – color : green; border – left – color : yellow; border – right – color : blue; border – bottom – color : red; Padding properties : The space between an elements border and its content can be specified by using the padding properties. The padding properties are : padding – top : 20mm; padding – left : 20mm; padding – right : 50mm; padding – bottom : 50mm; Height and Width properties :
The width and height properties are used to set the width and height of an element. The values for these properties can be either pixels or percentage value. Ex : P { width : 200 px; height : 50% }
