Mastering LPI WDE #3: Go Pro with CSS

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.

Why style sheets?

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:

• Add backgrounds
• Add borders and margins
• Change the color of text, words, or portions of text
• Change font and sizes–that is, define the formatting of text
• Arrange content in a well-defined way
• Specify the types of bullets or numbering to use in lists

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.

The power of CSS

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.

From Theory to Practice

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:

• Your external style sheet can be used and shared on multiple pages.
• Your external style sheet will be stored in the browser cache, resulting in faster loading times.
• There will be a clear separation between content and presentation, leaving the code tidier and easier to maintain.

Now you just need to experiment and create an attractive layout for your web pages. The last piece on the front-end side, which fits between HTML and CSS, is JavaScript, a scripting language used to make web pages dynamic and allow interaction with the end user. We will cover JavaScript in the next episode of the series.

<< Read the previous part of this series | Read the next part of this series >>