HTML & CSS IT SPECIALIST

Webpage Styling Using CSS

Construct and analyze styles that position content

<!--
THINGS TO KNOW: the term short hand version of a property is when a property will take multiple values at once and only takes up a single line.
For example: border: 1px solid black;
This declaration defines the border and uses three different values for the short version of the declaration.
1. 1px defines the thickness of the border.
2. solid defines the style of the border.
3. black defines the color of the border.

Longer hand version
border-style: solid;
border-color: black;
border-weight: 1px;

Longest hand version
border-top-style: solid;
border-top-weight: 1px;
border-top-color: black;

border-bottom-style: solid;
border-bottom-weight: 1px;
border-bottom-color: black;

border-left-style: solid;
border-left-weight: 1px;
border-left-color: black;

border-right-style: solid;
border-right-weight: 1px;
border-right-color: black;

-->

What is CSS?

CSS stands for Cascading Style Sheets.

What does CSS do?

CSS is used to style elements and make them look however you would like.

What is a CSS rule?

A CSS rule for Internal or External styling is composed of three parts.

  • Selector – selects the elements or tags to be affected by the CSS rule.
  • Declaration Block – anything placed withing the opening and closing curly brace.
  • Declarations – the rule that is used to style an element or a tag.
    • Declaration blocks have the following format: name: value;
//Note: the "p" is the location of the selector.
//{} brackets is the declaration block.
// color: blue; is the declaration.
color - is the name of the declaration
:(colon) is the separator between the name and the value.
blue is the value of the declaration.
;(semicolon) is the stop in the declaration where it ends.

P {
color: blue;
}

CSS Properties

CSS POSITION PROPERTY

position – tells an element how it should move based on a fix place or its current place.

Possible values include absolute and relative.

Absolute value tells the browser to move the element starting from the top left hand corner of the document body or relative to the nearest positioned ancestor.

Relative positioning – states that the element will starting moving from wherever it currently is.

Sticky positioning – an element is positioned based on the users scroll bar.

Static – an element moves according to the natural flow of the page.

P {
position: relative;
}

NOTE: the position declaration only tells an element how to move. However, it is still necessary to provide another declaration or multiple declarations on how to move the element.

top – how much to move closer or further from the top.

bottom – move closer or further from the bottom of the page

left – move closer or further away from the left side of the page.

right – move closer or further away from the right side of the page.

P {
position: realtive;
top: 100px;
bottom: 100px;
left: 100px;
right: 100px;
}

CSS Max-width Property

The max-width property is used to provide the maximum width that any element can be sized to. In other words, if an element has a max-width of 500 pixels, it means that the element can be any size up to and including 500 pixels, but not greater.

div {
max-width: 500px;
}

CSS Overflow Property

The CSS overflow property defines to an element what should happen with the element in the event that the element has more content than it can display. These are some of the options available to the overflow property:

  • scroll – the overflowed content is not visible but a scroll bar is provided to view the content within the element.
  • visible – This is the default behavior and the overflow content is not hidden. The content will spill out of the element.
  • hidden – The overflow content is not visible and it is hidden from the user with no way to view the actual hidden content.
  • auto – It decides when scrollbars are to be added or not.
div {
overflow: scroll;
}

CSS Height & Width properties

The height property defines the specific height or vertical measurement to an element. The width property defines the horizontal measurement of an element. The value for height and width can be defined in multiple units of measurement. These are some units of measurement available.

  • px – pixels.
  • pt – points
  • % percent
  • vh – viewport height
  • em – relative to the size of the elements font.
  • Centimeters (cm): Physical units, typically used for print.
  • Millimeters (mm): Another physical unit, smaller than a centimeter.
  • Inches (in): Yet another physical unit, commonly used in print.
  • Points (pt): Commonly used in print, with 1 point being equal to 1/72 of an inch.
  • Picas (pc): A picas is equal to 12 points.
div {
height: 300px;
width: 300px;
}

CSS margin Property and the Text-align Property

The margin property defines how much space an element should have between itself and a specific margin. Each element will have a top, bottom, left, and right margin. You can define each margin by using the following properties:

  • margin-top – defines the top margin with some value.
  • margin-bottom – defines the distance between the element and the bottom margin.
  • margin-left – defines the distance between the element and the left margin.
  • margin-right – defines the distance between the element and the right margin.

Note: Margins can be defined using multiple units of measurement. I typically define it using pixels. You can use one of these properties or all of them at once.

Also, the short hand version of margin can be provided one value to represent all margins.

//Short version
div {
margin: 10px; //All ten pixels will be provided to all margins.
}
//Not as short version
div {
margin: 10px 15px 5px 3px; //top, right, bottom, left
}
//Very long version of the property
div {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
margin-right: 100px;
}

CSS display Property

The display property is used to define to an element how it should be displayed. Those options can be:

  • inline – display the elements next to each other only using the space needed by the element.
  • block – display the element as a greedy element and one that uses more space than it needs (the entire line) and has a line break.
  • inline-block – an element that is displayed as an inline element but width and height can be applied.
P {
display: inline;
}

Inline Elements Vs. Block Level Elements

Inline level elements are not greedy. Inline level elements only use up the space they need. Multiple inline level elements can fit in one line. However, block level elements are greedy and require the entire line whether they need it or not. A block level element also always starts on the next line.

<element> <element> <element> <element> inline level elements

<p>the </p>
block level element.

CSS Visibility Property

The visibility property is used to define when an element should be visible or hidden.

  • hidden – the element will be hidden.
  • visible – the element will be visible.
p {
visibility: hidden;
}

Box Model Defined

The box model defines that every element is a box and each element is capable of having content, padding, margin, and a border. Many define this model as a box that contains content, followed by padding, followed a border, followed by padding.

Even though those properties are not visible on the element, it is understood that you can make those properties visible.

p {
padding: 10px;
margin: 10px;
border: 1px solid black;
}

CSS Padding Property

The padding property provides space between the content and the border of the element. Padding can be defined in short hand and long hand version.

Multimedia Presentation Using HTML (Video And Audio Tracks Explained).

Working with the Iframe, Video, Audio, Track, and its Sources.

NOTE: for the purpose of this information, a value pair attribute looks like this: name="value".  However, a Boolean value attribute looks like this: controls.  A Boolean value is a data type that represents one of two values; true or false. 

<iframe></iframe> Element

An Iframe is used to embed one website within another website. In other words, the frame will be located on website A, but the contents of the frame will display the information from website B.

<iframe>
</iframe>
Iframe attributes
  • src – Specifies the url or location of the other website that will be embedded. src=”URL”
  • srcdoc – HTML content of the page to show in the frame. srcdoc=”HTML”
  • name – the name given to the element. name=”TEXT”
  • allowfullscreen – Can be activated to take advantage of full screen mode. (Boolean attribute)
  • allowpaymentrequest – Whether to allow payment request through the Payment API. (Boolean attribute).
  • height – how high should the frame be? (height=”300″)
  • width – the width of the frame (width=”300″).
  • loading – tells the browser to load the frame immediately or to delay loading the iframe until certain conditions are met.
<iframe height="300" width="600" src="https://www.someurl.com/index.html" allowfullscreen="true">
</iframe>

<video></video> Element

The video element is used to embed videos in a web page. This element can use multiple sources to attempt and use the best format based on the browser attempting to display the video.

How does it work? The video element will have multiple source elements inside of the element. The browser will attempt from the top down the first source. If the browser is unable to play that source, then the browser will skip to the next source and attempt to play that video. If that video doesn’t play it will continue doing this until it runs out of sources. Once all sources are exhausted in attempts, the message will be displayed. The text just below the sources will only be displayed if all sources fail to play.

Example:

<video width="300" height="600" controls>
       <source src="movie1.ogg" type="video/mp4">
       <source src="movie2.mp4" type="video/ogg">
      The browser was unable to play any of these video types.
</video>
Attributes for video element
  • width – sets the width of the video player (in pixels). width=”300″
  • height – sets the height of the video player (in pixels). height=”300″
  • autoplay – specifies if the video control should be played. Boolean attribute
  • loop – specifies if the video should be played in a loop. Boolean attribute.
  • controls – tells the browser to display the video controls such play, pause, volume and fast forward. controls=”control”
  • muted – specifies whether to mute the video or not. Boolean attribute
  • poster – provides the option of a image to be shown while the video is downloading. poster=”URL”
  • preload – how the page should load the video and when it should be loaded.
  • src – the URL of the video to play.

<audio></audio> Element

The audio element works similar to the video element in the since that it can too have multiple sources with an error message or warning. The process of playing the audio files works the same as the video file; the browser will try to play each audio file from the top down to see which one will play. If all the audio files fail to play, then the text will be used to display a message on the browser.

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       We were unable to play your audio file.
</audio>
Audio Attributes
  • autoplay – a Boolean attribute that signifies that the audio will start playing as soon as possible. (Boolean Attribute)
  • controls – a Boolean attribute that signifies that the audio controls should be displayed. (Boolean Attribute)
  • loop – a Boolean attribute that signifies that the audio will start over again on its own. (Boolean Attribute)
  • muted – a Boolean value that defines if the audio should be muted. (Boolean Attribute)
  • preload – how the page should preload the audio.
  • src – the location of the audio file. src=”URL”

<track> Tag

This tag defines a track to be played for an audio or video element. The track tag is placed inside of the video or audio file and tells the browser which track to play with them.

Track Attributes
  • default – enable if preferences don’t override. (Boolean Attribute)
  • kind – specifies the kind of track. kind=”vtt”
  • label – the title of the track. label=”text”1
  • src – specifies where the track is located src=”URL””
  • srclang – the language of the track. scrclang=”lang”
<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       <track src="URL" kind="subtitles" srclang="en" label="English">
       We were unable to play your audio file.
</audio>

<source> tag

The source tag is used to define the location of multiple sources in the audio or video elements. This void tag will state where the actual file is located. The video and audio element can have as may sources are formats are available.

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       <track src="URL" kind="subtitles" srclang="en" label="English">
       We were unable to play your audio file.
</audio>
Source Attributes
  • src – the location of the audio or video src=”URL”.
  • type – specifies the mime type. type=”MIME-type”
  • media -the media query that sometimes is defined in CSS.

IT Specialists Multimedia Presentation Using HTML (Displaying Images)

HTML 5 Logo

Construct and Analyze Markup That Displays Images

<img> Image Tag

The <img> tag is used to add a image to a web page. However, technically speaking that image is not really embedded into a webpage, but rather it is linked to the page by the <img> tag.

This tag doesn’t have a closing tag and is a void tag.

<img> Required Attributes

The <img> tag by itself doesn’t actually do anything, well it kind of holds a space in the HTML page to show that an image will be there at some point. In order to have an actual image show up, you are required to provide two attributes to the <img> tag. Those attributes are as follows:

  • src – attribute tells the <img> tag where the image is located; almost like a pointer to where the image is. It can accept a relative URL or an absolute URL.
  • alt – the alt attribute provides an alternative title to the image in case the image breaks. This attribute is good for screen readers or if for some reason the browser is unable to display the actual image.

Example Code

<img src="dog.png" alt="An image of a dog">

Additional Attributes for the <img> tag

  • height – (pixels) – specifies the height of the image.
  • width – (width) – specifies the width of the image.
  • usemap – (id) – will specify an image as a client-side image map.
  • loading – () – used to specify if the image should be loaded at some other time or later in the page load.
  • ismap – () – specifies an image as a server-side image.
  • crossorigin – () – allows crossorigin access to images.

<picture></picture> Element

The picture element provides more flexibility by allowing the browser to display multiple images to best fit the device the image is being displayed on. The <picture></picture> element has the ability to have multiple sources tags to multiple images on the web. <source> tags are void tags and as such, they don’t have a closing tag.

<source> tag is used inside (sub element) the <picture></picture>element. The source attribute is used to provide instruction to the browser of when it is most appropriate to display the image and when it is located.

  • media attribute – defines when the image should be used by the browser.
  • srcset – is the location of the image.
<picture>
         <source media="(min-width: 600px)", srcset="image.png">
         <source media="(min-height: 300px)" srcset="image3.png">
         <img src="image.png">  // Just in case the browser doesn't support the   
                                //picture element.
</picture>
//Note: the <img> tag inside of the picture element is used in case a browser doesn't handle the picture element, it can default to the <img> tag.  This is what is considered backwards compatibility.

Pearson /Certiport Construct and Analyze Markup That Uses Form Elements

This tutorial covers the objectives for the HTML & CSS IT Specialists exam by Pearson /Certiport. The objective is constructing and analyzing markup that uses form elements.

INTRODUCTION

HTML uses forms to collect information from web users. This information is sent over to a server for storage or processing.

<form></form> Element

The form element is a container for all the other input elements available. All the input fields that can be used inside of the form element will be listed below.

<form method="POST" action="https://www.rickrodriguezjr.com">
   //Input fields go here.
</form>

Form Element Attributes

The form element by itself is just a container that holds all other input fields. For the form element to actually function, it will need a little more information in the form of attributes. Here are some of the attributes that you will need:

//method attribute - tells the form how to send the information it collected to the server.
//action attribute -  where the data that has been collected should be sent; this should be either a relative URL or an absolute URL.

<form method="get" action="https://www.rickrodriguezjr.com/test.php?">
      <!-- all input forms go in here -->
</form>

Form Method Attribute

The form element requires the method attribute to provide additional information of how the information will get to its arrival location. Two options available to the method attribute are:

// GET - A GET request will append all the data to the URL in a name=value form each pair separated by an "&".
// POST - The POST request will send data in the background or through browser header requests.

Advantages of POST vs. GET

POST

  • Places the data in the HTTP Request or in the background.
  • Has no size limitation.
  • The data cannot be bookmarked for future use.

GET

  • Data is added to the URL in the Browsers address bar (visible to the user)
  • Their is a limit on how much data you can send.
  • Not very secure.
  • Can be bookmarked.
  • Can be used with data that doesn’t require security.

Form Action Attribute

The action attribute is used to provide additional information to the form element by providing a location where the data should be sent to. The value for the action attribute is usually in the form of a relative or absolute url.

  • Absolute URL – a complete address on the web such as https://www.rickrodriguezjr.com
  • Relative URL – a partial address usually consisting of a folder or file, such as action=”index.php”

Input Types <input> tag

The <input> tag is a void tag or a individual tag without a closing tag. This tag specifies a input field that the user can enter data. The <input> tag by itself defines a generic input text field.

<form method="post" action="https://www.rickrodriguezjr.com">
     <label for="name">Enter Name</label>
     <input type="text" name="name" id="name">
</form>

Input Type Attribute

The <input> tag can can be displayed to accept and validate many different types of data. This is accomplished by providing a type attribute. The type attribute informs the input tag what data to validate and how it should look. See below for explanation of different input type fields.

  • <input type=”text”> – text field.
  • <input type=”button”> a button.
  • <input type=”file”> a file to upload.
  • <input type=”month”> a month calendar field.
  • <input type=”image”> an image input field.
  • <input type=”date”> a mm/dd/yyyy field with the option of choosing from the calendar.
  • <input type=”tel”> a field that accepts telephone numbers.
  • <input type=”checkbox”> a checkbox field.
  • <input type=”radio”> creates a radio button.
  • <input type=”email”> creates a field that will only accept a validly formatted email.
  • <input type=”password”> creates a field that will allow the typing of a password not visible to prying eyes.

For a more extensive list of input fields, please go to w3schools.com.

Select Input Element <select></select>

The select element is used to create a drop down list available to users. Users can select an item inside of the select drop down list. Items are defined by the <option></option> element. Every select element can have as many items as it wants.

//name attribute is used to send over a name=value pair to the server for
//the select element.

//The option element has a value attribute to define the value being sent to the
//server for that option.

<select name="items">
        <option value="item1">Item 1</option>      
        <option value="item2">Item 2</option>
</select>

<textarea></textarea> Element

The textarea element defines a multi-line text input field. This element is usually used for entering paragraphs or multiple lines of text. Some examples would be comments or text messages.

<textarea cols="10" rows="10" name="nameoftextearea" id="idoftextarea">

</textarea>
Key Points for <textarea>
  • The with and height of the textarea element is defined by the cols attribute and the rows attribute. They will be placed in the opening field for the textearea.
  • The textarea can hold an unlimited number of characters.
  • The name attribute is used in the opening tag to reference the field.
  • The id attribute can be used to associate the text field with a label.

Label Element <label></label>

The label element defines a label for input fields. It provides a name to the input field. It is a good idea for accessibility to use labels as screen readers will read aloud the label when a field has focus.

<label for="username">Username</label>
<input type="text" name="username" id="username">

HTML & CSS (Analyzing Markup that Implements Navigation

This tutorial covers the objectives (Analyzing Markup that Implements Navigation) for the Pearson View exam for HTML & CSS. While it only covers the specific tags, and elements provided in the IT Specialist Exam Objectives, many other examples and explanation are given here.

<a></a> Anchor element

The <a></a> (anchor) element is used to create a hyperlink on the web. This element is used to allow the linking of one web page to another on the internet, and thus allow users to surf from one page to the next.

Anchor Element With href Attribute

The <a></a> anchor element has many attributes, but the most significant one is the href attribute. The href attribute defines the location the link will take you to when clicked on.

<a href="https://www.google.com" target="_blank">Click Here</a>
Anchor Element with a Absolute URL
<a href="https://www.google.com">Click Here</a>

A absolute URL is an address that contains all the parts needed to reach a specific resource from any location in the world.

Anchor Element with a Relative URL
<a href="index.html">Click Here</a>

A relative URL is an address that is always relative to the current location.

Anchor Element Bookmark

A bookmark is a placeholder for the web that will allow quick access to another resource on the web.

A bookmark always has a value in the href attribute to point to an id. An element or tag uses an id attribute to link the element and the anchor tag.

<a href="D1">Click Here</a>
<p id="D1">Click Here</a>
Anchor Element & Target Attribute

The anchor tag as well as having a href attribute, it also has the ability to use the target attribute. The target attribute provides additional information to the anchor element by providing instructions on how to open the link. See below for values for the target attribute:

  • _blank – open the document in a new window or tab.
  • _parent – open the document in the parent window.
  • _self – open the document in the same window it was clicked.
  • _top – opens the document in the entire window.
Map Element

The <map></map> element is used to provide an image map that you can click on. The map element uses the area tag to define clickable areas on the image map.

Example:

<img src="sampleimage.png" usemap="#testmap" alt="test map">

<map>
     <area shape="circle" coords="0,1,90,160" href="index.html" alt="circle image map">
     <area shape="rect" coords="0,2,79,190" href="index.html" alt="rectangle image map">
</map>
Area Element

The <area> tag defines an area inside of the map element.

Navigating Simple Folder Hierarchy

Today many of the Operating systems available such as Linux, and Windows, from the command line perspective and navigating the file system are very similar. Both of the previously mentioned OS organize their folders and files using a directory tree or a directory hierarchy.

Root Folder Definition

Root folder means that all other folders on the drive are inside the root folder. Additionally, it also means that there is no other folder higher than that folder.

At the top of the hierarchy is what we call the “root” folder; which in both OS’s are represented with a “/” for Linux and “\” for Windows.

Linux Folder Structure
Typical Linux Folder Structure
Traversing Folders via Command Line

Navigating folders in Linux as well as Windows from the command line can be tedious. Learning how to move up a directory or down (into a folder) can be facilitated by using the appropriate commands. The commands that will be listed here are mostly for Linux, but some will work on the Windows command line as well with a slight change.

//Move up a directory
cd ..
//Move down or into a directory or folder
cd folder/
//List the current directory contents
//Linux
ls -ls 

//Windows
dir

Understanding HTML5 Semantic Tags

What are semantic tags?

Sematic elements provide meaning and organization to developers and the browsers. Semantic tag don’t typically make any changes, although there are some exceptions, to a website that are visible to the end user or the average web surfer. However, semantic tags do tell a browser or developer what certain sections of a page are about or what type of content to expect for certain sections.

Additionally, semantic elements or tags are also good for SEO or Search Engine Optimization. Semantic tags will provide information to Search engine crawlers providing additional information about the specific content, which can help with indexing.

Standard Semantic Element HTML Page Layout

<header></header>
<nav></nav>
<section></section><aside></aside>
<article></article>
<footer></footer>
Typical HTML 5 Semantic Web Page Layout

<header> Semantic Element

<header></header> – element defines a container for hold introductory content. Such content might include a logo or icon. You may have multiple header elements on a web page but you may not place a header element inside of a footer element.

<header>
       <h1>Heading 1</h1>
</header>
<p>
   The paragraph that goes with the h1.
</p>

<nav> Semantic Element

<nav></nav> – element is used to as a container for any content such as navigational links.

<nav>
    <a href="index.html">Home</a>
    <a href="aboutme.html">About</a>
    <a href="search.html">Search Page</a>
</nav>

<section> Semantic Element

<section></section> – element is used to define a specific section or grouping of content as long as the content has a heading.

<section>
        <h1>Heading 1</h1>
        <p>This is a paragraph that goes with the heading.
</section>

<article> Semantic Element

<article></article> – element defines some kind of stand alone story, or self-contained content.

<article>
        <header>
               <h1>Heading 1</h1>
               <p>Paragraph that goes with h1.</p>
        </header>

</article>

<aside> Semantic Element

<aside></aside> – element defines some content that is a side from the main content that it itself is a stand alone story but it is indirectly related to the main story.

<p>Some paragraph</p>
<aside>
      <h1>Heading 1</h1>
      <p>The paragraph that goes along with h1</p>
</aside>

<footer> Semantic Element

<footer></footer> – element defines a section of an HTML page that is always at the bottom of the page. This section can be composed of authorship information, sitemap link, copyright information, and possibly some contact information.

<footer>
       <p>Author: Rick Rodriguez</p>
       <p>Contact Me at: <a href="mailto:rickrod99@gmail.com">Email Me</a></p>
</footer>

<details> & <summary> Semantic Elements

<details></details> – element is one of those semantic elements that does in fact have a visual effect on a web page. It works to organize content but also add a little extra functionality visually.

The <details></details> will act as a container for a summary heading as well as a supporting paragraph. By doing so, it does two things. One, it will organize the content together as associative content. Two, it will provide additional details that a user can click on and open to read further information.

<summary></summary> tag is used inside the details tag. It provides a visible heading to the details tag.

<details>
        <summary>An article about technology</summary>
        <p>This is an article about technology.</p>
</details>

<caption> Semantic Element

<caption></caption> – defines a table caption or a title to a table.

<table>
      <caption>This table has a title</caption>
      <tr>
          <td>Hello World</td>
      </tr>
</table>

Constructing and Analyzing HTML

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is defined by elements or tags. Elements have an opening and closing tag while a tag or void or empty tag is just one tag without any content or a closing tag. These elements tell the browser how to display content on a webpage.

Defining and Understanding Basic Table Elements

<table> element defines an HTML table.  Tables consist of rows and columns.  Tables are used to organize data into a specific manner.
The table element has child elements called table rows <tr> and table data (columns) called <td>.  Additionally it also has table headers <th> which are used to define the headers of a table.

Example:
<table>
       <tr>
           <th>Header 1</th>
       </tr>
       <tr>
           <td>Cell 1</td>
       <tr>
</table>

<table></table>  - Defines an HTML table.
<th></th>        - Defines a table header.
<tr></tr>        - Defines a table row in an HTML table.
<td></td>        - Defines a table data (column).

Table attributes:
colspan="2" - Defines table cells that span more than one column.

Defining and Understanding H1 – H6

<h1> to </h6> elements are used to define headings in HTML.  The headings range from an <h1></h1> being the larges (most important) of the heading to an <h6></h6> being the smallest (least important).  

<h1></h1> - probably should be main heading in any one page and should only be used once.
<h2></h2> - sub heading.
<h3></h3> - sub heading.
<h4></h4> - sub heading.
<h5></h5> - sub heading.
<h6></h6> - sub heading (smallest or least important).

Paragraph HTML element

<p></p> - The paragraph element defines a paragraph.  A paragraph element always starts on a new line and has an empty line just after.  This element is known as a block level element.  

Block level element - an element that always starts on a new line and takes up the entire width of the page whether it needs it or not.

<p>
This is an example of a paragraph element.  Always keep in mind that a paragraph is a block level element, which is greedy.
</p>

Break Tag

<br> - is a tag (void tag) that is used to a line break.  As an empty tag or void tag this tag doesn't have any content.

<p>
This is an example of a paragraph element.  <br> Always keep in mind that a paragraph is a block level element, which is greedy.
</p>
By using the <br> tag the "Always" sentence will now start on the next line but still inside the paragraph element.

Horizontal Rule Tag

<hr> - The horizontal rule tag (void or empty tag) is used to draw a horizontal line across the screen.  While this tag can be styled to define the color, thickness, and even style of the line by default it is just a black think line.

Division Element

<div></div> - The div element is a container which defines a division or section of HTML.  Think of it as a container for HTML and then can be styled using CSS.  In order to style this element, one would need to define a class or id attribute in the opening tag and style the element using those attributes or just just the element name in the selector to style it.

Span Element

<span></span> - The span element is used to markup parts of text.  You can style a word or an entire sentence in a paragraph.  The element can be styled using CSS either by its element name, adding an id attribute, or adding a class attribute.
span {
   background-color: yellow;
}
<---snip--->
<p>
   This is an example of the <span>span</span> element.
</p>

Unordered List Element

<ul></ul>  The Unordered list element creates a list that has no particular order.  The items in the list will be defined by default by bullet points.  Each Unordered list may have as many list items as needed.  List items define the items in the unordered list.
<ul></ul> - Defines that an unordered list.
<li></li> - Defines a list item.

<ul>
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Grapes</li>
</u>

Ordered List Element

<ol></ol> The ordered list will create a list of items that have an order.  The items are defined either by a numerical value, alphabetical value, or Roman numeral value.  Ordered lists also have list items that are defined by <li></li>

<ol></ol> - Defines an ordered list.
<li></li> - Defines the list item.

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li> 
</ol>

Cascading of CSS Rules

As I previously mentioned in one of my other posts, for educational purposes, you may comingle and use inline styling, with internal styling and external styling. However, in private industry and as a best practice measure you should only use external styling. With that said, if you do use all three stylings, you should understand how conflicts between rules are resolved. In other words, if there are two or more rules that apply to the same element or tag, it is important to understand which will apply or take precedence. Before you can determine that, you must know some basic CSS rules.

Last Rule

The last rule states that if two selectors are identical, the latter of the two will take precedence. In the example listed below, the background color for the paragraph element will be red because the last rule is the one that applies.

P{
    background-color: blue;
}

P {
    background-color: red
}

Rule of Specificity

If there is a conflict between two rules where two selectors are selecting the same element or tag, the selector with the more specific selector will have precedence over the other. In the example below, the universal selector is selecting everything and styling it with a red background, however the paragraph selector is also selecting paragraphs and styling it wit a blue background. Is the paragraph element going to have a red background or a blue background? The answer is blue. Why blue? Because the “P” selector is more specific of a selector than the universal selector. Actually, the universal selector is not specific at all. It pics all the elements on a page.

* { 
    background-color: red;
}

P {
    background-color: blue;
}
---html----
<p id="test">Testing</p>

CSS Keywords

In order to override any predetermined rules in CSS, you could use the keyword !important after any property value to indicate that a rule that otherwise would not be as important is now more important because it has the keyword !important after the declaration. keep in mind that the !important keyword must be used for each declaration that you want to declare as more important.

Using the example below, normally the rule of specificity would state that the paragraphs would be blue because the selector is more specific. However, by adding the !important keyword, we are breaking the rule of specificity for that declaration.

* { 
    background-color: red !important;
}

P {
    background-color: blue;
}
---html----
<p id="test">Testing</p>

CSS Rule Sets (valid syntax) & Selectors

What is a CSS Rule

A CSS Rule is a rule which states how an element or tag will look or should look. Using a valid syntax the rule can be applied to a single element or tag or many elements or tags.

CSS Selectors are case sensitive, so they must match element names and attribute values exactly.

CSS Rules Break Down

//Selector
P {
     color: blue;      //Declaration 1
     font-size: 14px;  //Declaration 2
}
Note - The declaration block is defined by the "{}".  Declarations are always placed inside the curly braces and you can place as many declarations as you would like inside of the curly braces.

Selector - selects the element or tag that the CSS rule will style.
Declaration  - defines the style to be applied (the look).
Declaration syntax - declarations are always defined by a declaration block  :  declaration value ;

The colon is the separator between the property or declaration name and the value.
The semicolon defines the end of the declaration. 

Different Types of Selectors

Selector TypeDescriptionExample
Universal SelectorApplies to all elements in the document* {} targets all elements on the page
Type SelectorMatches Elements Namesh1, h2, h3 {} Targets the elements <h1>, <h2><h3> at the same time.
Class SelectorMatches an element whose class attribute value is the same one after the period..test{} Targets any element whos class value = target.
ol.test{} Targets only order lists whose class value is test.
ID SelectorMatches an element whos id attribute value matches the one after the pound or hash symbol#complete {} Matches any element or tag with an id that has a value of complete or id=”complete”
Child SelectorMatches any element who has a direct child of anotherP > a {} Matches any anchor tag that is a direct child of a paragraph.
Descendant SelectorMatches an element or tag that is a descendent of another specified element.P a {} Targets any anchor tag that sits inside of a paragraph element no matter how deep into the paragraph.
Adjacent Sibling SelectorMatches an element that is the next sibling of anotherh4 + p {} Matches any paragraph directly after the h4 but not other paragraphs
General Sibling SelectorMatches a element that is a sibling of another but doesn’t have to directly afterh4 ~p {} Matches any paragraphs that are siblings of an h4.
Selector Types Explained

HTML & CSS Best Practice, Reusability, and Accessibility

The information below is here for those students who might need some additional documentation on this topic.

  • Reusing code helps to minimize syntax errors.
  • Webpages that include style sheets should be tested on multiple browsers (all website development should be tested on all browsers prior to going live).
  • When designing a webpage, multiple fonts should be used just in case some device is unable to display the font.
  • Well known fonts tend to be the most readable fonts on a web page.
  • Fonts that are declared with ems are always resizable (ems is a relative unit of measurement).
  • Not all browsers uniformly support all CSS declarations.
  • The webkit prefix on a CSS declaration indicates something specific to Safari and Chrome.
  • What is a CSS framework?
  • Names of CSS Frameworks (Bootstrap, Skeleton, Bulma…).
  • What is the purpose of the area element? Click here
  • What is the purpose of the map element? Click here.
  • Accessibility using tabindex=1