CSS

Cascading Style Sheets (CSS)

Key concept: Separate style from content Content (what to display) is in HTML files Formatting information (how to display it) is in separate style sheets (.css files). Use an element attribute named class to link (e.g. ) Result: define style information once, use in many places Consider can you make all the text in the app slightly bigger? Or purple is our new company color. DRY

principle: Don’t Repeat Yourself

CSS Properties Control many style properties of an element:

● Coloring

● Size

● Position

● Visibility

● Also used in animation

Position Property; (Default)-Position in Document Flow

position : relative; Position relative to default position via TOP,BOTTOM,RIGHT and LEFT properties

position:fixed; Position relative to default position via TOP,BOTTOM,RIGHT and LEFT properties

position:absolute;Position relative to default position via TOP,BOTTOM,RIGHT and LEFT properties

fixedd position(0,0) is top left corner

Some More Common Properties

• Back-ground-Image : Image for element’s Background
• Back-ground-repeat : should background image be displayed in a repeating pattern (versus once only)
• font , font-family , font-size , font-weight , font-style : font information for text
• text-align , vertical-align:Alignment: center,left,right,justify
• Some other CSS issues

● Inheritance

○ Some properties are inherited from parent elements

○ Others are not inherited.

CSS in the real world 20

● CSS pre processors (e.g. less) are commonly used

○ Add variable and functions to help in maintaining large collections of style sheets

○ Apply scoping using the naming conventions

● Composition is a problem

○ It can be really hard to figure out what rule from which style-sheet is messing things up