Coding Bootcamp (HTML & CSS)

Step 2, Cascading Style Sheets (continued)

In this step, we go through the following topics:

Semantic Elements,

With HTML4, developers used their own id/class names to style elements: header, footer, menu, main etc. This made it impossible for search engines to identify the correct web page content. With the new HTML5 elements (<header>, <footer>, <nav>, <section>, <article> etc), this will become easier.



Below is an alphabetical list of the new semantic elements in HTML5:

Source Thttps://www.w3schools.com/html/html5_semantic_elements.asp

Semantic elements and external CSS-file in practice

Below I apply not only some semantic elements but also an external CSS-file at the Vikens kennel site:


This is the HTML-file (note that the tags defining the page design are missing, this is in the external CSS file.
Syntax:

And finally Here's how I chose to define my CSS file:
Syntax:


HTML <div> tag

The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container , which defines a division or a section. It is used to group HTML elements to be styled with CSS. Note that the <div> tag is a block-level element, so a line break is placed before and after it.

HTML <div> tag in practice

Our dog kennel has had its page updated. Inside the footer, three div-taggas have been added containing information about the telephone number, address and email to the kennel:



Code inside the HTML- file

Note the id attribute, it specifies a unique id for an HTML element, the value must be unique within the HTML file. The id value is used by CSS (and JavaScript) to perform certain tasks for the element with the specific id value.
Syntax:

Code inside the CSS- file

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element.
Syntax:


The float property in CSS

As I mentioned above, the <div> tag is a block-level element, so a line break is placed before and after it. One way to get around this and place the <div> elements next to each other is to apply float property.
The float property specifies how your div element should float. The "float" attribute adjusts a div element to the right or left along its current line.
Note: Elements after a floating element will flow around it. To avoid this, use the clear property (not necessary to apply in the example above).

Syntax:


The margin and padding property in CSS (Box model)

The Box model

In CSS, all HTML elements exist within an element box. It is absolutely essential that you familiarize yourself with the terminology and relationship of the CSS properties within the element box.

In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the content (text):

Source https://www.w3schools.com/css/css_boxmodel.asp

The Box model in practice

I have already applied the "Box Model" in the code above. The following example is just a clear example:


Below is the syntax for the CSS file:
I use (.) to address a class selector and (#) to address a Id. When it comes to targeting generic HTML tags in just use the tag name, see at the bottom of the image, how I address p and h1!