Posts

Basic CSS: Use Attribute Selectors to Style Elements

Basic CSS: Use Attribute Selectors to Style Elements You have been giving id or class attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style. Let's bring out CatPhotoApp again to practice using CSS Selectors. For this challenge, you will use the [attr=value] attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute type and a corresponding value of radio : [type='radio'] {   margin: 20px 0px 20px 0px; } Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px. solution: < link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" ty...
Post a Comment
Read more

Basic CSS: Use Clockwise Notation to Specify the Margin of an Element

Basic CSS: Use Clockwise Notation to Specify the Margin of an Element Let's try this again, but with margin this time. Instead of specifying an element's margin-top , margin-right , margin-bottom , and margin-left properties individually, you can specify them all in one line, like this: margin: 10px 20px 10px 20px; These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions. Use Clockwise Notation to give the element with the blue-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side. < style > .injected-text { margin-bottom: -25px ; text-align: center ; } .box { border-style: solid ; border-color: black ; border-width: 5px ; text-align: center ; } .yellow-box { background-color: yellow ; padding: 20px 40px 20px 40px ; } ...
Post a Comment
Read more

Basic CSS: Use Clockwise Notation to Specify the Padding of an Element

Basic CSS: Use Clockwise Notation to Specify the Padding of an Element Instead of specifying an element's padding-top , padding-right , padding-bottom , and padding-left properties individually, you can specify them all in one line, like this: padding: 10px 20px 10px 20px; These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions. Use Clockwise Notation to give the ".blue-box" class a padding of 40px on its top and left side, but only 20px on its bottom and right side. < style > .injected-text { margin-bottom: -25px ; text-align: center ; } .box { border-style: solid ; border-color: black ; border-width: 5px ; text-align: center ; } .yellow-box { background-color: yellow ; padding: 20px 40px 20px 40px ; } .red-box { background-color: crimson ; ...
Post a Comment
Read more

Basic CSS: Add Different Margins to Each Side of an Element

Basic CSS: Add Different Margins to Each Side of an Element Sometimes you will want to customize an element so that it has a different margin on each of its sides. CSS allows you to control the margin of all four individual sides of an element with the margin-top , margin-right , margin-bottom , and margin-left properties. Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side. < style > .injected-text { margin-bottom: -25px ; text-align: center ; } .box { border-style: solid ; border-color: black ; border-width: 5px ; text-align: center ; } .yellow-box { background-color: yellow ; padding: 10px ; } .red-box { background-color: crimson ; color: #fff ; margin-top: 40px ; margin-right: 20px ; margin-bottom: 20px ; margin-left: 40px ; } .blue-box { background-color:...
Post a Comment
Read more

Basic CSS: Add Different Padding to Each Side of an Element

Basic CSS: Add Different Padding to Each Side of an Element Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides. CSS allows you to control the padding of all four individual sides of an element with the padding-top , padding-right , padding-bottom , and padding-left properties. Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side. SOLUTION : < style > .injected-text { margin-bottom: -25px ; text-align: center ; } .box { border-style: solid ; border-color: black ; border-width: 5px ; text-align: center ; } .yellow-box { background-color: yellow ; padding: 10px ; } .red-box { background-color: crimson ; color: #fff ; padding-top: 40px ; padding-right: 20px ; padding-bottom: 20px ; padding-left: 40px ; } ....
Post a Comment
Read more
Basic CSS: Add a Negative Margin to an Element An element's margin controls the amount of space between an element's border and surrounding elements. If you set an element's margin to a negative value, the element will grow larger. Try to set the margin to a negative value like the one for the red box. Change the margin of the blue box to -15px , so it fills the entire horizontal width of the yellow box around it. solution: < style > .injected-text { margin-bottom: -25px ; text-align: center ; } .box { border-style: solid ; border-color: black ; border-width: 5px ; text-align: center ; } .yellow-box { background-color: yellow ; padding: 10px ; } .red-box { background-color: crimson ; color: #fff ; padding: 20px ; margin: -15px ; } .blue-box { background-color: blue ; color: #fff ; padding: 20px ...
Post a Comment
Read more

Basic CSS: Adjust the Margin of an Element

Basic CSS: Adjust the Margin of an Element An element's margin controls the amount of space between an element's border and surrounding elements. Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller. When you increase the blue box's margin , it will increase the distance between its border and surrounding elements. Change the margin of the blue box to match that of the red box. < style > .injected-text { margin-bottom: -25px ; text-align: center ; } .box { border-style: solid ; border-color: black ; border-width: 5px ; text-align: center ; } .yellow-box { background-color: yellow ; padding: 10px ; } .red-box { background-color: crimson ; color: #fff ; padding: 20px ; margin: 20px ; } .blue-box { ...
Post a Comment
Read more