In programming, the stylistic options of an HTML or XML document are somewhat limited. This is where CSS comes in. This computer language supports the formatting and style of the contents of web pages. What is the role of CSS on a web page? Where is the best place to put CSS code?
> Download this guide and learn the basics of HTML and CSS ” align=”middle”/>
What is CSS?
The CSS programming language (Cascading Style Sheet) allows you to integrate presentation rules into an HTML or XML document. This cascading style sheet was developed in the 1990s. The idea of cascading reminds us that a website coded with CSS is styled with rules classified according to different degrees of importance.
What is the role of CSS on a web page?
The role of CSS is to define a set of stylistic rules within web pages coded in HTML or XML.
As a reminder, HTML (HyperText Markup Language) is a programming language. It is one of the main tools of web development to create the computer structure of a web page.
As for XML (Extensible Markup Language), it is a computer language just like HTML. It was developed by the W3C (World Wide Web Consortium) in order to facilitate the transmission over the Internet of information generated with a more complex language: SGML (a standardized generalized markup language).
Knowing this, it is natural to wonder what more CSS brings to a web page that has already been coded with a programming language.
Why use CSS?
The purpose of CSS is to separate the structure of an HTML or XML document from its presentation. Indeed, these two languages already manage a lot of rules. Here is a non-exhaustive list :
- The page structure.
- Hypertext writing.
- The creation of input forms.
- The integration of visual aids.
- The semantic structure of the page.
Rather than entrusting them with the additional formatting of the content, it is possible to delegate it to the CSS.
CSS supports all document presentation rules:
- The borders of the pages.
- Margins and padding around the elements.
- Titles and subtitles.
- The creation of geometric elements.
- Applying simple effects or animations.
- The appearance of the menus.
These apply to several documents simultaneously, which saves programming time. In the event that there is a stylistic change to be made, the rule automatically applies to all the pages of a site. Again, this is a considerable time saver.
In summary, HTML and XML are used to create the structure of a web page and are aimed more particularly at developers. back end. For its part, CSS gives a visual style to the elements. It is more effective in defining the aesthetics of a website and it is widely used in development. front end.
Where is the best place to put CSS code?
To place CSS code in an HTML sheet, there are three ways to do this:
- Embed the code directly into the HTML tag with the style attribute.
- Embed the code directly into the HTML file with the attribute.
- Create an external CSS file and linked to the HTML sheet via the link tag.
Knowing this, it is interesting to distinguish between an attribute and a tag.
Definition of a tag
A tag is used to mark the start and end of an item. For example, an anchor is a tag used to embed a hyperlink in a page in order to link to another web page. The anchor tag is represented with the letter “a”.
HTML writing of the anchor tag: nouvellepageweb .
Definition of an attribute
An attribute defines a property more specifically qualifying a tag. An attribute always comes with a value and these two elements are always separated by the “=” symbol.
In the example of the anchor tag, you will need to add the “href” attribute to it to make the hypertext redirection work correctly to another web page. It is this attribute that specifies what the landing page is.
HTML writing of the “href” attribute with the anchor tag: nouvellepageweb .
Where to integrate the CSS code?
The best bet will be to integrate the code according to the context. If the CSS code is common to several pages, it is recommended to make a separate file, that is to say to create an external CSS file linked to the HTML sheet. This ensures the consistency of styles between all the pages of a site.
If the CSS code is common to several elements within the same HTML document, it is better to integrate it at the top of the page (header). To do this, all you have to do is combine the code in the “style” tag inside the “head” tag.
If it’s a specific piece of CSS code, the easiest way is to embed it directly into the HTML tag of an element with the attribute.
What’s the best way to import a CSS file into an HTML page?
Inside a website, many styles appear. The larger the site, the more styles multiply. They can contain hundreds or even thousands of lines of code. The most common practice is to create a styling file written in CSS. Here is how to import a CSS file into an HTML page using the “link” tag.
The “link” tag for CSS has at least three attributes:
- “Rel”, which defines the type of relationship.
- “Type”, which identifies the format of the data.
- “Herf”, which refers to the linked resource.
A fourth attribute can be integrated into a “link” tag:
- “Media”, which indicates on what type of viewing medium to use the file.
Here is an example of a “link” tag:
Good to know : The “link” tag is always placed before the end of the “head” tag in the HTML document.
5 CSS resources for websites
Here are 5 CSS resources to nurture creative minds, who are keen to follow web design trends:
The computer language CSS is a tool appreciated as much by web developers as by web designers. It saves time and offers greater freedom in terms of creativity.
To go further, download this free guide and learn about the definitions, differences, and basic code elements of HTML and CSS programming languages to run your website.