Webpage styling can be confusing and to fully understand the power behind its language CSS (Cascading Style Sheets) can take some time and effort. But it does not have to be this way if we can explore the foundation before we venture into styling.
It is important to appreciate that HTML and CSS are two different languages and should be considered as such. Even though that we sometimes add CSS to HTML, this by far does not mean that they are the same. So let's have a look at the foundation first.
There are three main styling methods:
Inline Styling
This method targets a specific tag and is only relevant to this tag. For example, you choose a specific tag, let's say a <p> and decide to style this specific <p> tag as follows: <p style="color:blue;margin-left:20px;">. You have just made this paragraph blue and with an indent of 20 pixels. All other <p> tags are untouched. Your styling instructions are 'inline' within the tag itself. Do you know what this does <h2 style="background-color:red;">This is a heading</h2>?
Internal Styling
This methods has more global powers rather than the specific powers of inline styling. Here we define the style using a style tag that resides in the head section. It looks as follows:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
The body, i.e. the webpage background is set to a yellow colour and all paragraphs are now blue. Please take note that all paragraphs are now blue unless you have specified a specific paragraph to be different using an inline styling (or defining a class altogether). The inline styling will take precedence over the globally defined styling internally.
External Styling
This methods take all styling instructions between the stye tags and places them in an external style sheet to which several pages link. This means that this method is even more global than the internal styling as a change in settings in that external style sheet will cause a cascading effect onto all pages linking to it.
As you can see the foundation of CSS is based on global and local specificity, with different powers depending on what you want to achieve.
It is important to appreciate that HTML and CSS are two different languages and should be considered as such. Even though that we sometimes add CSS to HTML, this by far does not mean that they are the same. So let's have a look at the foundation first.
There are three main styling methods:
- inline: style attribute
- internal: <style> element
- external: external CSS style sheet(s)
Inline Styling
This method targets a specific tag and is only relevant to this tag. For example, you choose a specific tag, let's say a <p> and decide to style this specific <p> tag as follows: <p style="color:blue;margin-left:20px;">. You have just made this paragraph blue and with an indent of 20 pixels. All other <p> tags are untouched. Your styling instructions are 'inline' within the tag itself. Do you know what this does <h2 style="background-color:red;">This is a heading</h2>?
Internal Styling
This methods has more global powers rather than the specific powers of inline styling. Here we define the style using a style tag that resides in the head section. It looks as follows:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
The body, i.e. the webpage background is set to a yellow colour and all paragraphs are now blue. Please take note that all paragraphs are now blue unless you have specified a specific paragraph to be different using an inline styling (or defining a class altogether). The inline styling will take precedence over the globally defined styling internally.
External Styling
This methods take all styling instructions between the stye tags and places them in an external style sheet to which several pages link. This means that this method is even more global than the internal styling as a change in settings in that external style sheet will cause a cascading effect onto all pages linking to it.
As you can see the foundation of CSS is based on global and local specificity, with different powers depending on what you want to achieve.
RSS Feed