Buzz
CSS is an abbreviation for Cascading Style Sheets. Explore the details of what CSS is all about in this article by Mytour.
1. Understanding CSS: The Relationship between CSS and HTML
- CSS stands for Cascading Style Sheets, a language used to format elements on a webpage. While HTML plays a role in creating elements like text, headers, and tables, CSS allows you to alter the layout, color, font, and various aspects of HTML elements, enhancing the aesthetics and appeal of the website.
- CSS and HTML have a crucial relationship in web development. HTML acts as the engine of a car, while CSS is the style and color of the car. A website can function with HTML alone, but it lacks aesthetic appeal. CSS makes a website attractive and provides a better user experience. CSS not only manages layout and formatting but also handles text color, image size, and spacing between text elements.
2. The Structure of CSS Code
The structure of CSS code mainly relies on the box model and properties that control space inside and around that box, including:
- Padding: This is the space around the content inside a box, such as the space around a piece of text. Padding helps create whitespace around the content.
- Border: The border lies just outside the padding. It defines the border or boundary of the box, usually lines surrounding an element.
- Margin: Margin is the distance from the outside of an element to other elements or the boundary of the page. It determines the space between the current element and other elements around it.
3. Structure of a CSS Segment
A CSS segment is structured as follows:
- Selector: CSS will be applied to specific HTML elements on the webpage. The selector is placed within parentheses (or curly braces).
- Declaration of properties and values: Within the selector, you declare CSS properties along with their values. Each property is accompanied by its value, separated by a colon. Each pair of property and value is enclosed in curly braces {}.
- Semicolon: Each pair of property and value within a selector is terminated by a semicolon. The semicolon marks the end of a declaration and prepares for the next declaration.
Example of the structure of a CSS segment:
selector {
property-1: value-1;
property-2: value-2;
property-3: value-3;
}
CSS is used to format display properties on a webpage by interacting with individual HTML elements, such as text in HTML structured like the example below:
In case you want to format the font color of the text to pink and make it bold on the visitor's browser, you use CSS code similar to the one below:
In this scenario, the 'p' (paragraph or text block) is referred to as the 'selector,' a part of the CSS code used to specify the HTML element applying CSS Style. In CSS, the selector is placed to the left of the first curly brace.
The information within the curly braces is called a declaration, consisting of properties and values applied to the selector. Properties include font size, color, and margin, while values are the settings for those properties.
In the example above, 'color' and 'font-weight' are properties, and 'pink' and 'bold' are values for those properties.
{ color:pink; font-weight:bold; } is a declaration, and 'p' (or paragraph in HTML) is the selector.
Additionally, we can apply these basic principles to alter font size, background color, margin, and more.
For instance:
body { background-color:lightblue; } formats the background color of the webpage to light blue. Check the CSS Color Codes here.
Or p { font-size:20px; color:red; } sets the font size to 20px and formats the font color to red.
If you're wondering how to apply these CSS codes to HTML content, much like HTML, we can write CSS codes through text editors or word processors on computers and can incorporate these CSS codes into HTML web pages in three ways.
CSS codes (or Style Sheets) can be directly inserted into HTML documents (Inline CSS), inlined (Internal CSS), or externalized (External CSS). In the case of external CSS files, they are saved as .css files and used to define the overall layout of the entire website through a single file (instead of adding separate CSS files for individual HTML elements we want to style).
To use external CSS, .html files must include a header section linked to the external CSS, like the example below:
The code above will link the .html file to external CSS (in this example, mysitestyle.css), and all CSS instructions in the file will be applied to the linked .html pages.
Additionally, we can insert inline CSS code into the header of a specific .html page, like the code snippet below:
This code will apply a background color of violet-red, a font size of 20px, and a font color of green to only this unique .html page.
Lastly, we can directly embed CSS codes into HTML, although this method applies to a single code only. For example:
In the code snippet above, the header on a single .html page will be formatted with a purple color and a font size of 40px.
4. Embedding CSS in a Website
There are 3 ways to embed CSS into a webpage, specifically as follows:
Method 1. Direct CSS Embedding (Inline CSS): Use semicolons to separate rules and place them within the style attribute.
Method 2. Internal CSS Embedding: Use the style tag to place CSS code inside the HTML document.
Method 3. External CSS Embedding: Write CSS code in a separate file with the extension .css, then use the link element to link this CSS file to the HTML document.
In the article, Mytour has shared What is CSS, the structure, the layout of a CSS segment, and how to embed CSS into a website. We hope this provides useful information you're seeking.
