FFW Gabrovo PMG - CSS

FFWCascading Style Sheets

FFWToni KolevQuality Assurance Team Leader

e: [email protected]: k-o-l-e-v

today’s agenda0102030405060708

What is CSS?CSS IntroductionCSS PhilosophyCSS SyntaxWhy Cascading?Cascading OrderStyle InheritanceCSS, HTML and Media

today’s agenda (2)0910111213141516

How to CSS?CSS SelectorsCSS Nested SelectorsCSS Attribute SelectorsCombine CSS SelectorsPseudo SelectorsCSS Values – Types, Ranges, UnitsDefining Size Values

today’s agenda (3)1718192021222324

Color ValuesDefault Browser StylesOrder of style definitionsSelector PriorityText-Related CSS PropertiesBackgroundsBorders, Margins and PaddingsWidth and Height

today’s agenda (4)25262728

DisplayVisibilityPositioningLive demo

Cascading Style SheetsWhat 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: PhilosophyCSS – 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 SyntaxLet'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.

ExampleHTML<div class=”parent”> <div class=”child”> Parent Div </div></div>

CSS.parent { font-size: 20px;}

.child { font-size: 15px;}

CSS, HTML and MediaCSS 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 tagul {

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)

CSS Nested Selectors

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>

CSS Nested Selectors

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 {background-color: blue;

}

CSS Attribute SelectorsIn 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”>

CSSa[target=”_blank”] {

background-color: blue;}

Combine CSS SelectorsWe 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;}

Pseudo SelectorsThe 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>

CSSa { color: yellow;}

a:hover { color: blue;}

Pseudo SelectorsThere 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>

CSSul li:first-child { color: blue;}

Selecting all li elements EXCEPT the first childul li:not(:first-child) { color: red;}

CSS Values – Types, Ranges, UnitsAll values in CSS are strings

i.e. 20px means size 20 pixelsThe 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 numbersWe can use multiple formats like Pixels, ems, rems, e.g. 12px, 1.5em, 1.2remWe can use Points, inches, centimeters, millimeters: 10pt, 1in, 1cm, 1mmMore formats: Percentages, e.g. 50%

The zero value can be used with no unit, e.g. width: 0;

Color ValuesHEX, RGB, RGBA, HSL, HSLA

color: #000000; – HEXcolor: rgb(0,0,0); – RGB (RED GREEN BLUE)color: rgb(0,0,0,0.3) – RGB with Alpha (OPACITY)color: hsl(120, 100%, 50%); - GREENcolor: 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 DefinitionsConflicting 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

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

Box model

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 DEMONow 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/

Questions?

Thank you!

FFW Gabrovo PMG - CSS

Internet

Transcript of FFW Gabrovo PMG - CSS