Professional Documents
Culture Documents
CSS-Cascading Style Sheets
CSS-Cascading Style Sheets
1
Selectors, Property & Values
selector {
property: value;
property: value;
...
property: value;
} CSS
Universal Selector - *
ID Selector - #
Class Selector - .
Element Selectors – HTML Tags
Attribute Selector – input[type = “value”], input[type =
“text”]
A CSS file consists of one or more rules, Each rule starts with a
selector.
More Examples.
2
CSS Box Model
3
Specificity
Selectors Value
Inline-style 1000
Id Selector 100
Class Selector 10
HTML Selector 1
Universal Selector(*) 0
div p { } (Two HTML Selectors) 1+1 = 2
#id p{ } (One ID Selector and one HTML 100 + 1 = 101
Selector)
body #id .class p { } (HTML Selector, ID 1 + 100 + 10 + 1 =112
Selector, Class Selector, HTML Selector)
4
Short-hand Properties
5
Position
6
Pseudo Classes & Pseudo Elements
A CSS pseudo-class & pseudo-element are keywords added to a selector that specifies the
special state of the selected element(s)
7
SASS - Syntactically Awesome Stylesheets
8
Project Structure
CS380 9
Maven Configuration
Sass-watch-intellij
Update-stylesheets
CS380 10
Variables
CSS SASS
11
Nesting
CSS SASS
12
Partials
Partials are great way to modularize your CSS and help keep things
easier to maintain.
13
Import
Difference between CSS import and sass import.
How to import partials into the global file.
@import ‘partial’;
14
Mixins
A mixin lets you make groups of CSS declarations that you want to reuse
throughout the application.
To create a mixin @mixin directive is used and extended with the name.
Will use the mixin with @include followed by the name of mixin.
CSS SASS
15
Inheritance
Inheriting properties from one selector to the another selector..
This is done using @extend
CSS SASS
16