CSS. CSS is the style language for web pages. CSS stylesheets example

Size: px

Start display at page:

Download "CSS. CSS is the style language for web pages. CSS stylesheets example"

Dustin Wade
5 years ago
Views:

1 1 CSS CSS is the style language for web pages CSS stylesheets example

2 CSS 2 The standard we will use for dealing with style in web pages is CSS = Cascading Style Sheets, even though it is not XML ( XSL) Although CSS is not very complex, it is quite detailed, and you need good reference sites for it, see: the sites already mentioned for HTML W3C CSS site CSS 2.1 Standard (& parts of CSS3) CSS-Tricks CSS Zen Garden the development tools in your browser

3 XSL 2a XSL is an XML-based stylesheet language for adding style to XML, and is used mainly for processing singlesource documents First you transform using XSLT, and then you output using XSL-FO In my personal opinion, XSLT is the world's worst declarative programming language, so bad that it's easier to use (say) Java At one time, it seemed that it might take over from CSS for HTML pages, but the idea has been abandoned

4 CSS Versions 3 Version 2.1 is the most recent complete standard, referred to by the HTML5 standard, and version 3 is a modular "work in progress" Since browser support is generally a bit patchy, the best advice is: Don't worry about versions, just take each feature and check the browser support situation, e.g. using Can-I-use, and aim to degrade gracefully degrading

5 Degrading Gracefully 3a A web page degrades gracefully if it works OK on older browsers or versions, perhaps in an inferior way or without decoration or with something inessential missing, but making self contained sense and not giving a wrong impression It is not graceful if the site doesn't work, or the visitor can see that something is missing, or can't navigate properly, or the site shows a complaint about the age of the browser, or an apology for not being able to show something

6 Linking to a Stylesheet 4 You should link to a stylesheet using a relative or siterelative URL in a link element in the head <link href="/share/slides.css" rel="stylesheet" type="text/css" /> html This is the only right way to add style, but there are lots of wrong or obsolete ways: don't use old HTML don't use the style attribute don't use the style tag

7 Don't Use Old HTML 4a Don't use any obsolete tags or attributes from HTML4 which are style related and deprecated: <font...>...</font> <body color="green">...</body> bad html bad html Style should be completely separated out so, for example, small-device 'browsers' can ignore it altogether Validation should sort this out

8 Don't Use the Style Attribute 4b At first it seems harmless to add style in attributes: <em style="color:red">...</em> bad html BUT: you can get into XML-compatibility trouble with certain characters, you cause maintenance effort (style is scattered, and not shared in just one place) and you may develop a bad habit For this course, you musn't do it. For the rest of your life, I suggest a very strict self-discipline: the second time you do it on the same page, move the style to a style tag at the top of the page

9 Don't use the Style Tag 4c Style tags are also somewhat dangerous, not a good separation of the style issue, and may lead to bad habits: <style> em { color: red; } </style> bad html In this course, you mustn't do it. For the rest of your life, I suggest a very strict self-discipline. The second time you use a style tag on a page on your site, switch to using a stylesheet

10 Selectors, properties, values 5 A CSS rule selects some elements (nodes in the tree), then attaches a property with a given value to them This example selects all <em>...</em> elements and adds a color property, with value red to them em { color: red; } css And that is CSS in a nutshell! Beware: although CSS supports /*... */ comments, it doesn't support one-line // comments

11 Cascading 6 How does the browser find the value of a property for an element? It uses a complex algorithm, using three hierarchies: stylesheets: from newest to oldest elements: from current outwards to outermost specificity: from most specific to most general specificity and importance Use your development browser to check which rules are being applied

12 Specificity and importance 6a More specific rules override less specific ones, e.g. a rule for a given element id overrides a rule for a given class, which overrides a rule for a given tag name, which overrides a global rule You can also override the normal order of checking by adding!important to a rule; important user preferences override important stylesheet rules which override normal rules, e.g. em { color: red!important; } css

13 Multiple Properties 7 If you want multiple properties to apply, you can do it in one of two ways: em { color: red; font-weight: bold; } em { color: red; } em { font-weight: bold; } css css The two rules can even be in different stylesheets, but remember that more specific rules override more general rules

14 Selectors 8 You can select elements based on tagname, attribute, id, class, context input[type=text] [tag and attribute value] button#save [tag and id] #save [just id] code.java [tag and class].java [just class] h2+p [follow] pre>code [child] tr:nth-child(3) [nth child - third row] a:hover [when hovering] css

15 Multiple selectors 9 You can select multiple sets of elements at once em, b, h2 { color: red; } [with commas!] css You can also specify a style for one type of element inside another type, e.g. all em elements within an h2 h2 em { color: red; } [no commas!] css These are very similar: beware confusion

16 Meaning 10 The ideal is to keep the HTML as meaningful as possible, e.g. class names should explain why an element needs to look different: <p class="angry">i hate fonts</p> <p class="signature">ian Holyer</p> <p class="angry signature">mr Red Face</p> html The stylesheet then changes the look to match:.angry { color: red; }.signature { text-align: right; } css

17 Clever use of selectors 11 Sometimes, careful choice of selectors can help avoid littering the HTML with ids and classes, e.g. to make all the entries in the third column of a particular table right aligned: table#stats td:nth-child(3) { text-align:right; } css Try to find the best compromise between (a) HTML driving CSS, and (b) CSS navigating HTML

18 Leftover Style Tags 12 Tags like <i>, <b>, <tt> are really style tags Often <em>, <strong>, <dfn>, <var>, <cite>, <q>, <code>, <kbd>, <samp> are better. E.g.: <i>css</i> is <i>very</i> easy... bad html Later, you may want definitions to look different from emphasis, which will be easier if you have written: <dfn>css</dfn> is <em>very</em> easy... html

19 Range of Properties 13 Properties that can be affected using CSS include: sizes and positions margins, borders and padding colours and backgrounds fonts and text tables lists printing A lot of these involve specifying numbers and choosing units for them

20 Units 14 One general issue that a lot of properties have in common is units, for example, if you want to change font size: Browser Units (bad) Absolute Units (bad) Relative Units (bad) Relative Units (good) The summary is that ems or percentages are best for font sizes

21 Browser Units 14a There are "browser" units xx-small, x-small, small, medium, large, x-large, xx-large and relative browser units smaller, larger Beware saying "browser defaults look too big, I'll use smaller", because that is just in your environment with your eyesight, it should be the visitor's choice Browsers disagree strongly over the size ratios, so these units are not recommended anyway

22 Absolute Units 14b There are absolute units: inches, centimeters, millimeters, points (1/72 in) and picas (12/72 in) font-size: 12pt; (in, cm, mm, pt, pc) These may be OK for printing, but they are useless on screen, because browsers would need to know people's monitor resolutions, and they don't (they guess very badly) So absolute units are not recommended

23 Bad Relative Units 14c There are relative units px (pixels), and ex (height of letter x) Using pixels provides good scaling across devices (except printers!) BUT then the text doesn't scale when the visitor changes the default text size Browsers can't accurately detect the real height of the letter x, they guess badly, so ex shouldn't be used

24 Good Relative Units 14d Finally there are relative units em (width of letter M), and % (percentage of current value) For text, em and % are the same (1em = 100% = current font size), for example: h2 { font-size: 2em; } For parameters other than text, ems allow lengths relative to font size Percentages have to be checked to see what they are percentages of

25 Colours 15 The first rule of colour in CSS is to spell it color A second rule is: if you change the colour of anything, take full control and specify the colour of everything (otherwise, your text colour may match your visitor's chosen background colour) Here are some ways of specifying red: color:rgb(255,0,0); [BEST, 0 to 255] css color:rgb(100%,0%,0%); [approximate, 100% = 255] color:#ff0000; [rrggbb hex] color:#f00; [rgb hex, x means xx] color:red; [only 17 standard names]

26 Fonts 16 Graphic designers love to control fonts: p { font-family: Arial; } bad css But Arial is a Windows font, so use: p { font-family: Arial,Helvetica,FreeSans,sans-serif; } This gives choices in preference order, ending with a family group which all browsers should support What if you need the same font on all platforms (e.g. these slides, where the metrics matter)?

27 Web fonts 17 Suppose you choose Molengo from Google Fonts You can link live to Google's CDN (perhaps with a protocol-relative URL): <link html href='//fonts.googleapis.com/css?family=molengo' rel='stylesheet' type='text/css'> p { font-family: Molengo; } css There are more font details to worry about

28 Web font details 17a If you have a special need for a self-contained site, you can download { css font-family:molengo; src:url('/share/molengo.ttf'); } p { font-family: Molengo; } A browser may still display text differently, even if the font is identical, e.g. putting an extra pixel gap between characters Usually it doesn't matter, but e.g. for these slides, some JavaScript is used to change the font size of program fragments

29 The Box Model 18 Layout uses the box model, often visualized in browser development tools: An element has width, height, padding, border, margin, all fully controllable There are also box-sizing and flex properties for more sophisticated uses

30 Complexity 19 Even using developer tools, it can be hard to work out what is going on: Heading This page has body then header, and a red background showing an unwanted body/header gap There is no margin, border, or padding on body/header, but h2 has a margin which extends above the header Solution: remove h2's top margin, or set overflow to hidden on the header

31 Defaults 20 The appearance of elements is controlled almost entirely by CSS For example h2 headings are defined by: h2 { display: block; font-size: 1.5em; font-weight: bold; margin: 0.83em 0; } css Check the defaults, in the HTML5 standard or browser development tools, before changing them in a stylesheet

32 Vendor prefixes 21 Experimental new CSS features, implemented by browsers before the standard has settled, are sometimes made available using vendor prefixes For example, 3-D transforms, using the property name transform, were available ahead of time as: -webkit-transform (Chrome, Safari, Opera) -moz-transform (Firefox) -o-transform (old Opera) -ms-transform (IE) Don't use them if obsolete, and use only temporarily

33 Validating CSS 22 You can validate your CSS stylesheet by visiting the W3C CSS Validator site, or downloading their validator Generally, it is far less important to validate CSS than to validate HTML

34 Example Page Design 23 Let's develop a simple page design with a header, two columns, and a footer, in a magazine style, targetting just desktops, not mobiles For mobiles, you need to use a responsive approach, switching to a single column for narrow windows, perhaps using a responsive framework Our design will be fluid, but becoming fixed below a reasonable minimum window width, to avoid problems

35 The Body 24 To make a simple coloured header and footer for our site style, first we have to make sure we can go right up to the edge of the page, by taking out margins or padding on the body body { padding: 0; margin: 0; } css The body is given a minimum width, adjusted to what the content can stand. If the window goes narrower than that, the page format becomes fixed, with a horizontal scrollbar body { min-width: 640px; } css

36 Header and Footer 25 The header and footer have no padding or margins, width 100% (of the body), background colour blue header, footer { padding: 0; margin: 0; width: 100%; background-color: blue; } css Each has its own fixed height, and the footer also clears the floats used for the two columns header { height: 50px; } footer { height: 25px; clear: both; } css

37 Columns 26 To make two columns, we define two section classes, one for each column, and float them section.left, section.right { css width: 44%; text-align: justify; } section.left { float: left; margin: 0 2% 0 4%; } section.right { float: right; margin: 0 4% 0 2%; } The clear:both; in the footer makes sure the browser puts the footer underneath the floats, rather than trying to put it alongside them

38 Internet Explorer 27 When the page was written, it was worth supporting IE8, which doesn't support HTML5 at all However, the main issue is just the new tags header, footer and section. The standard polyfill for this is html5shiv.js Instead of downloading it, we can just include it directly from a CDN, cdnjs, using a protocol-relative URL  html

39 Headers and Footers 28 A tough problem is sharing headers/footers: stylesheets can't contain (much) HTML content HTML5/CSS3 tricks aren't general enough frames are obsolete; they spoil navigation etc SSI is platform dependent overnight programs spoil file properties That leaves copy-and-paste for static pages (not v. maintainable) server injection on delivery JavaScript injection on arrival (maybe with AJAX)

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML