CSS Internet Course Hadassah Academic College Dr Solange

CSS Internet Course Hadassah Academic College – Dr Solange Karsenty 1

Cascading Style Sheets • A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document • CSS: • It lets you separate content from presentation • It lets you define the appearance and layout of all the pages in your web site in a single place • It can be used for both HTML and XML pages • Important note for this course: you have to understand CSS, know the main functionality (listed here) and be able to search a reference for more in-depth possibilities. We will use bootstrap that hides a lot of CSS. If you want to study CSS in depth, there is a another course you should take (web design course).

The problem with HTML • HTML was originally intended to describe the content of a document • Page authors didnt have to describe the layout: the browser would take care of that • This is a good engineering approach, but it didn’t satisfy advertisers and “artists” • Even people that actually had something to say wanted more control over the appearance of their web pages • As a result, HTML acquired more and more tags to control appearance • Content and appearance became more intertwined • Different browsers displayed things differently, which is a real problem when appearance is important

CSS syntax, I • CSS syntax is very simple--it’s just a file containing a list of selectors (to choose tags) and descriptors (to tell what to do with them): • Example: h 1 {color: green; font-family: Verdana} says that everything included in h 1 (HTML heading level 1) tags should be in the Verdana font and colored green • A CSS file is just a list of these selector/descriptor pairs • Selectors may be simple HTML tags or XML tags, but CSS also defines some ways to combine tags • Descriptors are defined in CSS itself, and there is quite a long list of them

Example • In this course a lot of example will be links to online code from w 3 schools. • You should click on the buttons, and play with the code to the left, hit the button RUN to see the result • The goal is to experiment and learn with live examples • Try your first CSS code: First CSS example

CSS syntax • The general syntax is: selector {property: value} • or selector, . . . , selector { property: value; . . . property: value } • Example: • where • selector is the tag to be affected (the selector is case-sensitive if and only if the document language is case-sensitive) • property and value describe the appearance of that tag • Spaces after colons and semicolons are optional • A semicolon must be used between property: value pairs, but a semicolon after the last pair is optional

Example of CSS /* This is a comment */ h 1, h 2, h 3 {font-family: Arial, sans-serif; } /* use 1 st available font */ p, table, li, address { /* apply style to all these tags: p, table etc. . */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15 pt; /* specify indentation */ } p, li, th, td {font-size: 80%; } th {background-color: #FAEBD 7} /* 80% of size in containing element */ /* colors can be specified in hex */ body { background-color: #ffffff; } h 1, h 2, h 3, hr {color: saddlebrown; } /* adds to what we said before */ a: link {color: darkred} a: visited {color: darkred} /* an unvisited link */ /* a link that has been visited */ a: active {color: red} /* a link now being visited */ a: hover {color: red} /* when the mouse hovers over it */

CSS Units • % percentage • in inch • cm centimeter • mm millimeter • em 1 em is equal to the current font size. 2 em means 2 times the size of the current font. E. g. , if an element is displayed with a font of 12 pt, then '2 em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses • ex one ex is the x-height of a font (x-height is usually about half the font-size) • pt point (1 pt is the same as 1/72 inch) • pc pica (1 pc is the same as 12 points) • px pixels (a dot on the computer screen)

CSS Colors • Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. • Check the examples: Colors example Background color Text color

Selector types

More about selectors, I • As we have seen, a HTML tag can be used as a simple element selector: body { background-color: #ffffff } • You can use multiple selectors: em, i {color: red} You can repeat selectors: h 1, h 2, h 3 {font-family: Verdana; color: red} h 1, h 3 {font-weight: bold; color: pink} • When values disagree, the last one overrides any earlier ones • The universal selector * applies to any and all elements: * {color: blue} • When values disagree, more specific selectors override general ones (so em elements would still be red)

More about selectors, II A descendent selector chooses a tag with a specific ancestor: • p code { color: brown } • selects a code if it is somewhere inside a paragraph for example: <p>This is an <span>example of <code> int a =1; </code></span></p> • A child selector > chooses a tag with a specific parent: h 3 > em { font-weight: bold } selects an em only if its immediate parent is h 3 • An adjacent selector chooses an element that immediately follows another: b + i { font-size: 8 pt } Example: <b>I'm bold and</b> <i>I'm italic</i> Result will look something like: I'm bold and I'm italic

More about selectors, III • A simple attribute selector allows you to choose elements that have a given attribute, regardless of its value: • Syntax: element[attribute] {. . . } • Example: table[border] {. . . } • An attribute value selector allows you to choose elements that have a given attribute with a given value: • Syntax: element[attribute="value"] {. . . } • Example: table[border="0"] {. . . } will select all tables with attribute border = 0

The class attribute • The class attribute allows you to have different styles for the same element • In the style sheet: p. important {font-size: 24 pt; color: red} p. fineprint {font-size: 8 pt} p. anotherclass {font-style: italic} • In the HTML (you define arbitrary class names, e. g. “important”): <p class="important">Special Offer!</p> <p class="fineprint">Offer ends 1/1/17. </p> <p class=“fineprint anotherclass”>Do not miss it!</p> • Note that an element can belong to many classes (separated by space) • The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a Java. Script (via the HTML DOM) to make changes to HTML elements with a specified class (we will see this later). • To define a selector that applies to any element with that class, just omit the tag name (but keep the dot): . fineprint {font-size: 8 pt} Class example

The id attribute • The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). • The id attribute is defined like the class attribute, but uses # instead of. • In the style sheet: p#important {font-style: italic} # important {font-style: italic} • In the HTML: <p id="important"> or • class and id can both be used, and do not need to have different names: <p class="important" id="important"> • The id attribute is most used to point to a style in a style sheet, and by Java. Script (via the HTML DOM) to manipulate the element with the specific id. ID example

div and span • div and span are HTML elements whose only purpose is to hold CSS information or allow Javascript DOM manipulation • div ensures there is a line break before and after (so it’s like a paragraph); span does not • span is useful to apply a specific CSS inside some inline text. • Example: • CSS: div {background-color: #66 FFFF} span. color {color: red} • HTML: <div>This div is treated like a paragraph, but <span class="color">this span</span> is not. </div>

Box model If you have width: 250 px; padding: 10 px; border: 5 px solid gray; margin: 10 px; The total width of the element is ? Box example All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: • Content - The content of the box, where text and images appear • Padding - Clears an area around the content. The padding is transparent • Border - A border that goes around the padding and content • Margin - Clears an area outside the border. The margin is transparent 250 px (width) + 20 px (left + right padding) + 10 px (left + right border) + 20 px (left + right margin) = 300 px

Using style sheets • There are three ways of using CSS: external example • External style sheet • This is the most powerful • Applies to both HTML and XML • All of CSS can be used • Embedded (or internal) style sheet • Applies to HTML, not to XML • All of CSS can be used embedded example • Inline styles • Applies to HTML, not to XML • Limited form of CSS syntax inline example

Inline style sheets • The STYLE attribute can be added to any HTML element: <html-tag STYLE="property: value"> or <html-tag STYLE="property: value; . . . ; property: value"> • Advantage: • Useful if you only want a small amount of markup • Disadvantages: • Mixes display information into HTML • Clutters up HTML code • Can’t use full range of CSS features

Cascading order • Styles will be applied to HTML in the following order: 1. 2. 3. 4. • Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside other elements, outermost first) When styles conflict, the “nearest” (most recently applied) style wins

Example of cascading order • External style sheet: h 3 { color: red; text-align: left; font-size: 8 pt } • Internal style sheet: h 3 { text-align: right; font-size: 20 pt } • Resultant attributes: color: red; text-align: right; font-size: 20 pt Cascading example

Pseudo classes Classes that are automatically attached to elements based on their attributes.

Examples of pseudo classes • : active - elements activated by user. For mouse clicks, occurs between mouse down and mouse up. • : checked - radio, checkbox, option elements that are checked by user • : disabled - elements that can’t receive focus • : empty - elements with no children • : focus - element that currently has the focus • : hover - elements that are currently hovered over by mouse • : invalid - elements that are currently invalid • : link - link element that has not yet been visited • : visited - link element that has been visited

Breaking the rules • In CSS, there is a special piece of syntax you can use to make sure that a certain declaration will always win over all others: !important • Html: <p class="better">This is a paragraph. </p> <p class="better" id=”winning">One selector to rule them all!</p> • CSS: #winning { background-color: red; border: 1 px solid black; }. better { background-color: gray; border: none !important; } p { background-color: blue; color: white; padding: 5 px; } • Result: • Advice: never use it unless you absolutely have to (hard to debug and maintain)

Display • Hiding an Element - display: none or visibility: hidden • h 1. hidden {visibility: hidden; } • h 1. hidden {display: none; } • Q: What is the difference? • Block and Inline Elements • Display a linked list as a horizontal menu • li {display: inline; } • See the full list of options at http: //www. w 3 schools. com/cssref/pr_class_display. asp

Position Static example n. Static p. pos_fixed • according to the normal flow of the page { n. Fixed position: fixed; top: 30 px; right: 5 px; fixed example h 2. pos_top { position: relative; top: -50 px; } H 2 { position: absolute; left: 100 px; top: 150 px; } relative example • relative to the browser window } n. Relative • relative to its normal position n. Absolute • elements are removed from the normal flow absolute example

Overlapping • When elements are positioned outside the normal flow, they can overlap other elements <!DOCTYPE html> <html> • z-index property specifies the stack order of an elemen <head> <style> img{ position: absolute; left: 0 px; top: 0 px; z-index: -1; } </style> </head> <body> <h 1>This is a heading</h 1> <img src="w 3 css. gif" width="100" height="140" /> <p>Because the image has a z-index of -1, it will be placed behind the text. </p> </body> </html>

float example Float • element can be pushed to the left or right, allowing other elements to wrap around it. • Useful for layout • left - The element floats to the left of its container • right- The element floats to the right of its container • none - The element does not float (will be displayed just where it occurs in the text). This is default • inherit - The element inherits the float value of its parent • Controlling/turning of float: • The clear property specifies which sides of an element other floating elements are not allowed. • • • none - Allows floating elements on both sides. This is default left - No floating elements allowed on the left side right- No floating elements allowed on the right side both - No floating elements allowed on either the left or the right side inherit - The element inherits the clear value of its parent

Some font properties and values • font-family: • inherit (same as parent) • Verdana, "Courier New", . . . (if the font is on the client computer) • serif | sans-serif | cursive | fantasy | monospace (Generic: your browser decides which font to use) • font-size: • inherit | smaller | larger | xx-small | medium | large | x-large | xx-large | 12 pt • font-weight: • normal | bold |bolder | lighter | 100 | 200 |. . . | 700 • font-style: • normal | italic | oblique

Shorthand properties • Often, many properties can be combined: h 2 { font-weight: bold; font-variant: small-caps; font-size: 12 pt; lineheight: 14 pt; font-family: sans-serif } can be written as: h 2 { font: bold small-caps 12 pt/14 pt sans-serif }

Colors and lengths • color: and background-color: • aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | #FF 0000 | #F 00 | rgb(255, 0, 0) | Browser-specific names (not recommended) • These are used in measurements: • em, ex, px, % • font size, x-height, pixels, percent of inherited size • in, cm, mm, pt, pc • inches, centimeters, millimeters, points (1/72 of an inch), picas (1 pica = 12 points), relative to the inherited value

Key principles in designing effective styling rules • Use classes, semantic tags to create sets of elements that share a similar rules • Don’t repeat yourself (DRY) • Rather than create many identical or similar rules, apply single rule to all similar elements • Match based on semantic properties, not styling • Matching elements based on their pre-existing styling is fragile • CSS is designed to separate content from style • Therefore, names that will be used in HTML or (especially) in XML should describe content, not style • Example: • Suppose you define span. huge {font-size: 36 pt} and you use <span class="huge"> throughout a large number of documents • Now you discover your users hate this, so you change the CSS to be span. huge {font-color: red} • Your name is inappropriate; do you change all your documents? • If you had started with span. important {font-size: 36 pt}, your documents wouldn’t look so dumb

References • Some of the examples in this presentation were taken from the W 3 Schools online tutorial at http: //www. w 3 schools. com/css_syntax. asp • A complete list of live examples: • https: //www. w 3 schools. com/css_examples. asp • Try these exercises • https: //www. w 3 schools. com/css/exercise. asp • NEXT TOPIC: avoid writing from scratch CSS, use the bootstrap library