6
Adding Style with CSS Jump Start Q&A Log Live Event Date: December 3, 2014 Page 1 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided “as is.” Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information. 09:09:00 PST Question: Does Bootstrap qualify as a "pre-processor"? Will you be talking about it? Answer: Bootstrap is more of a CSS framework. We'll talk about it, but it's not a preprocessor 09:22:56 PST Question: Will you be talking in this session about changing styles according to the device? Answer: Yep, we'll talk about that in module 4: Media Queries 09:24:05 PST Question: can every html element be a selector? Answer: Yep! 09:27:29 PST Question: Can you assure the right font by providing it ? Answer: Yes, there are some web fonts that you can provide and use 09:29:27 PST Question: Video recording will be available on MVA site? Answer: Yes it will 09:31:58 PST Question: Is there going to be any discussion concerning float clearing? Answer: Yes, in the layouts module 09:34:10 PST Question: The DOM builds a tree of the document, if I am correct. Is it not possibme to to select elements in the tree by CSS ? For example, select all underlying elements of a specific list? Answer: It is indeed possible to select based on DOM structure, and we'll talk about that next module 09:37:25 PST Question: what feature provided by bootstrap same thing can provided by with css3 Answer: Bootstrap just has a lot of base styles for you to make styling easier. It's entirely CSS based. 09:44:07 PST Question: what the difference between css and css3 features Answer: CSS3 is just the newer/updated version of the CSS spec 09:52:27 PST Question: Q: The F12 works great for a webpage, but is there anything like that for if I am making a Win8 store app with HTML to check the CSS ? Answer: Have you tried using Blend for Visual Studio? 09:59:48 PST Question: just a short correction for the F12 Tools: the number behind the style source is not the score of any calculation as Chris just mentioned but just the line number, where the declaration can be found Answer: Thanks 10:00:29 PST Question: So bootstrap is like jquery for javascript. Answer: I like that analogy!

Public QA Log - Adding Style With CSS Jump Start - December 3

Embed Size (px)

DESCRIPTION

Public QA Log - Adding Style with CSS Jump Start - December 3

Citation preview

  • Adding Style with CSS Jump Start

    Q&A Log

    Live Event Date: December 3, 2014 Page 1 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided as is. Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information.

    09:09:00 PST Question: Does Bootstrap qualify as a "pre-processor"? Will you be talking about it? Answer: Bootstrap is more of a CSS framework. We'll talk about it, but it's not a preprocessor

    09:22:56 PST Question: Will you be talking in this session about changing styles according to the device? Answer: Yep, we'll talk about that in module 4: Media Queries

    09:24:05 PST Question: can every html element be a selector? Answer: Yep!

    09:27:29 PST Question: Can you assure the right font by providing it ? Answer: Yes, there are some web fonts that you can provide and use

    09:29:27 PST Question: Video recording will be available on MVA site? Answer: Yes it will

    09:31:58 PST Question: Is there going to be any discussion concerning float clearing? Answer: Yes, in the layouts module

    09:34:10 PST Question: The DOM builds a tree of the document, if I am correct. Is it not possibme to to select elements in the tree

    by CSS ? For example, select all underlying elements of a specific list? Answer: It is indeed possible to select based on DOM structure, and we'll talk about that next module

    09:37:25 PST Question: what feature provided by bootstrap same thing can provided by with css3 Answer: Bootstrap just has a lot of base styles for you to make styling easier. It's entirely CSS based.

    09:44:07 PST Question: what the difference between css and css3 features Answer: CSS3 is just the newer/updated version of the CSS spec

    09:52:27 PST Question: Q: The F12 works great for a webpage, but is there anything like that for if I am making a Win8 store app

    with HTML to check the CSS ? Answer: Have you tried using Blend for Visual Studio?

    09:59:48 PST Question: just a short correction for the F12 Tools: the number behind the style source is not the score of any

    calculation as Chris just mentioned but just the line number, where the declaration can be found

    Answer: Thanks

    10:00:29 PST Question: So bootstrap is like jquery for javascript. Answer: I like that analogy!

  • Adding Style with CSS Jump Start

    Q&A Log

    Live Event Date: December 3, 2014 Page 2 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided as is. Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information.

    10:00:43 PST Question: What type of project do you create on Visual Studio for a HTML website? Answer: I just used Blank Web Project

    10:06:07 PST Question: is there a way to change all the h1 referances in the bootstrap.css for diferent sized screens? Answer: You can edit your bootstrap files to make custom ones, and you can, of course, change the h1 properties in

    your own style files and import that

    10:07:22 PST Question: Helen or Christopher, is it possible to "inherit" properties from a class into another class ? Answer: That's something preprocessors do, but CSS natively you can have multiple classes for an element though,

    so that multiple styles will be applied

    10:07:23 PST Question: Are you required to place the tag before the or is this just the best

    practice? Answer: Best practice

    10:08:17 PST Question: I might be wrong, in some case where I use third party software tools for web like radcontrols where css is

    inject dynamically, I usually use !important quite alot. I don't any other way to archive that without using important keyword. Answer: Good point. There are use cases for !important, but they do tend to be edge cases like what you mentioned

    10:14:08 PST Question: Can we use browser specific css? Or can we distinguish browsers in css? Answer: Yes, with vendor prefixes, which we'll talk about in a bit

    10:33:34 PST Question: In case of nested divs, first child div will be the first Child? Answer: yes

    10:38:46 PST Question: HI i am very new to css can you please tell me deference between margin and padding Answer: we'll touch on that next module

    10:39:31 PST Question: Was that ctrl K ctrl D to format Answer: yes

    10:41:35 PST Question: Will there be any discussions about media queries today? Answer: yes. in module 4

    10:52:12 PST Question: Eg. div:first-child:first line (no double colons) Answer: You do need to use the double colons for first-line

    10:59:29 PST Question: but if we are using something like size in width or height than what is best practice either px or % Answer: depends on your need. A photo or something works best in absolute sizes like px, whereas layout work best

    in %

  • Adding Style with CSS Jump Start

    Q&A Log

    Live Event Date: December 3, 2014 Page 3 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided as is. Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information.

    11:01:21 PST Question: This discussion of rem vs em has been very helpful. What module are we in? I would like to be able to

    come back to this section when the recording is made available. Answer: this is module 2

    11:02:30 PST Question: it blows up the line-height as well, is it true? although you did not specify that anywhere? Answer: yes, that is true. it updates the entirety of the font

    11:06:27 PST Question: Can we use conditional styles on basis of screen size? Answer: You can! we'll see media queries later

    11:10:44 PST Question: Is the sizing of the text while sizing the browser a new feature of css3? Or is it present on earlier version

    also? Answer: I want to say that's a CSS3 thing, although I don't always remember when something came to be.

    11:22:42 PST Question: Is it best way to use inline styles ? Answer: Generally, no. I've been doing it for simple demos, but real world you want a separate file.

    11:26:26 PST Question: It's possible to place divs next to each other using the float attribute, but you have to remember to clear it.

    Is the inline-block a better substitution for this method? Answer: Float is nice, but you can run into issues with overlapping elements.

    11:27:44 PST Question: I'm 2 hours late, is this module 2? Answer: Module 3

    11:36:07 PST Question: when the code gets posted do we get a before and after file? Answer: We can make that happen

    11:38:16 PST Question: What is z-index actually works for. I did not get it. Answer: It makes sure something is on top

    11:42:36 PST Question: are the f12 tools a plug in or a separate app? Answer: Built right in

    11:42:49 PST Question: Is z-index like the 3rd dimension? Answer: It is

    11:43:52 PST Question: I think that the Z-Index in related like layers more Z-index more nearby from us ... less Z-layer ... more

    away from us... is that right? Answer: That's exactly it!

  • Adding Style with CSS Jump Start

    Q&A Log

    Live Event Date: December 3, 2014 Page 4 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided as is. Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information.

    11:44:15 PST Question: Is padding goes like top left bottom right? Answer: Top Right Bottom Left

    11:45:39 PST Question: What was the key combination with the box-sizing property for adding automatically all properties covering

    browser variants? Answer: Tab Tab (tab twice)

    11:54:03 PST Question: Its really working Helpful with overflow and box size .. Great ! Answer: You're welcome

    13:21:24 PST Question: If the css file is placed in some other folder, do we need to pass absolute path to import that? Answer: It needs to be a resolvable path.

    13:23:04 PST Question: Do we have intellisense for media queries? Answer: You do

    13:29:45 PST Question: Is it good practice to add images through CSS or HTML? Should we add different size of same images (by

    Photoshop)respective to device size or set width of image to 100%? Answer: That's a long conversation. I like Picture Fill.

    13:35:56 PST Question: @media screen AND

  • Adding Style with CSS Jump Start

    Q&A Log

    Live Event Date: December 3, 2014 Page 5 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided as is. Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information.

    14:04:03 PST Question: Why does the div::selection take 2 colons? Do any other pseudo classes do that? Does max-width: 700px

    mean up to an including 700 px? or does it mean less than 700 px? I ask because what happens when you have max-wdith:700px and later (min-width:700px and max-width:1600px)?

    Answer: Max-width means going below 700px. : election is a pseudo element and pseudoelements use 2 colons

    14:12:12 PST Question: Is pseudo element a short code of "Child"? Answer: It's more like different portions of an element. For instance, the first line of a paragraph or the selected part

    of a paragraph

    14:13:48 PST Question: For a specific web page by itself what is typically the amount CSS (in kb) that you would want to limit for

    the browser's download? (summing referenced CSS sheets imported) Answer: as small as possible. it's pretty easy to get your css to a couple of kb by using a minifier

    14:14:45 PST Question: can we apply style on click events of elements? Answer: you'll need a little javascript to apply extra styles like transform

    14:20:23 PST Question: Are transitions and transformations a part of CSS3? Not prior to CSS3? Answer: transitions have been around for a while., but there are more properties with CSS3

    14:29:43 PST Question: ... So ? any answer? Answer: it's best practice to, yes

    14:41:29 PST Question: "If you're anything like me, and I know I am..." LOL!

    Answer:

    14:52:16 PST Question: I've probably missed it (arrived late) ... are the code samples available somewhere ... codeplex, github,

    etc.? \ Answer: GitHub.com/GeekTrainer/css-style

    14:54:03 PST Question: I don't think I will use javascript any more for any ui changes. it will help only to add or remove class .

    thanks to css. Answer: Awesome!

    14:54:12 PST Question: Super liked the concept: html for semantic, css for style and js for logic. Answer: Thanks! I'm glad that helped!

    14:54:29 PST Question: If there are two transfom properties set, there will be a conflict? Answer: It will, and use the standard CSS tiebreakers

  • Adding Style with CSS Jump Start

    Q&A Log

    Live Event Date: December 3, 2014 Page 6 of 6 DISCLAIMER: This information is provided to you for informational purposes only and is provided as is. Microsoft has not reviewed the information and it may contain inaccuracies. You bear the risk of using it. Microsoft makes no warranties, express or implied, as to the information.

    14:55:24 PST Question: Thanks for the demo! Answer: You're welcome

    14:55:50 PST Question: can the preprocessor include the business logic alongwith styles? Answer: It can do some basic logic

    14:59:42 PST Question: is there any tool to convert my standard css to any pre processor defined syntax? Answer: Visual Studio can do it

    14:59:46 PST Question: Do these preprocessors work within visual studio? Answer: They do

    15:00:49 PST Question: Is there any movement for CSS to incorporate LESS out of the box? Answer: I think the problem is there are a lot of options available.

    15:06:08 PST Question: SASS is in my name...and far from LESS

    Answer:

    15:18:41 PST Question: so we need less.js that will re compile to css. so again we will overload our page with js for this

    compilation. so do we need this pre processor? Answer: Only if you're going to let the browser do it.

    15:26:53 PST Question: I want one of those PCs that they are using. Answer: Planar PCT 2785 monitors

    15:27:09 PST Question: This was very informative. Thanks. Answer: Thank you!

    15:27:21 PST Question: No more wine, Chris... Answer: Duly noted!

    15:28:19 PST Question: let's drinks beer

    Answer: