Lecture 13: Advanced CSS & Bootstrap -...

Lecture 13: Advanced CSS &

BootstrapCS 383 – Web Development II

Wednesday, April 4, 2018

Advanced CSS• There are many advanced CSS selectors which allow you

to do what the name implies – more precisely select which elements are being affected

1

By Order of Tags1. <h1>Heading</h1>2. <h2>Subheading</h2>3. <h3>Subsubheading</h3>

2

• element1, element2 {

/* css */}

• This applies the styles to all element1s and element2s

• Example: h1, h3 would apply to lines 1 and 3

By Order of Tags1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. </div>13.14. <h1>Heading</h1>15. <h2>Subheading</h2>

3

• element1 element2 {/* css */

}

• This applies the styles to all element2s that are somewhere within element1

• Example: div#set1, h2 would apply to lines 2 and 10, but not 5

By Order of Tags1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. </div>13.14. <h1>Heading</h1>15. <h2>Subheading</h2>

4

• element1 > element2 {

/* css */}

• This applies the styles to all element2s that are direct children of element1

• Example: div#set1 > h2 would apply to lines, but not 5 or 9

By Order of Tags1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. </div>13.14. <h1>Heading</h1>15. <h2>Subheading</h2>

5

• element1 + element2 {

/* css */}

• This applies the styles to allelement2s have the same parent as and immediately follow element1

• Example: h1 + h2 would apply to line 15 only

By Order of Tags1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. </div>13.14. <h1>Heading</h1>15. <h2>Subheading</h2>

6

• element1 ~ element2 {

/* css */}

• This applies the styles to allelement2s that have the same parent as and is preceded by an element1

• Example: h2 ~ div#set1 would affect lines 7-12, but not 1-3

By Attribute• [attribute^=value] {

/* css */}

• This applies the styles to all tags with the provided attribute that begins with the given value

• Example: a[href^="https"] would apply to all links that started with https

7

By Attribute• [attribute$=value] {

/* css */}

• This applies the styles to all tags with the provided attribute that end with the given value

• Example: a[href$=".jpg"] would apply to all links that ended with the .jpg extension

8

By Attribute• [attribute*=value] {

/* css */}

• This applies the styles to all tags with the provided attribute that contains with the given value

• Example: a[href*="wilkes.edu"] would apply to all links that contained wilkes.edu

9

By Attribute• [attribute=value] {

/* css */}

• This applies the styles to all tags with the provided attribute that equals with the given value

• Example: a[target="_blank"] would apply to all links that were set to open in a new window

10

By Form Field• input:checked selects an input (checkbox) that is

checked

• input:disabled selects an input that is disabled

• input:focus selects an input element that has focus (cursor currently inside)

• input:optional selects an input that is not marked as required

• input:required selects an input element that is marked as required

11

By Link State• a:active selects the active link

• a:hover selects the link on mouseover

• a:link selects all unvisited links

• a:visited selects all visited links

12

By Position1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. <h2>Subheading</h2>13. </div>14.15. <h1>Heading</h1>16. <h2>Subheading</h2>17. <h3>Subsubheading</h3>

13

• element:first-child{

/* css */}

• This applies the styles to the element that is the first child of its parent if it is that element

• Example: h2:first-child would apply to lines 2, 5 and 10, but not 12 or 16

By Position1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. <h2>Subheading</h2>13. </div>14.15. <h1>Heading</h1>16. <h2>Subheading</h2>17. <h3>Subsubheading</h3>

14

• element:first-of-type {

/* css */}

• This applies the styles to the element that is the first child of that element in its parent

• Example: h2:first-of-type would apply to lines 2, 5 and 10, but not 12 or 16

By Position1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. <h2>Subheading</h2>13. </div>14.15. <h1>Heading</h1>16. <h2>Subheading</h2>17. <h3>Subsubheading</h3>

15

• element:last-child {/* css */

}

• This applies the styles to the element that is the last child of its parent if it is that element

• Example: h2:last-child would apply to lines 2, 10, 12, but not line 5 or 16

By Position1. <div id="set1">2. <h2>Foo</h2>3. </div>4.5. <h2>Foo</h2>6.7. <div id="set1">8. <h1>Heading</h1>9. <div id="set2">10. <h2>Foo</h2>11. </div>12. <h2>Subheading</h2>13. </div>14.15. <h1>Heading</h1>16. <h2>Subheading</h2>17. <h3>Subsubheading</h3>

16

• element:last-of-type{

/* css */}

• This applies the styles to the element that is the last child of that element of its parent

• Example: h2:last-of-type would apply to lines 2, 10, 12, and 16, but not 5

By Position• element:nth-child(n) {

/* css */}

• This applies the styles to every nth child within a parent if it is that element, counting from the first instance

• To count from the last instance instead of the first, use :nth-last-child(n)

• To alternate, you can use odd or even for n

• Using this, to stripe the rows in a table, you could use tr:nth-child(odd) and tr:nth-child(even)

• To countly only by the given element within the parent, use :nth-of-type(n) or :nth-last-of-type(n)

17

Other Selectors• :not(selector) can be used to put a selector in to

include anything except thato Example: :not(p) {color: red;} would make anything not in a

<p> tag red

18

Media Queries• Media queries allow us to determine who sees certain styles

• For example, suppose we want users to see headings in red on a TV screen and black when printed

• We can use:

@media [screen or print] {/* css code here */

}

• So for the example above…

19

Media Queries@media screen {

h1, h2, h3, h4, h5, h6 {color: #f00;

}}

@media print {h1, h2, h3, h4, h5, h6 {

color: #000;}

}

20

Responsive Design w/ Media Queries

• Nearly half of all traffic on the web is now from a mobile device

• It is very common now for websites to be mobile-friendly

• There are two ways to make a website mobile friendly:1. Use scripting to check the user agent and forward the user to one of two

websites: mobile or desktop

2. Use responsive design to automatically adjust based upon the size of the screen, regardless of user agent

21

Responsive Design w/ Media Queries

• Responsive design has several advantages:o It automatically adjusts for the browser currently being used

o It eliminates the need to maintain two separate websites

o It better optimizes for mobile device (phone vs. tablet)

o It also helps user using poor resolution or who resize windows to show more windows on their screen

22

Responsive Design w/ Media Queries

• After a media query, you can optionally include screen or print, and add (min-width: #px) or (max-width: #px)

• So suppose you want to make text larger on a mobile device:

body {font-size: 12pt;

}

@media (max-width: 768px) {font-size: 14pt;

}

• We will use Bootstrap to handle this automatically

23

Bootstrap• Bootstrap (www.getboostrap.com) is a CSS framework

that helps standardize browser compatibility and implement responsive design

• It also includes Javascript components as well

24

Bootstrap• However, one of the problems is – how do you customize

Bootstrap efficiently?

• The “default” theme color is light blue – what if you’re building a website for Staples which has the primary color of red?

25

Bootstrap• If you are using a good chunk of the components, there are

hundreds of CSS selectors you would need to override just to switch the primary color from blue to something else

• There are also some things that are more difficult than just substituting values, such as the colors for gradients and shadows, which are calculated from another color

26

Bootstrap• Bootstrap also contains dozens of different components,

which creates a large CSS file

• Much of this CSS file is “dead weight” if you are not using these components

27

LESS• If you download the source code for Bootstrap, it contains

the files to compile with the LESS preprocessor/compiler (www.lesscss.org)

• LESS allows you to generate CSS files and include variables

• Don’t confuse the LESS preprocessor (command lessc) with the UNIX command for viewing a file (command less)

28

LESS• Some of the capabilities of less include:

o Variables (ex: The background of elements should be the same, easily changeable variable)

o Calculations (ex: h1 should be 10% larger than h2)

o Adjust colors automatically (ex: The color of a button should be 20% darker than the primary color set)

29

LESS w/ Bootstrap• On Bootstraps website, the source code should be

downloaded

• When you unzip it, there will be a folder called less inside

30

LESS w/ Bootstrap• There are dozens of files include, but we only really need

to be concerned with three:o normalize.less contains rules for “resettings” CSS in a browser to ensure

that all margins, padding, etc., are the same, as each browser has different defaults for unspecified values

o variables.less contains the variables that you will set the variables for colors, fonts, etc.

o mixins.css (and other files in the mixins subdirectory) allow you to customize the CSS further to add different properties, rather than just change existing variables (think about it – “mix ins” – mixing in your own CSS with Bootstraps)

o bootstrap.less is the driver file – it includes all of the other LESS files

• If we don’t want to include the CSS for a component that we don’t need, either comment out or delete the file

31

LESS w/ Bootstrap• When we finished editing the files, we can compile the file

with the following command:

lessc --compress bootstrap.lessbootstrap.csso --compress removes whitespace, putting each selector on its own line

o It takes bootstrap.less as the input file

o It saves the file in bootstrap.css

• The output file can then be included in your webpage

32