While building my sinatra website I realized I need to freshen up on my CSS and decided to take the Christina Truong's Essential CSS course .
She began with explaining ways to connect your css to your HTML document.There are many ways to add css to your HTML document:
1. External CSS File:
In order to add your css to your file externally, you could create a css file:
main.css
Then within your index.html file you would add the following to your <head> tag.
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
Please note, that sometimes you may see the following type inside of you link rel:
<head>
<link rel="stylesheet" href="/css/main.css" type="text/css">
</head>
The type was required in previous HTML versions but is no longer required in HTML5, so while you may see it, it is no longer necessary in the most recent version of HTML.
Using Multiple External CSS files:
There will be times when you need to reference multiple CSS files. When that happens it is better to import your css files.
For example, lets say you have the following css files.
styles/layouts.css
styles/fonts.css
styles/buttons.css
Then you would create a css file that imports all of those files like this:
styles.css :
@import url('styles/layouts.css')
@import url('styles/fonts.css')
@import url('styles/buttons.css')
Lastly, within your HTML file you would add the following:
<head>
<style>
@import url("css/styles.css");
</style>
</head>
You may see @import is used with CSS Preprocessors like sass. However, it is worth noting that importing your css files effect page loading. It is important that you research how importing css files will effect your personal project.
Inline Method
The inline method uses a style attribute which is added to the opening HTML tag like this:
<p style="color:red;"> red Paragraph </p>
Inline styling should be used sparingly because it makes it hard to read. Also, inline overrides your css files.
Internal CSS:
CSS is added between the style tag in the head of the document. Like this:
<head>
<style>
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
</style>
</head>
Though it is better than inline, it is still inefficient. You would have to copy this block into each of your HTML files for it to work.
Homepage always called index.html
Images in CSS and RETINA DISPLAY
Apple created the Retina Display which stands for high pixel density screens.
Pixel density refers to the number of pixels within a given space and the space is measured in pixels per inch (PPI) or dots per inch (DPI).
Retina displays have double the number of PPI/DPI. Meaning that Retina displays can fit two pixels within the same width and height of a non-Retina display.
The more pixels there are within the same area, the smaller the pixels are, which is how text and images appear smoother, clearer and show more detail.
A simple way to support Retina in non-Retina screens is to use an image twice the size.
For example, if you use an image file that is 300 pixels wide then resize it to 150 pixels with css, you are essentially adding double the amount of pixels within the same dimension, just like Retina. For both Retina and non-retina screens, the image will display as 300 pixels wide.
There are other ways to optimize images on your webpage. Here is an article that provides 10 great tips to optimize images for the web:
- Name your images descriptively and in plain language.
- Optimize your alt attributes carefully.
- Choose your image dimensions and product angles wisely.
- Reduce the file size of your images.
- Choose the right file type.
- Optimize your thumbnails.
- Use image sitemaps.
- Beware of decorative images.
- Use caution when using content delivery networks (CDNs).
- Test your images.
Absolute versus Relative Path
An Absolute Path refers to a resource located on a server. The entire url including the http must be referenced. An absolute path is usually used for linking to pages outside your website.
A Route Relative Path is referenced by using a forward slash which will assume that the url is the same as your current url. This is important when you need to view your website on a local server during development.
Avoid Hotlinks- hotlinks is the act of linking specific files such as images and embedding them into your own website.
Check W3C for information on CSS.
Song of the day:
Top comments (0)