Chapter3 CSS Cascading style sheet Cascading Style Sheets
- Slides: 47
Chapter#3 CSS ( Cascading style sheet )
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML.
Cont. … A style sheet consists of a list of rules. Each rule or ruleset consists of one or more selectors, and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (: ), and a value. If there are multiple declarations in a block, a semi-colon (; ) must be inserted to separate each declaration.
Cont. …
Cont. … Inline styles, inside the HTML document, style information on a single element, specified using the style attribute Embedded or internal style, blocks of CSS information inside the <head> element of HTML itself External style sheets, i. e. , a separate CSS file referenced from the document
Example : The following example demonstrates the inline style <!doctype html> <body> <p style=”font-family: arial; color: blue; font-size: medium”> This is a paragraph formatted with inline css style. </p> </body> </html>
Example : The following example demonstrates the internal style <!doctype html> <head> <style> P { Font-family: arial; Font-size: medium; Color: blue; Text-align: justify; } </style> </head> <body> <p> This is a paragraph formatted with internal css style. </p> </body> </html>
Example The following example demonstrates the external style. Create a new document in notepad, define the following css styles within it and save it with the name Style. css P { Font-family: arial; Font-size: medium; Color: blue; Text-align: justify; } H 1 { Font-family: arial black; Background-color: blue; Color: white; }
Cont. … Create another new document in notepad and create a html file with the following html markup. To link an external css file, use <link> element of html within the <head> element. <!doctype html> <head> <link rel=”stylesheet” type=”text/css” href=”My. Style. css”/> </head> <body> <h 1> Heading </h 1> <p> This is a paragraph formatted with internal css style. </p> </body> </html>
CSS Colors in CSS are most often specified by: 1. a valid color name - like "red" 2. an RGB value - like "rgb(255, 0, 0)" 3. a HEX value - like "#ff 0000"
Color Names Color Name Red Green Blue Orange Yellow Cyan Black Note: Color names are case-insensitive: "Red" is the same as "red" or "RED".
RGB (Red, Green, Blue) RGB color values can be specified using this formula: rgb(red, green, blue). Each parameter (red, green, blue) defines the intensity of the color between 0 and 255. Color RGB rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255) rgb(255, 165, 0) rgb(255, 0) rgb(0, 255)
Cont. … Color RGB rgb(0, 0, 0) rgb(128, 128) rgb(255, 255)
Hexadecimal Colors RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0 -255).
CSS Backgrounds
Background Color The background-color property specifies the background color of an element. The background color of a page is set like this: Example: body { background-color: lightblue; } h 1 { background-color: green; } div { background-color: lightblue; } p{ background-color: yellow; }
Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Example body { background-image: url("paper. gif"); }
Background Image - Repeat Horizontally or Vertically This example shows us that how we will repeat the background image horizontally. body { background-image: url("gradient_bg. png"); background-repeat: repeat-x; } This example shows us that how we will repeat the background image vertically. body { background-image: url("gradient_bg. png"); background-repeat: repeat-y; }
Set position and no-repeat body { background-image: url("img_tree. png"); background-repeat: no-repeat; background-position: right top; }
Background Image - Fixed position body { background-image: url("img_tree. png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } We can apply the code by usingle line property. body { background: #ffffff url("img_tree. png") no-repeat right top; }
CSS Height and Width Dimensions: Note: The CSS dimension properties allow you to control the height and width of an element. This element has a width of 100%.
Setting height and width The height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc. , or in percent (%) of the containing block.
Cont… This <div> element has a height of 100 pixels and a width of 500 pixels. Example: div { width: 500 px; height: 100 px; border: 3 px solid blue; }
CSS Borders
Border-Style The following values are use for border-style. dotted - Defines a dotted border Dashed - Defines a dashed border Solid - Defines a solid border double - Defines a double border Groove - Defines a 3 D grooved border. The effect depends on the border-color value ridge - Defines a 3 D ridged border. The effect depends on the border-color value Inset - Defines a 3 D inset border. The effect depends on the border-color value Outset - Defines a 3 D outset border. The effect depends on the border-color value None - Defines no border Hidden - Defines a hidden border
Example p. dotted {border-style: dotted; } p. dashed {border-style: dashed; } p. solid {border-style: solid; } p. double {border-style: double; } p. groove {border-style: groove; } p. ridge {border-style: ridge; } p. inset {border-style: inset; } p. outset {border-style: outset; } p. none {border-style: none; } p. hidden {border-style: hidden; } p. mix {border-style: dotted dashed solid double; }
Result:
Border Width Border-width has three values: 1. Thin 2. Medium 3. Thick Example: P{ border-style: solid; border-width: thin; } P{ border-style: solid; border-width: medium; } P{ border-style: solid; border-width: thick; }
Border Color Border-color property sets the color of the border on its edges p{ border-style: solid; border-color: red; }
Border - Individual Sides We can give style to each side of border individually by using the following properties. p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
Border Shorthand property Here we have single line property to set the border including border-width, border-style, border-color. p{ border: 1 px solid red; }
CSS Margins The CSS margin properties set the size of the white space OUTSIDE the border. Margin pull the web object to a specified direction
Margin - Individual Sides � margin-top � margin-right � margin-bottom � margin-left Example: p{ margin-top: 100 px; margin-bottom: 100 px; margin-right: 150 px; margin-left: 80 px; }
Margin - Shorthand Property The margin property is a shorthand property for the following individual margin properties: � margin-top � margin-right � margin-bottom � margin-left Example p{ margin: 100 px 150 px 100 px 80 px; }
CSS Padding Properties The CSS padding properties are used to generate space around content. The padding properties set the size of the white space between the element content and the element border.
Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: Ø padding-top Ø padding-right Ø padding-bottom Ø padding-left All the padding properties can have the following values: � length - specifies a padding in px, pt, cm, etc. � % - specifies a padding in % of the width of the containing element.
Example p{ padding-top: 50 px; padding-right: 30 px; padding-bottom: 50 px; padding-left: 80 px; }
Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: � padding-top � padding-right � padding-bottom � padding-left Example p{ padding: 50 px 30 px 50 px 80 px; }
Padding formats � padding: 25 px 50 px 75 px 100 px; If the padding property has two values: • top padding is 25 px Ø padding: 25 px 50 px; • right padding is 50 px • bottom padding is 75 px • left padding is 100 px If the padding property has three values: � padding: 25 px 50 px 75 px; • top padding is 25 px • right and left paddings are 50 px • bottom padding is 75 px • top and bottom paddings are 25 px • right and left paddings are 50 px If the padding property has one value: Ø padding: 25 px; • all four paddings are 25 px
CSS Text
Css text formatting Ø Text Color: The color property is used to set the color of the text. Ø Text Alignment: The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. Ø Text Decoration: The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links: Ø Text Transformation: The text-transform property is used to specify uppercase and lowercase letters in a text.
Css text formatting Ø Text Indentation The text-indent property is used to specify the indentation of the first line of a text: Ø Letter Spacing The letter-spacing property is used to specify the space between the characters in a text. Ø Word Spacing The word-spacing property is used to specify the space between the words in a text. Ø Line Height The line-height property is used to specify the space between lines:
Example h 1 { color: green; text-align: center/left/right; text-align: justify; text-decoration: overline/underline/line-through; Text-transform: uppercase/lowercase/capitalize; text-indent: 50 px; letter-spacing: 3 px; line-height: 1. 8; word-spacing: 10 px; }
Css fonts
Css fonts Ø Font Family The font family of a text is set with the font-family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. Ø Font Style The font-style property is mostly used to specify italic text. Ø Font Size The font-size property sets the size of the text. Ø Font Weight The font-weight property specifies the weight of a font:
Example p{ font-family: "Times New Roman", Times, serif; font-style: normal/italic/oblique; font-size: 40 px/em/%; font-weight: normal/bold/value in px; }
CSS Layout - The display Property
Cascading style sheets definition
Cascading style sheets outlook
Model couples the iterative nature of prototype
Chapter3
Syntactically awesome style sheets
By default a background image will repeat
Css button generator
Cascading strategy map
Cascading rpjmd
Cascode amplifier small signal model
Fractional cascading
Cascading effects meaning
Cascading consequences
Ons instruction
Dynamic nand gate
Cascading flowers calder
Cascading behavior in networks
"opini bpk"
A a- b b- pneumatic circuit
Cascading tabs
Mnemonic code
Cascading op amps
Format pohon kinerja
Cascading order
Stock verifier found meaning
Hirarki dari sebuah style sheet adalah
Internal style sheet definition
Antiparallel vs parallel beta sheets
Hics structure
Googlw classroom
Zoie sheets
Fhsaa libero tracking
Sheetspread
Budgets and balance sheets chapter 4
Gymnastics springboro
Descriptive statistics google sheets
Nysdot work zone traffic control manual
Atex inspection sheets
Using math to define the foodservice industry
Acrobatic gymnastics grade sheets
Progress monitoring google forms
Wiaa volleyball score sheet instructions
Supersql google sheets
Topographic map marginal information
Food balance sheet
Fraction quantity relative to whole
Khsaa volleyball scorekeeping
Generic term for the guest room sheets and pillowcases.
