Skip to main content

CSS

What is CSS?​

CSS stands for Cascading Style Sheets, it is a language used to find and format elements created by markup languages (HTML, XML...).

CSS is used to simplify the process of creating a website. Its main task is to handle the interface of a website such as layout design, text color, font style, spacing, images, background color...

CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

Relationship of CSS and HTML​

HTML and CSS have a close relationship with each other. If HTML is the foundation of a website, then CSS is all the aesthetics of that entire website, they are inseparable.

HTML is used to add content and describe the meaning of each content, but it does not dictate how content is displayed on the page. CSS is used to set the presentation or display of content on a website.

A website can run without CSS, but it certainly won't be as aesthetically pleasing. CSS makes the user interface of a website beautiful and provides a great user experience. Without CSS, websites would be less eye-catching and could be much more difficult to navigate.

How does CSS work?​

Here's how it simply works when the browser loads a web page:


  • Step 1: The browser loads HTML.
  • Step 2: The browser converts HTML into DOM
  • Step 3: The browser fetches the resources associated with the HTML document, such as images, videos, CSS, Javascript...
  • Step 4: The browser parses the loaded CSS and creates a CSSOM Tree.
  • Step 5: DOM Tree and CSSOM Tree combine together to Render Tree. Render Tree contains what will be displayed on the screen.
  • Step 6: The browser draws on the screen pixel by pixel to display the website (this stage is called painting).

CSS Layout and Structure​

CSS Layout​


CSS layouts often rely heavily on boxes, and each box takes up space on the page with properties such as:

  • Padding: space around the content.
  • Border: border located just outside the padding.
  • Margin: distance around the outside of the element.

CSS Structure​

selector {
	property: value; 
	property: value;
	..... 
}

  • Selector: used to select the HTML elements you want to style, we can divide CSS selectors into five categories:

    • Simple selectors (select elements based on tag name, class, id)
    • Combinator selectors (select elements based on a specific relationship between them)
    • Pseudo-class selectors (select elements based on a certain state)
    • Pseudo-elements selectors (select and style a part of an element)
    • Attribute selectors (select elements based on an attribute or attribute value)

  • Property: CSS property name which you can style an HTML element, specified by W3C Standard.

  • Value: In the right of the property after the colon :, which is the value defined for the corresponding CSS property.

  • Declaration: Each declaration includes the name and value of the CSS property, separated by a colon :. CSS declarations always end with a semicolon ;.

  • Declaration block: The declaration block contains one or more declarations, separated by semicolons ;. The declaration block is enclosed in a pair of braces {}

Advantages and disadvantages of CSS language​

Advantage​

  • Increase page loading speed: CSS allows you to write less code so page loading speed will be significantly improved.
  • Saves development time and eases maintenance
    • CSS code can be reused for parts with the same interface and format.
    • CSS helps website source code to be organized more neatly, orderly, and separately, making it easier to edit and update
  • CSS not only makes the website easy to see and beautiful, but also helps improve user experience
  • High compatibility with devices such as PC, Tablet, Smatphone...

Disadvantages​

  • CSS may behave differently for each browser
  • Quite difficult for newbies to remember and use CSS properties

How to add CSS into the Website​

There are 3 ways to embed CSS into the website:

Internal CSS​

To use inline CSS, add the style attribute to the opening tag of the HTML element. Inline CSS only affects the element itself.

<p style="color: #000;">This is a paragraph.</p>

Internal CSS​

Place the CSS code inside the <style></style> tag pair The tag pair <style></style> is placed inside the tag pair <head></head>

<head>
	<style>
		body {
			background: #fff;
		}
		p {
			color: #000;
		}
	</style>
</head>

External CSS​

Place the CSS code inside the CSS file (usually the .css extension). This is a completely independent file from the HTML file. Then use the link tag <link rel="stylesheet" href="path_to_css_file"> placed inside the <head></head> tag pair to embed the CSS file into the website.

<head>
	<link rel="stylesheet" href="styles.css" />
</head>

Reference​