January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Span and Div

HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all. This might sound about as useful as a foam hammer but they are actually used quite extensively in conjunction with CSS.

They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph), whereas a div (division) element is block-line (which is the equivalent to having a line-break before and after it) and used to group larger chunks of code.

<div id="scissors">
    <p>This is <span class="paper">crazy</span></p>
</div>

Class and ID Selectors

For this we look solely at HTML selectors — those that represent an HTML tag.

You can also define your own selectors in the form of class and ID selectors.

The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

So the CSS might look something like:

#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

<div id="top">

<h1>Chocolate curry</h1>

<p class="intro">This is my recipe for making curry purely with chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { /* whatever */ } will only be applied to paragraph elements that have the class “jam”.

Grouping and Nesting

Two ways that you can simplify your code — both HTML and CSS — and make it easier to manage.

Grouping

You can give the same properties to a number of selectors without having to repeat them.

For example, if you have something like:

h2 {
    color: red;
}

.thisOtherClass {
    color: red;
}

.yetAnotherClass {
    color: red;
}

You can separate selectors with commas in one line and apply the same properties to them all so, making the above:

h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}

Nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
    background-color: #ccc;
    padding: 1em
}

#top h1 {
    color: #ff0;
}

#top p {
    color: red;
    font-weight: bold;
}

This removes the need for classes or IDs on the p and h1 tags if it is applied to HTML that looks something like this:

<div id="top">
    <h1>Chocolate curry</h1>
    <p>This is my recipe for making curry purely with chocolate</p>
    <p>Mmm mm mmmmm</p>
</div>

This is because, by separating selectors with spaces, we are saying “h1 inside ID top is colour #ff0” and “p inside ID top is red and bold”.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.

Pseudo Classes

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class.