FFW Gabrovo PMG - CSS

FFW
Toni Kolev
Quality Assurance Team Leader
e: toni.kolev@ffwagency.com
s: k-o-l-e-v

today’s agenda
01
02
03
04
05
06
07
08
What is CSS?
CSS Introduction
CSS Philosophy
CSS Syntax
Why Cascading?
Cascading Order
Style Inheritance
CSS, HTML and Media

today’s agenda (2)
09
10
11
12
13
14
15
16
How to CSS?
CSS Selectors
CSS Nested Selectors
CSS Attribute Selectors
Combine CSS Selectors
Pseudo Selectors
CSS Values – Types, Ranges, Units
Defining Size Values

17
18
19
20
21
22
23
24
Color Values
Default Browser Styles
Order of style definitions
Selector Priority
Text-Related CSS Properties
Backgrounds
Borders, Margins and Paddings
Width and Height

25
26
27
28
Display
Visibility
Positioning
Live demo

Cascading Style Sheets
What is CSS?

CSS Introduction
•Used to describe the presentation of documents
•Define sizes, spacing, fonts, colors, layout, etc.
•Improve content accessibility
•Improve flexibility
•Designed to separate presentation from content
•Due to CSS, all HTML presentation tags and attributes are
deprecated

CSS: Philosophy
CSS – Cascading Style Sheets
CSS is used for styling elements on web pages and
manipulating their position, colors, sizes, etc.

CSS: Syntax
The CSS syntax is very easy to learn
and if you follow the best practices –
you can achieve very maintainable code that can be
improved easily with the time.

Style Sheets Syntax
Let's say we have a div element with class “ffw”.
<div class=”ffw”>Div element</div>
We have a selector and declarations which define what
manipulations we are making to the element.
Selector {
property: value;
}
.ffw {
background-color: blue;
}

CSS: Why Cascading?
CSS is a cascading language. The main
definitions form that cascade.

CSS: Why Cascading?
These definitions are:
1)The main style which comes from the browser for the given
markup.
2) The styles which the user has declared.
3)The styles which are linked / added from the author of the
document.
The cascade justifies that there are several ways of styling a HTML
element. The best practice is to set general settings for all elements and
then become more concrete.

CSS: Style Inheritance
The inheritance in CSS means that the selectors
which are declared in our Style sheets – inherit the
property values from their parent selectors.
Example
HTML
<div class=”parent”>
<div class=”child”>
Parent Div
</div>
</div>
CSS
.parent {
font-size: 20px;
}
.child {
font-size: 15px;
}

CSS, HTML and Media
CSS can be used not only for HTML documents. It is used
in other programming languages for styling applications
and so on.
Media queries can be used for defining styles for
tablets, mobiles, TVs, Printing, etc.
@media (max-width), @media(min-width),

Media Queries
Let's say we have div element with width: 500px.
And we want to make this div 250px long for screens with
maximum width of 420px.
We declare this in our stylesheets:
@media(max-width: 420px) {
.div-class {
width: 250px;
}
}

How to CSS?
Three ways to Insert CSS. As we mentioned in Why Cascading – we can add
CSS to our document in three ways:
- External Style Sheet – this is when we create CSS file and put our definitions
inside and then we link to it in our document:
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” media=”all”>
- Internal Style Sheet – Defining our styles in the <head> part of our document,
by opening <style></style> tags and setting our rules.
- Inline Styles – This is not a good practice, but sometimes it is needed.
Setting inline styling happens when you write directly inside the html element.
Example:
<div class=”my-class” style=”background-color: #BADA55;”></div>

CSS Selectors
The selectors are used for selecting elements for styling.
By tag
ul {
color: #BADA55;
}
By element ID
#my-id {
color: blue;
}
By class name
.my-class {
color: blue;
}
It is not a good practice, if not necessary, to use
element IDs for styling. IDs are used generally
for JS.
The best practice for styling elements with CSS
is to use CLASSES. (.my-class)

The nested selectors can be used for being more specific when we define CSS
rules. Let's say we have 2 div elements with classes .my-class-1 and .my-class-
2:
<div class=”my-class-1”></div>
<ul>
<li></li>
</ul>
</div>
We want to style the UL in the first div. How to do it? We define the following
nesting properties in our style sheet:
.my-class-1 ul {
background-color: #FFWFFW;
}
<div class=”my-class-2”>
<ul>
<li></li>
</ul>
</div>

If we have a div element with two UL elements inside and we want to style only
the first one – we can do it in the following way:
<div class=”my-parent-class”>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</div>
.my-parent-class > ul {
}

CSS Attribute Selectors
In CSS – we can style HTML elements using their attributes and/or attribute
values.
That way – we select every a element with target attribute and value = “_blank”
HTML
<a href=”#” target=”_blank”>
CSS
a[target=”_blank”] {
}

Combine CSS Selectors
We can combine CSS selectors to be more specific which element we want to
style. Let's say we have:
If we have another CSS class - .first-class с color:red,
our combined css selector – will win because it has more weight than the other
one.
HTML
<h1 class=”first-class second-class”></h1>
CSS
.first-class.second-class {
color: blue;
}

We can combine CSS selectors to be more specific which element w
If we have another CSS class - .first-class с color:red,
our combined css selector – will win because it has more weight th
HTML
<h1 class=”first-class second-class”></h1>
CSS
.first-class.second-class {
color: blue;
}

Pseudo Selectors
The pseudo selectors are used for styling elements in
specific states.
:hover, :visited, :active
:first-line, :first-child, :before, :after
HTML
<a href=”http://ffwagency.com”>FFW Agency</a>
CSS
a {
color: yellow;
}
a:hover {
color: blue;
}

Pseudo Selectors
There are many benefits when using pseudo selectors.
They allow us to be very specific when we select HTML
elements.
Let's say we have a UL with 3 li elements inside and we want to select only the FIRST li
element.
HTML
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
CSS
ul li:first-child {
color: blue;
}
Selecting all li elements EXCEPT the first child
ul li:not(:first-child) {
color: red;
}

CSS Values – Types, Ranges, Units
All values in CSS are strings
i.e. 20px means size 20 pixels
The colors can be set in a red-green-blue format (RGB)
Both in HEX and Decimal
menu { color: #443344; }
menu { color: rgb(100, 200, 300); }

Defining Size Values
When setting any size (width, height, font-size,
etc.) - the values are given as numbers
We can use multiple formats like Pixels, ems, rems, e.g. 12px, 1.5em,
1.2rem
We can use Points, inches, centimeters, millimeters: 10pt, 1in, 1cm, 1mm
More formats: Percentages, e.g. 50%
The zero value can be used with no unit, e.g. width: 0;

Color Values
HEX, RGB, RGBA, HSL, HSLA
color: #000000; – HEX
color: rgb(0,0,0); – RGB (RED GREEN BLUE)
color: rgb(0,0,0,0.3) – RGB with Alpha (OPACITY)
color: hsl(120, 100%, 50%); - GREEN
color: hsla(120, 100%, 50%, 0.3) – GREEN with
Alpha
Opacity takes value from 0.0 to 1.

HEX, RGB, RGBA, HSL, HSLA
color: #000000; – HEX
color: rgb(0,0,0); – RGB (RED GREEN BLUE)
color: rgb(0,0,0,0.3) – RGB with Alpha (OPACITY)
color: hsl(120, 100%, 50%); - GREEN
color: hsla(120, 100%, 50%, 0.3) – GREEN with Alpha
Opacity takes value from 0.0 to 1.

Default Browser Styles
As we mentioned before – we have default styles
(margin, padding, fonts), which are predefined in our
browsers that we use and unfortunately – these styles
are not equal in all browsers.
Usually, front-end developers reset / normalize
the styles.

Order of Style Definitions
Conflicting style definitions are resolved by
PRIORITY.
1)External <link rel=”stylesheet” href=”...”>
2)Styles in the <head><style>...</style></head>
3)Inline style attributes <div style=”...”>
4)Using !important

Backgrounds
1) background-color: red;
2) background-image: url('../img/Image.svg');
3) background-repeat: no-repeat|repeat-y|repeat-y;
4) background-size: 50%;
5)http://www.w3schools.com/css/css_background.asp

Margins
It defines the spacing outside the element.
For example – if we want to create spacing between every li element in our html
markup, we write this:
li { margin-top: 20px; }
We can also specify NEGATIVE margins which are legal and supported by all
browsers. E.g. margin-top: -20px;

Paddings
It defines the spacing inside the element.
Creating spacing above every li element, BUT inside the li element:
li { padding-top: 20px; }
Negative values are not supported, legal or logical for paddings!

Width and Height
We want our div element to have 1000px width and 200px height.
We define in our style sheets these properties:
.my-div {
width: 1000px;
height: 200px;
}

Display
We define our display type of the element. We have block elements, inline
elements, inline-block elements, etc. We can change their initial values by
defining CSS rules.
display: block;
display: inline-block;
display: none; - we hide the element from our visible area.

Visibility (visible, hidden)
We define our visible value of the element we have selected – to be visible or
hidden. If we make it hidden – we are hiding the element from the visible area,
but there will be blank space in the place where the element should appear.
visibility: visible; (That is the initial state)
visibility: hidden; - We hide the element

Positioning
The position definition specifies the type of positioning method used for an
element (static, relative, fixed or absolute).

Positioning
• position: static; - this is the default property
• position: relative; - positioning the element to its normal position and we can
move the element with the top,right,bottom and left properties.
• .div { position: relative; top: 20px; }
• position: fixed; - the element is positioned relative to the viewport. The element
will always stay wherever we put it, even when we scroll the page.
• position: absolute; - the element will be positioned relatively to the nearest
positioned ancestor.

LIVE DEMO
Now I will show you some live demo, using most of
the things we talked about today, so you can see
everything in action.

CSS Reference
• CSS Tricks – http://css-tricks.com
• The CSS documentation at WebPlatform.org -
http://docs.webplatform.org/wiki/css
• CSS documentation at Mozilla –
https://developer.mozilla.org/en-US/docs/CSS
• CSS3 tutorial - http://www.w3schools.com/css3/

FFW Gabrovo PMG - CSS

More Related Content

What's hot

Similar to FFW Gabrovo PMG - CSS

Recently uploaded

FFW Gabrovo PMG - CSS

Editor's Notes