Introduction
HTML is the essential language for web developers. HTML is used to define content on a webpage, while CSS is used to style that content.
We can style our HTML code in some manners. How to manage the CSS style inside and outside the HTML code?
What is HTML?
The HTML language represents the silhouette of a web page The silhouette.HTML is not just a markup language; it also defines the tags used to determine webpages’ structure. Tags can be nested inside other tags to create more complex structures.
The most common tags define the webpage as containing information about the webpage, such as its title, and all of its content, such as text, images, videos, etc.
What is CSS style?
CSS is an abbreviation for the following words: Cascading Style Sheets. CSS represents a document’s look and formatting in a markup language.
Håkon Wium Lie introduced the first version of CSS created in 1994. It was developed to separate the presentational aspects of web documents from the content.
The HTML code in index.html
HTML file, index.html, is the first and default document opened by a web browser. The file contains the hypertext markup language (HTML) code for the page’s content and layout.
The HTML code tells the browser how to display web page text and images.
The HTML file is also called an “index” file because it is typically the first document appearing in a website’s directory of files.
Set up your CSS style
CSS is about HTML style. We can style our HTML code in three manners.
Inline CSS control
We use the style attribute inside HTML elements. Each style statement is ended with a semicolon.
The HTML code
<!DOCTYPE html><html><head><title>CSS Style Getting Started Easily </title></head><body><h2 style=”text-align: center; color: red”>Set up your CSS inside HTML page</h1><p style= “color: blue; font-size: 18px;”>The style.css file is placed in the header tag of the HTML document. This file controls how text, images, and other content appearing on a web page by defining fonts, colors, spacing, and more. The CSS code defines what a web page can look like based on the user’s browser settings and preferences.</p></body></html>
The output of the code
Internal CSS control
We use an <style> element in the <head> section.
Internal CSS code
<!DOCTYPE html><html><head><title>CSS Style Getting Started Easily </title><style>h1 {color: blue;}</style></head><body><h1>Set up your CSS inside the HTML page</h1><p>The style.css file is placed in the header tag of the HTML document. This file controls how text, images, and other content appearing on a web page by defining fonts, colors, spacing, and more. The CSS code defines what a web page can look like based on the user’s browser settings and preferences.</p></body></html>
The output of the code
External CSS control
We use an <link> element to link to an external CSS file.The style.css file is placed in the header tag of the HTML document.
This file controls how text, images, and other content appearing on a web page by defining fonts, colors, spacing, and more.
The CSS code defines what a web page can look like based on the user’s browser settings and preferences.
The HTML code “index.html”
<!DOCTYPE html><html><head><title>CSS Style Getting Started Easily </title><link href=”style.css” rel=”stylesheet”></head><body><h1>Set up your CSS inside the HTML page</h1><p>The style.css file is placed in the header tag of the HTML document. This file controls how text, images, and other content appearing on a web page by defining fonts, colors, spacing, and more. The CSS code defines what a web page can look like based on the user’s browser settings and preferences.</p></body></html>
The CSS code “style.css”.
p { color: black;}
The output of the code
Linking the CSS File
We need to have a link between the HTML file and the CSS file, in other words having a connection between ‘index.html’ and ‘style.css’.
All these files are saved in the identical folder on the server utilizing an absolute or relative path.
<link> element
We utilize <link>element to connect between HTML and CSS files. As mentioned last time, we put the <link> element inside the head tag of the HTML file.
The <link> HTML element is a self-closing tag. The <link> HTML element requires the following attributes.
href
href is the path or the address to the CSS file.
rel
We are linking the HTML file to a CSS file; therefore, the rel value is set to stylesheet.When we connect the HTML file to the CSS file, the self-closing element has to be like the following line of code.
<link href=’https://full-skills.com/stylesheets/style.css’ rel=’stylesheet’>
CSS Ruleset Terminology
The selector
The selector selects the target element that we will style with CSS
The declaration Block
his includes declarations inside curly braces { }, including the curly braces themselves
The declaration
The declaration is the status name for a property and the value of the style’s selected element.
The property
The property is the first part of the declaration that signifies the visual element characteristics we can change.
The value
The value is the second part of the declaration, which determines the property’s value.
Conclusion
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a document written in HTML or XML. The CSS rules describe how HTML elements should be displayed on the web page.
HTML is Hypertext Markup Language, the most common markup language, and can be used to create web pages and other information that can be viewed in a browser.
- We use the style attribute inside HTML elements.
- We can connect the CSS style to the HTML using an <link> element.
- We use a <style> element in the <head> section.
