CASCADING STYLE SHEETS CSS

2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that defines structure from the part that defines form of a web page.  HTML code remains clean and simple, as originally intended and the CSS code controls appearance.

3 Limits of HTML-tags  Formatting with HTML-tags is limited, for example:  We cannot create text exactly 80 pixels tall  We cannot specify margins easily  We cannot control the space between lines of words  We cannot precisely position images on the screen  The style sheets make those things possible and more.

4 With the Style sheets  You can make smaller and faster pages.  You can maintain or update many pages faster and easier (many pages can have common style sheet).  You can control layout like never before!

5 Adding Styles  There are 4 methods you can use to add styles to your page: 1. Embed a style sheet within the HTML document. 2. Link to an external style sheet from the HTML document. 3. Import an external style sheet into the HTML document. 4. Add styles inline in the HTML document.

6 Link to an external style sheet from the HTML document  You can point multiple HTML documents to one certain style sheets document.  This external file will set the rules for all of your Web pages.  If you change a detail (such as the font face) in the style sheets file, all of your pages will instantly reflect that change.  If you have to maintain a large site, this feature helps you a lot!!

7 External style sheet Here’s the plain HTML-code: My First Style sheet Style sheets for better Web Design Amazing, isn’t it?? Let’s add some style sheets. Create a separate text file called mystyles.css which only contains the following code: H1 { color: green; font-size: 37px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier }

8 Text formatting  font-family defines which font will display  font-size defines text size using points, pixels etc.  font-style can be italic or normal  font-weight defines how bold text is  font-variant displays normal text in small caps  text-transform can be upper- or lowercase or capitalize  text-decoration can be underline, overline, line-through, blink or none

9 Examples H2 { font-family: impact, “comic sans ms”, sans-serif } This means, that browser uses impact-font if it’s installed on this computer, if not, it uses the next font named etc. BODY { font-family: arial, tahoma } H2 { color: red; margin: 10px; font-family: verdana, arial } P { font-size: 14 pt } P { font-size: 20px } P { font-size: large } (or other keywords: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) P { font-size: 15pt } B { font-size: 300% } (bold text would be 3 times larger)

10 Examples H3 { font-style: italic } P { font-weight: bold } P { font-weight: 500 } (normal non-bold text has a value of 400. The most bold version is 900) H2 { font-variant: small-caps } B { text-transform: uppercase } (or lowercase, capitalize or none) B { text-decoration: underline } (or overline, line-through, blink or none) With the none-value you can remove the line under text links: A:link { text-decoration: none } A:active { text-decoration: none } A:visited { text-decoration: none }

11 Typography and Layout  word-spacing defines the space between words  letter-spacing controls the space between individual characters  line-height controls the vertical space between lines of text  text-align helps to align paragraphs left, right, center or justify  vertical-align aligns top, bottom etc.  text-indent indents paragraphs  margin defines margins around text, images etc.  padding defines the space between the element and its border  border defines the width, color and style of borders  float and clear controls how elements wrap around one another

12 Examples  You can add additional space between words by using length units like: in (inches), cm, mm, pt (points), pc (picas), em (ems), ex (x-height) or px (pixels). H3 { word-spacing: 15px } (the value will be added to whatever default value the browser already uses) H3 { letter-spacing: 10px }  You can specify line-height with a number, length unit or percentage: B { line-height: 10pt } B { font-size: 12pt; line-height: 2 } B { font-size: 12pt; line-height: 140% } H4 { text-align: center }

13 Examples  Possible values for vertical-align: Top, bottom, text-top, text-bottom, baseline, middle, sub and super H4 { vertical-align: top } P { text-indent: 2cm } H2 { margin-top: 20px; margin-bottom: 5px; margin-left: 80px; margin-right: 55px } H3 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55 px } H4 { border-top-width: 2px; border-bottom-width: 5px; border-left- width: 1px; border-right-width: 1px } IMG { border-width: 2px } P { border-color: red; border-width: 3px } P { border-style: double; border-width: 3px } (border-style can be: solid, double, dotted, dashed, groove, ridge, inset, outset)

14 Examples  Float enables you to flow text around an element H3 { float: left }  If you want to wrap one paragraph around a floating element, but make sure the next paragraph doesn’t wrap, use Clear. P { clear: left }

15 Colors and Backgrounds  color sets the foreground color of elements  background-color  background-image  background-repeat defines if and how the background image tiles  background-attachment determines whether a background image scrolls with the page or is fixed  background-position enables you to position a background image relative to the element it’s applied to  background allows you to specify all the background-related properties in one rule.

16 Examples B { color: # } B { color: yellow } B { color: rgb(51,204,0) } P { background-color: #FFFF66 } BODY { background-image: url(/images/this.gif) } P { background-image: url( }  If you don’t want your background image to tile, use: BODY { background-repeat: no-repeat; background-image: url(/images/this.gif }

17 Examples  A background-image that doesn’t scroll, but remains fixed in the window regardless of where you scroll on the page: BODY { background-attachment: fixed; background- image: url(mypics/back.gif) } P { background-position: center bottom; background- image: url(mine.gif) } (you can use: top, bottom, left, right and center) P { background-position: 70px 10 px; background- image: url(myback.gif) } P { background: url(/images/my.jpg) #CCFFCC no- repeat top right }

18 Positioning and Layering  position defines an exact position of elements in a page  left sets a horizontal position  top sets a vertical position  width sets a width of an element  height sets the height  overflow controls how content is treated if it goes over its boundaries  visibility makes something disappear  clip controls what parts of an element are visible  z-index sets what should be on top when things overlap

19 Examples H3 { position: absolute; left: 100px; top: 44px } H2 { position: relative; left: 40px; top: 10px } H4 { visibility: hidden }

20 Inheritance  Style sheets’ rules are inherited from “parent” to “child”.  Example: B { color: blue } (means that all bold texts should be blue) All my web pages look very nice always. (there’s no rule set for tag, but it is inside tags, it inherits the declarations. So the child displays in blue just like its parent.)  Result: All my web pages look very nice always.

21 Contextual Selectors  Let’s say we want bold text to be green, but only when it is inside -tags.  Contextual selectors are selectors that demand that a certain situation be true in order for their declarations to be carried out. P B { color: green } Tarja Halonen, President She has been the president of Finland since year  Result: Tarja Halonen, President She has been the president of Finland since year 2000.

22 Combining Selectors  You can combine elements within one selector like: H1, H2, H3, H4, H5, H6 { color: #009900; font-family: Arial, Verdana }

23 Comments  You can comment codes in style sheets: H1 { text-indent: 10px } /*indent all big headings */ IMG { margin-top: 100px } /*give all images a top margin */

24 Classes  Example: You want background to be green for the first paragraph, purple for the second paragraph and gray for the third.  You could create three different classes for P and they would look like this: P.first { background-color: green } P.second {background-color: purple } P.third {background-color: gray }  Your HTML code would look like this: This is the first paragraph... This is the second paragraph… This is the third paragraph… ExampleExample + CSSCSS

25 Exercise  Create an HTML document with:  big main title (H1)  an image  a long text (don’t use formatting tags)  unordered list  link  Create a CSS with  Background color settings  Font settings  Link should not be blue or underlined  Paragraph should have its own background color  List should be in red  Image is floating ExampleExample + CSSCSS