CSS – Part 2

/ Web Tools / By

Although HTML is the fundamental structure of every web page, it can be visually unappealing on its own. Cascading Style Sheets or CSS is a language that web developers use to style the HTML content on a web page. If you’re interested in modifying colors, font types, font sizes, images, element positioning, and more, CSS will allow you to do so.

 Linking:

  • 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.

Example: 

<link href=“styling_login.css” rel=“stylesheet” />

Ruleset Terms:

  • Selector—The beginning of the ruleset used to target the element that will be styled.Declaration Block—The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s).
  • Declaration—The group name for a property and value pair that applies a style to the selected element.
  • Property—The first part of the declaration signifies what visual characteristic of the element is to be modified.
  • Value—The second part of the declaration that signifies the value of the property.

Internal and external CSS:

  • The basic anatomy of CSS syntax is written for both inline styles and stylesheets.
  • CSS inline styles can be written inside the opening HTML tag using the style attribute.
  • An internal stylesheet is written using the <style> element inside the <head> element of an HTML file.
  • Internal stylesheets can be used to style HTML but are also not the best practice.
  • An external stylesheet separates CSS code from HTML, by using the .css file extension.
  • External stylesheets are the best approach when it comes to using HTML and CSS, making the code more maintainable and easier to read.

Classes and ID’s:

  • To select an HTML element by its class using CSS, a period (.) followed by its defined name.
  • We can add multiple classes to an HTML element’s class attribute by separating them with a space. This enables us to mix and match CSS classes to create many unique styles without writing a custom class for every style combination needed.
  • In contrast to the class which accepts multiple values, and can be used throughout an HTML document, an element’s id can only have a single value and only be used once per page.
  • To select an element’s ID with CSS, we prepend the id name with a number sign (#).

Specificity:

  • Specificity is the order by which the browser decides which CSS styles will be displayed. A best practice in CSS is to style elements while using the lowest degree of specificity so that if an element needs a new style, it is easy to override.
  • IDs are the most specific selector in CSS, followed by classes, and finally, type.
  • When writing CSS rules, it’s possible to require an HTML element to have two or more CSS selectors at the same time.

This is done by combining multiple selectors, this is called chaining. For instance, if there was a special class for <h1> elements, the CSS would look like this:

h1.special {

{….rule…}

}

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 this:

.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 making sure they appear in the context we expect.

Note: !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.

Essential Visual Rules

  • 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.
  • Padding is the space between the content area and the border. It can be set in pixels or percentages.
  • Margin is the amount of spacing outside of an element’s border.

Even though CSS has a lot more elements, if we learn the basics and we understand how to apply them, we will be able to use CSS without any problems, remember google is your friend and it will always be there for you when you need to look up something you don’t know!