Step 2, Cascading Style Sheets (continued)In this step, we go through the following topics:
- Semantic Elements
- HTML <div> tag
- The float property in CSS
- The margin and padding property in CSS (Box model)
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:
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.
And finally Here's how I chose to define my CSS file:
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
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.
The float property in CSSAs 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).
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):
The Box model in practiceI 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!