Category: HTML & CSS

Posted on

Different Types Of CSS Stylings

Analyze and Implement Stylings

Inline Styling

Inline styling is a CSS styling type that is defined with the style attribute.   Each value is separated from the next by a semicolon.  
This type of styling is considered inline because it is always placed inside the opening tag of an element.  
It is also considered element level styling.
Has the highest precedence of any styling type.
<p style="font-weight: bold; color:red;">Some Content</p>

Internal Styling

Internal styling - is styling that is considered to be page level styling.
It is always defined by using the <style></style> element in the head of the document.
All CSS rules should be placed between those two tags.
It has the second highest precedence only overriding external styling.
Example
<!doctype html>
<html>
       <head>
              <style>
                     //Internal styling
                     P { color:blue; }
              </style>
       </head>
       <body>
       </body>
</html>

External Styling

External styling - it is considered site level styling.  This styling is the separation of HTML and CSS.  External styling is best practice when using CSS.  
It is always defined by using the <link> tag to point to an external file of some kind.  The "rel" attribute defines the relationship between the HTML file and the external file.  Additionally, the "href" attribute points to the location of the external file.  In this case, the link tag will be placed in the head of the document.  
Example
<!doctype html>
<html>
       <head>
              <link rel="stylesheet" href="style.css">
       </head>
       <body>
       </body>
</html>

CSS Precedence 

The term precedence is defined as being more important than someone or something else.
In HTML & CSS, stylings do have precedence over one another.
Below is a list of order of precedence:

           1. Inline Styling - has the most precedence and it will overwrite any conflict with any other style always.
           2. Internal styling - has the second most precedence and can overwrite external styling but not inline styling.
           3. External styling - has no precedence and cannot overwrite any other styling type.

As mentioned earlier, external styling is best practice when styling a website.  In private industry, you should always use external styling, and should never comingle two or three of the different styles.   However, for the purpose of a industry certification exam, you can use one or all three styling types at once.

Resolving CSS Conflicts with Precedence

The code below is a basic example of a conflict between inline styling and internal styling.  Notice how the paragraph element has inline styling trying to set the font size of that paragraph to 10 pixels in size.  However, the internal styling is also trying to set the paragraphs to a font size of 14 pixels.  Will the paragraph element make the font size 10 pixels or 14 pixels?  

The paragraph element will make the font size 10 pixels because inline styling overrides internal styling due to its precedence.
Posted on

HTML & CSS Well-formed Markup Pages

HTML FUNDAMENTALS

Construct well-formed page markup

Doctype -tag This tag provides information to the browser on what kind of document to expect.
This tag is always the first tag in any HTML document.
(DOCTYPE is not case sensitive and can be written in multiple ways)
<!DOCTYPE html>
HTML element or tag - is the root of the HTML page and is considered a container for all other HTML content in an HTML page.  In other words, HTML holds all other tags and elements on a page.
<html>
</html>
Head element or tags - This is a container for metadata (Metadata - information about information). 
It is always located just above the body element.
You can find such other elements in the head such as title, and link tags.
<head>

</head>
Body - This element or tags define the body of an HTML page.
All HTML elements and tags will have to be defined inside the body's opening and closing tag.
Every HTML page should have the same basic structure and should include the following elements or tags.
Example:
<!doctype html>
<html lang="english">
       <head>
       </head>

       <body>
       </body>
</html>
Posted on

HTML & CSS Metadata Elements

HTML Fundamentals

Constructing Markup That Uses Metadata Elements

Script Tag - Used to define where Javascript should be placed
Can be used to point to external files where Javascript may be placed using the src attribute.
Note: Typically located in the head of document.
<script>
alert("Hello world!");
</script>

No script tag - used to display other content to users who have either disabled their Javascript or their Javascript is out of date.
Typically located in the head of the document.
<noscript>Your browser is out of date.</noscript>
Style tags - Used to define CSS for an HTML page.
Typically used when creating Internal CSS.
This tag must be placed in the head of the document.
<style>
P { background-color: blue; }
</style>
Link tag - this tag is used to show the relationship between one file and another.  In most cases, you can use the link tag to point to an external CSS file.  However, it can also be used to link an HTML file and a Javascript file.
This tag doesn't contain any content.  It only contains attributes.
rel attribute - defines the relationship between the current file and the external file.
href attribute - defines where the file is located.
<link rel="relationship" href="style.css">
Meta tags - tags that provide information about the webpage.
These tags are always located inside the head of the document.
These tags do not get displayed on the web page.
Metatags are only used by search engines, and developers.
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Mr. Rodriguez Blog">
<meta name="author" content="Ricardo Rodriguez">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Posted on

Hashtags and why they are important to understand

Basic Understanding of Hashtags

Introduction

This article is about explaining how a hashtag helps to organize and index content for social media. I felt compelled to do this because I feel like the younger generation might understand that it is important to use hashtags, but I don’t believe they really understand why and what is happening behind the scenes. Just recently I was at a training, and most of the people were fairly young, at least younger than me, but most did not understand the significance or how a hashtag works. So if you want to know why hashtags are important to use and how they work, this is the article for you.

What is a hashtag?

The hashtag has been around before the telephone was invented. The symbol, “#” was known as a pound. For a very long time, we knew the symbol as a pound and nothing else. Today some people still know it as a pound, but most folks know it as a hashtag, especially when it is associated with social media. So, what does a hashtag do? Really, a hashtag helps to organize or group content on social media or any other site that needs some type of data organization by using a word or words together proceeded by a pound sign (hashtag).

There are many reasons why you would want to use hashtags and how you should use them on different social media sites. However, this is not the article for that. If you need more information, I recommend reading the article entitled, “How to use hashtags in social media.”

What an actual hashtag does.

The main purpose of this article is to understand what the hashtag does. As we mentioned before, a hash tag is nothing more than a keyword. How do these keywords group and organize content? In the most simple way, each time you create some content and associate a hashtag with it, the word with the hashtag (keyword) is being put in one table in a database, and the content that is being associated with it is being placed in another table. This creates between two tables in a database relationship knowns as one to many relationship. This relationship is what helps to index content. By searching for that keyword, in turn that keyword will give you the results of all the content it points to. For example, if you posted three posts to a social media site, and used the hashtag #owner, then every end user who searches for the keyword “owner”, the results will be the posts that are linked to that keyword. Hashtags are important as they help to organize and group content for simpler searching.

References used on this article

https://digitalmarketinginstitute.com/blog/how-to-use-hashtags-in-social-media#heading_38454

https://iamyogesh.medium.com/what-is-the-best-approach-to-store-hashtags-in-a-database-caa796d714d4