As you progress through the world of CSS it can be easy to get overwhelmed with everything you learn along the way. As such, it can be a good idea to take a moment to refresh yourself on that information. Especially the basics, as they help hold your design work together on that HTML page.
In this short review post, a selection of commonly forgotten or “almost remembered” CSS items will be covered to help strengthen your knowledge. As you move through the content, be sure to make notes of anything that stands out to you. In the end, you will have notes to use as the basis for your CSS cheat sheets. A document that will help you keep all your easy to forget items in one place.
CSS Terminology
It can be easy to go through the motions of learning certain aspects of a skill, yet still, outright forget what a term means. The following collection of terms are ones that are important to CSS and sometimes the ones that seem to slip away the most.
What does CSS stand for?
CSS is the acronym for cascading style sheets. Remember that the reason the term cascade is used is due to the way the waterfalls of styles cascade down the sheet. This is important to understand because your styles can overwrite and cancel each other out if you are not careful with placement.
What Does !important Mean?
In CSS, using the property rule of “!important” carries the voice of override with it. When you apply this rule to a style you are telling the browser that this particular style should take precedence over any other stated style before it. You can see it applied in the example below.
What is CSS Shorthand?
When the term CSS shorthand is used, some beginners find themselves unfamiliar with what that deals with. Using the shorthand style in CSS is a way to save both space and time when working with styles. The shorthand method is essentially a way to add multiple CSS properties in one line or statement.
In the example shown below, the shorthand method has been used for the border property on the HTML paragraph element. You can see that the border property is brought up and then three separate values are provided.
The first is for the width of the border, the second for the style of the border, and lastly the third is for the color of the border. All of these could have been set as their own individual properties, but instead, they have all been set up using the shorthand form instead.
While it may not seem like much of a difference with only one HTML element being used, the effect can be quite something on a stylesheet dealing with large amounts of elements.
The Three Ways to add CSS Styling
In this quick review section, you will go over the three methods of adding CSS styles to an HTML document as well as how they can affect one another in use.
The External Stylesheet Method
There are three common methods to add CSS styles into an HTML document. We will cover each with examples to ensure you have them down correctly.
The first is the commonly used external style sheet. In this method, a separate CSS document is created and referenced in the HTML document. This allows the HTML document to remain clear of the full CSS styling details which could end up making it quite lengthy and difficult to read through.
In the image example below, you can see an external style sheet referenced. It sits in the head of the HTML document using the following format.
<link rel=”stylesheet” href=”NameOfYourStylesheetHere.css“>
The name of the stylesheet will of course be whatever you have named the CSS document to be referenced. In the example, the stylesheet has been named “CSSQuiz.css”, noting the file type is used as well.
In the following example, you can see the CSS stylesheet the HTML document is linking towards. Within it, the paragraph element is targeted with styles on the font color and size. These changes will take effect on the HTML document as long as it has a valid path (or link) to the CSS stylesheet. Remember that the linked stylesheet can be a local file on the same machine as the HTML document or a stylesheet located on a webserver.
It should also be worthy to note that you are not limited to just using a single external stylesheet for your HTML document. You can link multiple CSS stylesheets to your page. This can be useful when you have a certain set of styles you wish to use across multiple sites. It can reduce your screen clutter and save time on repetitive tasks.
The Internal Stylesheet Method
Using an internal stylesheet does not use a separate document. Rather, the style details are added directly into the HTML document itself. In particular, the details are included in the “head” section of the document.
In the example below, you can see a section titled “style” has been added into the head section. Note that it includes an opening and closing tag as with most HTML elements.
With that bit of internal styling set in place, the output on the HTML document will appear as shown in the image below.
As expected, the paragraph element has taken on the styling provided by the internal CSS stylesheet used in the document. However, you may have noticed that we did not remove the link to the external stylesheet from the document’s head section.
You might wonder just how the browser understands which style set to use as both the external and internal stylesheets are in play. CSS styling follows a hierarchy of use. The browser will take on the styles from the following order of CSS used.
- Inline CSS
- Internal CSS Stylesheet
- External CSS Stylesheet
The browser will look at the inline styles, followed by any internal, and lastly your provided external styles. This also means you can have styles override each other as well. Notice how the external style that is still in place directs the font to be colored red, yet in the example above the font took on the blue coloring provided by the internal stylesheet instead.
The Inline Style Method
The last option for adding in CSS styling is the “inline” method. Using the inline style will have your CSS properties and values set right into the HTML document in the same area where the target element is located.
This is done by adding the “style” section in the opening tag of the element. The style tag is followed by an equals sign and a set of quotation marks. Inside the quotation marks, you will insert all the normal style choices as you would in an external or internal CSS stylesheet.
In the example shown below, you can see the paragraph element has been styled using the inline method.
This method can be very quick to use on the spot and gets the job done. However, it can also lead to some very chunky and hard-to-read details on the overall HTML document if overused. For this reason, it would be best to stick with an internal or external stylesheet for the majority of the CSS work to be done.
Lastly, keep in mind that in the example above, both the external and internal CSS stylesheets are still in the document. The inline CSS has overridden the paragraph styling from both of the other stylesheets.
Always Keep Learning
These basics review points of CSS aim to help reinforce some of the more basics points that tend to get overlooked as people move along in their training. However, these small points can make a huge impact on how you design your work. Whether keeping the work clean or ensuring older styles are not indirectly cleared, the effectiveness can be felt as the CSS designer grows in skill (and tools).
However, one very important thing to remember when working with CSS is to keep it interesting. When you reach out to learn new techniques or properties to work with, it should be towards a goal of your own. Learning these tools is much more enjoyable when you are able to play with them to see how your own design views are impacted. Enjoy the process of learning, including the failures. Knowing how not to do something is just as important as nailing it.
When you feel comfortable with web design you can kick it up a notch. Go beyond the basics of CSS and strive for even greater success. Diving into the world of programming can open the door to brand new roles. Expanding the toolbox with JavaScript and PHP is just a small example of the power you can add to your skillset. If you really want to light a proverbial fire under your career, spark the first embers by learning to code. Coding skills can help you make those new professional possibilities into reality. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.