Posts

Showing posts from November, 2022

Linking the CSS File

  SETUP AND SYNTAX Linking the CSS File Perfect! We successfully separated structure (HTML) from styling (CSS), but the web page still looks bland. Why? When HTML and CSS codes are in separate files, the files must be linked. Otherwise, the HTML file won’t be able to locate the CSS code, and the styling will not be applied. You can use the  <link>  element to link HTML and CSS files together. The  <link>  element must be placed within the head of the HTML file. It is a self-closing tag and requires the following attributes: href  — like the anchor element, the value of this attribute must be the address, or path, to the CSS file. rel  — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to  stylesheet . When linking an HTML file and a CSS file together, the  <link>  element will look like the following: <link href = 'http...
Post a Comment
Read more

External Stylesheet

  SETUP AND SYNTAX External Stylesheet Developers avoid mixing code by storing HTML and CSS code in separate files (HTML files contain only HTML code, and CSS files contain only CSS code). You can create an external stylesheet by using the  .css  file name extension, like so:  style.css With an external stylesheet, you can write all the CSS code needed to style a page without sacrificing the readability and maintainability of your HTML file.
Post a Comment
Read more

Internal Stylesheet

  SETUP AND SYNTAX Internal Stylesheet As previously stated, inline styles are not the best way to style HTML elements. If you wanted to style, for example, multiple  <h1>  elements , you would have to add inline styling to each element manually. In addition, you would also have to maintain the HTML code when additional  <h1>  elements are added. Fortunately, HTML allows you to write CSS code in its own dedicated section with a  <style>  element nested inside of the  <head>  element. The CSS code inside the  <style>  element is often referred to as an  internal stylesheet . An internal stylesheet has certain benefits and use cases over inlines styles, but once again, it’s not best practice (we’ll get there, we promise). Understanding how to use internal stylesheets is nonetheless helpful knowledge to have. To create an internal stylesheet, a  <style>  element must be placed inside o...
Post a Comment
Read more

Inline Styles

  SETUP AND SYNTAX Inline Styles Although CSS is a different language than HTML, it’s possible to write CSS code directly within HTML code using  inline styles . To style an HTML element, you can add the  style  attribute directly to the opening tag. After you add the attribute, you can set it equal to the CSS style(s) you’d like applied to that element. <p style = 'color: red;' > I'm learning to code! </p> The code in the example above demonstrates how to use inline styling. The paragraph element has a  style  attribute within its opening tag. Next, the  style  attribute is set equal to  color: red; , which will set the color of the paragraph text to red within the browser. If you’d like to add  more  than one style with inline styles, simply keep adding to the  style  attribute. Make sure to end the styles with a semicolon ( ; ). <p style = 'color: red; font-size: 20px;' > I'm learning to code! </p...
Post a Comment
Read more

CSS Selectors : Review

SELECTORS Review Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. Let’s review what you learned: CSS can select HTML elements by type, class, ID, and attribute. All elements can be selected using the universal selector. An element can have different states using the pseudo-class selector. Multiple CSS classes can be applied to one HTML element. Classes can be reusable, while IDs can only be used once. IDs are more specific than classes, and classes are more specific than type. That means IDs will override any styles from a class, and classes will override any styles from a type selector. Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary. Nested elements can be selected by separating selectors with a space. Multiple unrelated selectors can receive the same styles by separating the selector names with commas. Great work this lesson. With this knowledge, you’ll be able to use ...
Post a Comment
Read more

CSS Selectors : Multiple Selectors

SELECTORS Multiple Selectors In order to make CSS more concise, it’s possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code. For instance, the following code has repetitive style attributes: h1 {    font-family : Georgia ; } .menu {    font-family : Georgia ; } Instead of writing  font-family: Georgia  twice for two selectors, we can separate the selectors by a comma to apply the same style to both, like this: h1 , .menu {    font-family : Georgia ; } By separating the CSS selectors with a comma, both the   <h1>   elements and the elements with the   menu   class will receive the   font-family: Georgia   styling. Instructions: 1. In   style.css , write selectors for the   <h5>   and   <li>   elements so they will both be styled with the same CSS rule. Apply this style declaration: font-family : monospace ; Notice that b...
Post a Comment
Read more

CSS Selectors : Chaining and specificity

SELECTORS Chaining and Specificity In the last exercise, instead of selecting all  <h5>  elements, you selected only the  <h5>  elements nested inside the  .description  elements. This CSS selector was more specific than writing only  h5 . Adding more than one tag, class, or ID to a CSS selector increases the specificity of the CSS selector. For instance, consider the following CSS: p {    color : blue ; } .main p {    color : red ; } Both of these CSS rules define what a   <p>   element should look like. Since   .main p   has a class and a   p   type as its selector, only the   <p>   elements inside the   .main   element will appear   red . This occurs despite there being another more general rule that states   <p>   elements should be   blue . Instructions: 1. To show how specificity increases with additional selectors, let’s ...
Post a Comment
Read more

CSS Selectors : Descendant Combinator

  SELECTORS Descendant Combinator In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements, also known as  descendants . For instance, consider the following HTML: <ul class = 'main-list' >    <li> ... </li>    <li> ... </li>    <li> ... </li> </ul> The nested  <li>  elements are descendants of the  <ul>  element and can be selected with the  descendant combinator  like so: .main-list li { } In the example above,  .main-list  selects the element with the .main-list  class (the  <ul>  element). The descendant  <li> ‘s are selected by adding  li  to the selector, separated by a space. This results in  .main-list li  as the final selector. Selecting elements in this way can make our selectors even more specific by maki...
Post a Comment
Read more