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

1. Margin, Padding – left, right, top, bottom

2. Border – left, right, top, bottom, radius, width
3. Back-ground – color, image, repeat, position
4. Font- style, weight, size, line-height, family

5
 Position

Position property specifies the type of positioning method

used for an element.

•Static - HTML elements are positioned static by default.

•Relative - An element with this property is positioned relative to its normal position.
•Fixed - An element with this property is positioned relative to the viewport
•Absolute - An element with this property is positioned relative to the nearest
positioned ancestor

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)

Pseudo Classes Pseudo Elements

:active ::selection
:visit ::placeholder
:disabled ::first-letter
:required ::first-line
:first-child ::after
:last-child ::before
:nth-child()
:focus

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.

Partial Sass file is named with underscore(_) as prefix.

◦ Ex: _partial.scss

Sass partials are used with import directive.

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