Web Programming @ MIPT, 2015-2016

What is CSS

• Cascading Style Sheets
• Specify how to visualize the DOM
• Organized as the plain list of rules
• Each rule is applied to certain elements via selectors
• Each rule may change several display options
• CSS is included into HTML page via style attribute, <style> or <link>

a {
	color: blue;
}
		

Rules sequence

• There may be conflicts between rules changing the same property
• In such cases, later rules have a priority over the earlier
• Use !important to forcefully pin property regardless of the rule precedence order

a {
	color: blue !important;
}
a {
color: red;  /* ignored */
}
		

Selectors

• The Standard
• Comprise of the following types:
  • Type selector a {}
  • Universal selector * {}
  • Attribute selector [extra~=style] ... <span extra="style other">
  • Class selector .highlight {} ... <span class="highlight">
  • ID selector #special {} ... <span id="special">
• May recursively contain other selectors via combinators
• There are pseudo-classes for even more fine-grained control and interactivity
• There are pseudo-elements for reverse DOM manipulation

Combinators

• selector1,selector2 is like "or"
• selector1selector2 is like "and"
• selector1 selector2 is for descendants
• selector1 > selector2 is for children (direct descendants)
• selector1 + selector2 is for direct siblings
• selector1 ~ selector2 is for general siblings

Pseudo-classes

• Dynamic
  • :hover - mouse is over
  • :focus - element is focused
  • :visited - link was previously visited
• :target
• :lang
• UI states
  • :enabled, :disabled
  • :checked, :indeterminate
• Structural, e.g. :nth-child
• :not

Pseudo-elements

• ::before, ::after insert elements with special option "content"
• ::first-letter, ::first-line
• ::selection - highlighted text, only in level 4

a::after {
  content: attr(hint);
  color: red;
}
<a hint="test"></a>

CSS box model

CSS units

Link

• Absolute: px, mm, cm, in, pt, pc
• Font: em, ex, ch, rem
• Viewport: vh, vw, vmin, vmax
• %
• auto

CSS box model options

• margin; margin-left, margin-top, etc. May be negative.
• border: border-style, border-width, border-color, etc.
• padding: padding-left, padding-top, etc. May not be negative.

div#container {
  margin: 1px 2em 3% 4vh;  /* top right bottom left */
  border: 1px solid blue;
  padding: auto 5vmin;  /* top = bottom, right = left */
}

Box size

• width, height - give a hint to a browser
• max-width, min-width, max-height, min-height - strongly demand

box-sizing

Sets whether padding and border must be included into width and height.

• content-box
• border-box

CSS layout

display

Sets which element box type is used. Link.

• none - invisible, do not take part in the layout
• block - no horizontal elements before and after
• inline - like text
• inline-block - inline box
• flex - modern grid
• table* - traditional grid
• ...

flex-box

			display: flex;
		

• Standard
• Article
• flexboxgrid - CSS framework

position

Controlls how elements are positioned. MDN, Standard

• static - this is the default, obey the normal flow
• relative - move element without changing the layout
• absolute - allows setting exact coordinates (left, top, etc.) in the parent element, ignored in layout
• fixed - allows setting exact coordinates in the viewport, element is ignored in layout
• sticky - similar to relative, read an example, not supported by Chrome

float

• Excludes element from the flow, MDN
• float: left; (right)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis ultricies nibh. Mauris posuere sit amet erat sed porttitor. Praesent interdum arcu et felis imperdiet, sodales vulputate mi auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dignissim

hendrerit faucibus. Integer a viverra tortor. Aliquam varius ac dui eu convallis. Proin a ipsum lectus. Ut tristique felis justo, quis cursus dui egestas ac. Duis at porta quam, et tempus orci. Donec quis luctus est, id sagittis sapien.

Hiding elements

• display: none; - changes layout
• visibility: hidden; - saves layout, but triggers the event (opposite is visible)
• opacity: 0; - saves layout, does not trigger the event
• clip: rect(0, 0, 0, 0); - saves layout, does not trigger the event, exotic, should not be used

Centering horizontally

{
  display: table;  /* block requires setting width */
  margin-left: auto;
  margin-right: auto;
}

{
  display: inline;  /* inline-block */
  text-align: center;
}

{  /* parent */
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Font

• font-family sets font type
• font-size
• font-style allows making italic text
• font-weight changes thickness
• All of these can be set in single font
• External fonts may be linked, see e.g. Google Web Fonts
• There are text-decoration, text-shadow, etc.

Colors

• By name: red, green, etc. list of names
• By rgb: rgb(255, 0, 0)
• By hexademical value: #FF0000
• By rgba: rgba(255, 0, 0, 0.5) (last number is opacity in interval from 0 to 1, inclusive)
• There is no way to set opacity using hex representation

Animation

• You can animate many properties using @keyframes and referencing it with animation-name
• Reference
• Examples
• animation-timing-function: explanation

Preprocessors

There are compilers into CSS to make programmer's life easier. They add inheritance, mixins, variables, loops, etc.

• SASS - most common
• Less
• Stylus

Postprocessors

Manipulate CSS to improve it.

• Same CSS option may require different prefixes or even different naming. This problem is solved by Autoprefixer
• Splitted options can be merged into single, saving space. E.g., by shrthnd.

CSS frameworks

• Bootstrap
  • Popular CSS framework by Twitter
  • There are free templates
• Materialize
  • Adopts Material design

Deployment

• GitHub pages
• Heroku (follow these steps, then connect to GitHub)
• DivShot - alternative to GitHub pages

Next steps

• Read the standard
• Read book
• Pass interactive tutorials: 1, 2, 3
• Download cheatsheet: 1, 2
• Continue to ES6 (Javascript)