1 / 38

Cascading Style Sheets (CSS)

Learn how to use CSS syntax and selectors to style web pages using cascading style sheets. Includes examples and explanations for basic CSS syntax, selector types, inserting styles, attribute selectors, class selectors, ID selectors, hyperlink types, and inheritance.

nathanfreeman
Download Presentation

Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets(CSS) Bartosz Sakowicz

  2. CSS syntax Basic CSS syntax: selector { property:value } E.g.: P {font-family: Arial} H1 {font-size: 20pt} hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

  3. CSS syntax(2) To separate properties and their values from other properties, you use semicolon: <p style="font-size: 20pt; font-weight: bold; background: green; color: red">Red font 20pt, bolded, on the green background</p> To define the same style for many elements, separate them using comma: H1, H2, H3 {font-family:Helvetica; color:yellow}

  4. Inserting styles Inline style <p style="font-size: 12pt; font-weight: bold;">Some text</p> Internal style <head> <style type="text/css"><!-- body {margin-left: 2cm; margin-right: 2cm} P {font-size: 14pt; font-family: Arial, Helvetica; font-weight: normal} --></style></head>

  5. Inserting styles(2) External style sheet: <head> <link type="text/css" rel=”stylesheet” href="/style.css"> </head> It is possible (and quite usual) to use multiple style sheets on the same page.

  6. Document tree • html • head body • title p form img • input select textarea • Document tree • Child • Descendant • Parent • Ascendant

  7. Descendant selector ul ul li {color:green} Second list will be green. H1 H2 B {color: blue}

  8. Child and sibling selectors Child selector P>U {color: green} Nested <u> will be green Sibling selector H1 + P{margin-left: +30 mm) If <h1> and <p> has common parent ….

  9. Attributes selectors General syntax: element [atrributerelation value] {style definition } e.g.: P [align=right] {color: blue} Simple attribute selector: H3 [title] {color: #000000 } [title] {color: #000000 }

  10. Attributes selectors(2) Attribute selector with defined value General syntax: element [attribute="value"] { style definition } OR: [attribute="value"]{ style definition } OR: [attribute~="value"]{style definition } To match the criteria, the „value” can be only a substring of the real value.

  11. Classes .class1 {font-family:Arial} Example usage: <p class=„class1"> Some text in Arial </p> Different styles for the same tag: P {font-family: Arial; font-size: 12pt}P.notice {font-family: Arial; font-size: 12pt; font-weight: bold}P.exclamation {font-family: Verdana; font-size: 12pt; color: red}P.adds {font-family: Arial; font-size: 8pt}

  12. Question What is the difference between following: .menu li{ properties } li .menu{ properties } li,.menu{ properties } li.menu { properties }

  13. ID selector #[label ID] {style definition} e.g.: H1#title {color: red} Example usage: <h1 id="title">Some text</h1>

  14. Hyperlink type Example definition Default A:link {color:blue; background: red} Visited A:visited {color:yellow} Hovered onto link A:hover {background:yellow; color:red} Active A:active {background:blue; color:red} Hyperlinks special selectors (pseudo classes)

  15. Paragraph’s special selectors (pseudo elements) Selector first-line Ephasising first line of the paragraph: P:first-line {text-transform: uppercase} Selector first-letter Ephasising first letter of the paragraph: P:first-letter { font-size: 300%; color:blue }

  16. Inheritance CSS inheritance is based on the Parent-Child model: each Child element inherits all of his Parent element's styles. Attention: the child element will inherit all the parent element's properties only if these properties are inheritable. Inheritance does not work on all CSS properties (margin, padding and other block properties). <table class="arial_font"><tr> <td>Some text in Arial</td> <td class="courier_font">Some text in Courier</td> </tr><tr> <td> Some text in Arial </td> <td> Some text in Arial </td> </tr></table>

  17. Cascading If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color: red; text-align: left;font-size: 8pt } And an internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt} If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color: red; text-align: right; font-size: 20pt

  18. Fonts Font families, eg.: <p style="font-family: Times, serif">Some text</p> <p style="font-family: Times, 'Times New Roman', 'Times New Roman CE', serif">Some text</p> Font styles, eg.:  <p style="font-style: normal">Some text</p> Available keywords: italic, obligue.

  19. Fonts(2) Font size, eg.: a) Defined as keywords: <p style ="font-size: keyword">Some text</p> Available keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Relative values: larger, smaller b) In metric units: <p style ="font-size: 1cm"></p> Available units: cm, in, mm, pt c) In percents (relative): <p style ="font-size: 150%"></p>

  20. Fonts(3) Font weight, eg.: <p style ="font-weight: keyword">Some text </p> Defines boldness. Available keywords: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

  21. Fonts(4) Putting many attributes into one definition Eg. <p style ="font: small-caps bold 14pt/18pt Times, 'Times New Roman', serif"> Small caps, bold, 14pt font size, 18 pt space between lines, Times.</p> Attributes ordering: font-style->font-variant->font-weight->font-size->line-height->font-family

  22. Text Letter spacing, eg.: <p style="letter-spacing: 3mm">Some text.</p> Text decoration, eg.: <a style ="text-decoration: none" href="http://www.dmcs. pl">Hyperlink not underlined.</a> Available keywords: underline,overline,line-through.

  23. Text(2) • Text transformation, np: • There are four posiible transformations: • none, • capitalize (first letter of each word will be big), • uppercase (all letters will be big), • lowercase (all letters will be small). • Eg.: • <p style ="text-transform: capitalize">This is some text.</p> • In the browser we could see: • This Is Some Text.

  24. Text(3) Text align, np: <p style ="text-align: right">Right aligned line.</p> Available keywords: left,right, center, justify

  25. Text(4) Text indent, eg.: <p style ="text-indent: 10%">In this paragraph first line will be indented by 10% according to the page width. In this paragraph first line will be indented by 10% according to the page width.</p> In the browser we could see : In this paragraph first line will be indented by 10% according to the page width. In this paragraph first line will be indented by 10% according to the page width.

  26. Colors and backgrounds Text color, eg.: <h3 style ="color: #00FF00">Green title </h3> <table> <tr> <td style="color: #FF0000">Red text</td> </tr> </ table > Background color, eg.: <p style="background-color: blue">Paragraph on blue background</p>

  27. Image as a background Backround can be defined as an image: <h3 style="background-image: url(image.gif)">Title on image background</h3> Background repeat (when background is smaller than object): <h3 style ="background-image: url(image.gif); background-repeat: repeat-x"> Title on image background </h3> Available keywords: repeat-x (horizontally repeated), repeat-y(vertically repeated), repeat (horizontally and vertically repeated), no- repeat (not repeated).

  28. Image as a background(2) • Background attachment • Background can be attached in two ways: • It can be motionless according to the page (default) • It can be motionless according to the screen (fixed) • Eg.: • body {background: url(image.gif); background-attachment: fixed}

  29. Image as a background(3) Background position Useful, when image is smaller that real background: background-position: keyword Available keywords: top, bottom, center, left, right Or their proper (logical) combination: background-position: top right. It is possible also to use measerments units or percentages (counted from the left top corner of the area): background-position: 2cm 3cm background-position: 30% 50%

  30. Attribute name Description Scrollbar-Base-Color ? Scrollbar-Face-Color ? Scrollbar-Arrow-Color ? Scrollbar-Highlight-Color ? Scrollbar-Shadow-Color ? Scrollbar-Dark-Shadow-Color ? Scrollbar-3dLight-Color ? Toolbars

  31. Margins It is possible to define following margins: margin-top, margin-bottom, margin-left, margin-righte.g.: <p style="margin-top: 1cm">Some text</p> <p style="margin: 2cm"> 2 cm margin from each side</p> <p style="margin: 2cm 3cm"> 2 cm margin from top and down and 3 cm margin from left and right </p> <p style="margin: 2cm 3cm 1cm 4cm"> Different margins from different sides</p> It is possible to define inside margins (called padding) – by analogy to margin: padding-top, padding-bottom, padding-left, padding-right

  32. Borders border-x-width(x : top, bottom, left, right) border-color: #ffffff border-style:none, dotted, dashed, solid, double,groove, ridge, inset, outset.

  33. Lists List style list-style-type: Available keywords:disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, noneeg.: <ul style="list-style-type: disc"> <li>First type</li> <li>Second type</li> </ul> Image instead of bullet, eg.: <ul style="list-style-image: url(dot.gif)">

  34. Width and height a) width: <p style="width: 150px"> Some text </p> b) height: <p style="height: 150px"> "> Some text. </p>

  35. Absolute positioning Eg: Image placed in left top corner of the page: <div style="position: absolute; left:0px; top:0px"> <img src="image.gif" border="0" alt="Description"> </div>

  36. Relative positioning Relative positioning moves an element RELATIVE to its original position: <SPAN style="position: relative; left: 200px; top: 300px; width: 100px"> Some text</SPAN>

  37. Cursors Eg: <img src= "image.gif" border="0" style="cursor:help" alt= " Description"> Available keywords: ·crosshairpointer ·waittext ·default ·auto ·x-resize – (x: n,w,e,sor logical combination, eg: ne)

  38. Printing web pages Two possibilities of breaking pages: page-break-before: always page-break-after: always Eg.: <h1 style="page-break-before: always">Chapter 7</h1>

More Related