Posts

CSS Community Forum Question 8

  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...
Post a Comment
Read more

CSS Visual Rules: Review with YT video Link (it talks about google fonts too)

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...
Post a Comment
Read more

CSS Visual Rules : !important

  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...
Post a Comment
Read more

Community Forum Question 7

  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.
Post a Comment
Read more

CSS Visual Rules : Background-Image

  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...
Post a Comment
Read more

Community Forum Question 6

  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.
Post a Comment
Read more

CSS Visual Rules : Opacity

  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!
Post a Comment
Read more