CSS Visual Rules

  body { /* Old browsers */ background : #141E30 ; /* Chrome 10-25, Safari 5.1-6 */ background : -webkit-linear-gradient(- 45deg , #35577D , #141E30 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background : linear-gradient(- 45deg , #35577D , #141E30 ); margin : 0 ; padding : 0 ; } Question Within the first body selector of this exercise, I see the following declarations: background: #141E30; background: -webkit-linear-gradient(-45deg, #35577D, #141E30); background: linear-gradient(-45deg, #35577D, #141E30); What is linear-gradient and why do we need three different background declarations? Answer linear-gradient()  is a CSS function which creates a visual transition between two or more colors. This code snippet uses several fallback  background  properties for wider browser support. For example, older Chrome browsers might not be able to render the last background declaration but they might be able to render the...

VISUAL RULES Review Visual Rules Incredible work! You used CSS to alter text and images on a website. Throughout this lesson, you learned concepts including: The  font-family  property defines the typeface of an element. font-size  controls the size of text displayed. font-weight  defines how thin or thick text is displayed. The  text-align  property places text in the left, right, or center of its parent container. Text can have two different color attributes:  color  and  background-color .  color  defines the color of the text, while  background-color  defines the color behind the text. CSS can make an element transparent with the  opacity  property. CSS can also set the background of an element to an image with the  background-image  property. The  !important  flag will override any style, however it should almost never be used, as it is extremely difficult to override. Instructions: 1. Fe...

  VISUAL RULES Important !important  can be applied to specific declarations, instead of full rules. It will override  any  style no matter how specific it is. As a result, it should almost never be used. Once  !important  is used, it is very hard to override. The syntax of  !important  in CSS looks like this: p {    color : blue !important; } .main p {    color : red ; } Since  !important  is used on the  p  selector’s  color  attribute, all  p  elements will appear  blue , even though there is a more specific  .main p  selector that sets the  color  attribute to  red . One justification for using  !important  is when working with multiple stylesheets. For example, if we are using the  Bootstrap  CSS framework and want to override the styles for one specific HTML element, we can use the  !important  property. Instructions...

  Question What is a relative path? Answer A relative path is an address that points to the current directory or project folder. In the example illustrated in this lesson, the relative path is  images/mountains.jpg  and it assumes we have an images subfolder nested within a project folder.

  VISUAL RULES Background Image CSS has the ability to change the background of an element. One option is to make the background of an element an image. This is done through the CSS property  background-image . Its syntax looks like this: .main-banner {    background-image : url ( 'https://www.example.com/image.jpg' ); } The  background-image  property will set the element’s background to display an image. The value provided to  background-image  is a  url . The  url  should be a URL to an image. The  url  can be a file within your project, or it can be a link to an external site. To link to an image inside an existing project, you must provide a  relative file path . If there was an image folder in the project, with an image named  mountains.jpg , the relative file path would look like below: .main-banner {    background-image : url ( 'images/mountains.jpg' ); } Instructions: In  style.css , c...

  Question What is an overlay effect? Answer An overlay is a semi-transparent element that we can place over elements (often images) for artistic flair and/or to enhance readability. For a visual example, take a look at  these  6.8k  overlay demos.

  VISUAL RULES Opacity Opacity is the measure of how transparent an element is. It’s measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible. Opacity can be used to make elements fade into others for a nice overlay effect. To adjust the opacity of an element, the syntax looks like this: .overlay {    opacity : 0.5 ; } In the example above, the  .overlay  element would be 50% visible, letting whatever is positioned behind it show through. Instructions: 1. Let’s give the caption on the image some transparency! In   style.css , set   .caption   to have   0.75   opacity. Hint: Use the  opacity  property to change an element’s opacity!

  Question How do we know which background and foreground colors work well together? Answer Aesthetically, color theory is a rather involved graphic design topic. For web developers who are interested in learning about graphic design I recommend “The Non-Designer’s Design Book”. This tool can be used to create color palettes that work well together. For improved accessibility, be sure that your background and foreground colors pass a contrast check. You can use https://webaim.org/resources/contrastchecker/  2.3k or other websites to make sure that it follows the standard to keep your website readable

  VISUAL RULES Color and Background Color Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects: Foreground color Background color Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the  foreground color  of the heading has been styled. Conversely, when a heading is styled so that its background appears yellow, the  background color  of the heading has been styled. In CSS, these two design aspects can be styled with the following two properties: color : this property styles an element’s foreground color background-color : this property styles an element’s background color h1 {    color : red ;    background-color : blue ; } In the example above, the text of the heading will appear in red, and the background of the heading will appear blue. Instructions: 1. Take a look at the caption on the ima...

  Question Can the text align-property only be used to align text or can we use it to align other content as well? Answer The  text-align  property is used to align the inner content of a block element. This means that in addition to aligning text, it can also be used to align inline or inline-block elements within a containing div. You will learn more about inline, inline-block, and block level elements in the next exercise.

  VISUAL RULES Text Align No matter how much styling is applied to text (typeface, size, weight, etc.), the text always appears on the left side of the container in which it resides. To align text we can use the  text-align  property. The  text-align  property will align text to the element that holds it, otherwise known as its  parent . h1 {    text-align : right ; } The  text-align  property can be set to one of the following commonly used values: left  — aligns text to the left side of its parent element, which in this case is the browser. center  — centers text inside of its parent element. right  — aligns text to the right side of its parent element. justify — spaces out text in order to align with the right and left side of the parent element. Instructions: 1. In   style.css , set the   text-align   property of the main heading ( h1 ) so that it appears in the center. Hint: A value of  center ...

Question Can all fonts be bolded with the  font-weight  property? Answer No. The font weights available for use are dependent on the   font-family   itself. Some font families do not have a bold form.  

  VISUAL RULES Font Weight In CSS, the  font-weight  property controls how bold or thin text appears. p {    font-weight : bold ; } In the example above, all paragraphs on the web page would appear bolded. The  font-weight  property has another value:  normal . Why does it exist? If we wanted  all  text on a web page to appear bolded, we could select all text elements and change their font weight to  bold . If a certain section of text was required to appear normal, however, we could set the font weight of that particular element to  normal , essentially shutting off bold for that element. Instructions: 1. In   style.css , set the font weight of paragraph ( p ) elements to   bold . Hint: Use the  font-weight  property to make the paragraph elements bold!

Question What is a pixel and is this the only measure of font size? Answer A pixel is one of several units of measure in web development. It is an absolute unit equal to 1/96 of an inch. Rems and ems are scalable typographic units which are commonly used with the  font-size  property. As opposed to pixels, both of these units are relative. For example, an em is measured relative to the  font-size  of an element. When dealing with ems it is important to realize that the  font-size  of an element is often inherited from an ancestor element. On the other hand, rems are determined based on the  font-size  of the  html  element. If  font-size  is not defined on the  html  element, the browser’s default  font-size  is used instead (usually 16px). There are pros and cons of each unit but one major advantage of using relative units is that they lend themselves more naturally to responsive design. Relative units like...