The previous article in this series discussed the HTML language and how it gives semantic structure to text elements. Once the structure of a website has been created, it is necessary to customize it from a graphical point of view; that is, to apply styles. Without them, every website would be a simple combination of black text on a white background, perhaps embellished with other simple elements, such as links and images. CSS, an abbreviation for Cascading Style Sheets, comes to our rescue.
Imagine creating an HTML page and populating it with a series ofparagraphs, lists, images, and links. You will want to decide how to visually make your content more presentable. CSS style sheets serve precisely this purpose: They allow you to separate the scope of the document from its presentation, specifying how different HTML elements should be represented visually.
It is pointless to talk about HTML without mentioning CSS and vice versa. The interconnection between these two languages is very close: To create complete and visually attractive web pages, it is necessary to know the basics of both languages. CSS allows you to customize web pages, particularly to:
Think of a style sheet as a set of rules that specify properties of an element or group of elements within a web page. A CSS rule comprises a selector and one or more declarations. The selector picks out one or more elements within the document. The declarations, in turn, set the properties of the selected elements. For example, it is possible to color all paragraph text red, put a colored background on certain words, change the style of links within the document, and so on. The ultimate goal is to manage the entire layout of a website, making it visually more appealing to the end user.
The Web Development Essentials certification from the Linux Professional Institute (LPI) teaches you how to create basic CSS rules to add styles to your web pages. But CSS is much more than a set of simple static rules.
Internet users have different monitors, each offering a wide range of possible resolutions. In addition, in recent years, the number of people who use smartphones and tablets to visit websites has been constantly growing. The display area on mobile devices is enormously different from computer monitors.
It is legitimate to ask, therefore:
“How can I create a website that is correctly displayed on every device?
Nowadays, a website must be responsive, a term meaning that the website responds differently based on the size of the display on which it is viewed. The web developer must try to free the end user, as much as possible, from resizing the pages they visit while reading the content. Good marketing for a company necessarily involves a website of this type, capable of adapting to the most modern devices, be they computers, tablets, or smartphones.
To achieve this, it is necessary to use so-called media queries, special CSS declarations that identify the device or one of its features (such as the maximum or minimum screen width) and apply different styles based on them. With media queries, CSS can manage behaviors based on the resolution of the device used, hiding elements or changing their size, and adapting the layout of different web pages to the screen size. It is also possible to change the structure of a document during printing by removing images, the navigation menu, advertising, and anything else that is considered superfluous.
Media queries can also do much more and customize your website in every way!
The Linux Professional Institute’s (LPI) Web Development Essentials certification details all the aspects necessary to create a responsive website. Still, it offers interesting insights to consider when designing a custom style sheet for a site that provides the best possible user browsing experience.
As with HTML, you can create style sheets simply by using the text editor on your PC or one of the editors or IDE environments discussed in the previous lesson. You can insert your CSS rules into a specific section within your HTML file or create a new external file to which the HTML file refers. While the first option is ideal for style sheets with a limited number of CSS rules, the latter alternative has significant advantages: