Make Your Webpage Stand Out
Over the course of our lives we’ve probably visited thousands of websites. The vast majority don’t stick in your mind for long. There have probably been a couple of websites that have stuck in your mind over the years. What was it that made that particular website stand out? Was it the user-friendliness? Was it the look of the website? The reason is probably all of this, but there’s no denying that our visual memory is a lot stronger than any other form of memory. In this blog post we’ll discuss how we can make a website stick out visually.
What do we use to style a website?
The technology that we need to style a webpage is known as Cascading Style Sheet technology. This is more commonly known by the acronym CSS. It’s a style sheet language as the name would suggest. CSS doesn’t affect the functionality of a webpage. A webpage without CSS would perform all the functions that you would expect it to perform. However, a webpage without CSS would lack the attractiveness and beauty that makes it stand out. A webpage without CSS is like a delicious meal with no presentation. The presentation of the meal is what makes you choose it off the menu. Similarly, the presentation of a website makes the user choose that website among the many options.
Why Do We Need CSS?
The above image gives the ideal demonstration of why CSS is used. Both webpages would perform the same functions, but only one looks interesting enough to engage the user. A quick glance at the webpage with CSS would tell you what the website is for. The ultimate goal of the webpage should be to make an user friendly environment for the users. The initial look at the above webpage would let the user know that they’re looking at a search engine. The webpage without CSS would not give any indication as to what the functionality of the webpage is. A search engine would not look any different from a shopping website. CSS in a webpage describes the personality of a website.
How Can You Use CSS?
There are mainly three ways to incorporate CSS into a website.
- Inline CSS
- Internal or Embedded CSS
- External CSS
All three methods would give us the same result. We should choose the method which is best suited for the program that we’re writing.
Inline CSS
Inline CSS is written in the body section of a HTML file. This method is ideal when we want to style a single line of text or image.
<!DOCTYPE html><html><head><title>Inline CSS</title></head><body><p style=”text-align :center; color :blue; font-style: italic; font-size: 200%;”>Inline CSS is written within the body section of a HTML file.</p></body></html>
Internal/Embedded CSS
In the internal method we write the CSS code within the head section of a HTML file. This method is used when we need to style a HTML document separately.
<!DOCTYPE html><html><head><title>Internal CSS</title><style>body {font-style: italic;font-size: 200%;text-align: center;color: blue;}</style></head><body>In the internal method we write the CSS code within the head section of a HTML file.</body></html>
External CSS
This method is ideal when we are required to use the same CSS features for multiple HTML files. A separate file with a .css extension which would be linked to the HTML file is used in this method. A link tag would be used for the linking function.
The below code would be included in a CSS file with a .css extension.
body{background-color: aqua;color: black;}.text{text-align: center;}#para{font-style: bold;font-size: 200%;}
CSS syntax
We have had a look at how to add CSS to a webpage. Now we have to consider what we have to add within the CSS files.
Each CSS line needs to include a selector and a declaration. Each declaration includes a property and a value.
body{ color: blue; }body- Selector in CSS. It points to the HTML element that you want to style.
color- Color is the property in CSS
blue- Blue is the property value in CSS. The property and the property value together make up the declaration.
There are several types of selectors that can be used in CSS.
Type selectors
The type selectors add features to a given type within a document. If a type selector is used, all the elements of a given type would be affected by the style.
p{font-style: italic;color: blue;}
The above code would apply the font-style and color features to all <p> elements within a document.
Universal selectors
Universal selectors match the features to any type of element. It could be used to define the default features of a document.
*{color: blue;text-align: left;}
The color and text-align features would apply to all types(<p>,<a>) of an element within a document.
Class selectors
Classes can be defined to group a set of elements. When a style effect is added to the group it would affect the entire class of elements. Classes can be used when a certain property needs to be repeated for a certain number of elements.
.text{text-align: center;color: brown;font-style: italic;}
The above properties would be applied to all elements of class text.
ID Selectors
The ID selectors are similar to class selectors, but they are usually used to apply properties to a single element rather than a group of elements.
#para{text-align: center;color: pink;font-style: italic;}
The element with the ID ‘para’ would have all of the above mentioned properties.
Grouping Selectors
Styles can be added to multiple selectors at a time if it’s required.
h1,h2,h3{text-align: center;color: black;font-style: italic;font-size: 150%;}
The above properties would be added to all h1,h2 and h3 elements simultaneously.
There are countless features in CSS that can be used to style a webpage. From adjusting the alignment to adjusting the transparency of a menu item. We cannot discuss all these features in a single blog page. Therefore I’ll link some sources which are free of charge where you can learn about these features.
Sources for learning CSS:
The best way to learn CSS is by experimenting. Follow the given sources and try out some CSS yourself.
