HOW CSS IS STRUCTURED - ALL STYLING METHODS

HOW CSS IS STRUCTURED - ALL STYLING METHODS

HOW CSS IS STRUCTURED - ALL STYLING METHODS

In the earlier articles, we have discussed css and its purpose. We have also gone through using css to style html elements on webpages, all this knowledge is very good and important but incomplete if you do not understand how css is structured in websites.There are different formats with advantages and disadvantages. Let us understand the structure of css first of all in this particular article and then the different ways to use css structure to style web pages.

PREREQUISITES

 In order to fully understand this article, you need to understand the following concepts or have previous knowledge of computers and coding generally.

  1. Basic computer literacy
  2. Knowledge of CSS's fundamental syntax structures in detail.

APPLYING CSS TO HTML

There are three different ways to style a html page: with an external stylesheet, with an internal stylesheet and with inline styles.

EXTERNAL STYLESHEET

An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and most preferred method of bringing CSS to a document it gives you the option to style multiple web pages with the same CSS stylesheet. In the Getting started with css” , we linked an external stylesheet to our web page.

You reference an external CSS stylesheet in HTML using the <link> tag:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS styling</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Let us assume a simple css file to be like this:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

The href attribute of the <link> element needs to reference a file on your file system. In the example above, the CSS file is in the same folder as the HTML document and this is usually the best practice, but you could place it somewhere else and adjust the path. Here are three examples:

<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />


<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />

From the above linking samples, it is easy to understand that you just have to link your href address based on the directory and file hierarchy, once all the files are linked, your css will work perfectly.

INTERNAL STYLESHEET

An internal stylesheet resides within an HTML document. To create an internal stylesheet for an HTML document, you place CSS inside a <style> tag contained inside the HTML <style>.

The HTML for an internal stylesheet might look like this:

In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files.

But for websites with more than one page, an internal stylesheet is less efficient for working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. This is very stressful and cumbersome, for maintenance and edits, you will have to adjust the css from the code of every single page in your code. There is the risk that even one simple styling change may require edits to multiple web pages.

INLINE STYLES

Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute. The implementation of an inline style in an HTML document might look like this:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!    
</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Never use css this way unless you have no choice, It is the worst practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content always makes maintenance easier for all who work on the website.

CSS SELECTORS

A selector targets HTML to apply styles to content. We have already discovered a variety of selectors in the Getting started with css tutorial. If CSS is not applying to content as expected, your selector may not match the way you think it should match.

Each CSS rule starts with a selector — or a list of selectors — in order to tell the browser which element or elements the rules should apply to. All the examples below are valid selectors or lists of selectors.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

With each selector, you can then target the html element and style it according to the html elements on the web page.

Try creating some CSS rules that use the selectors above. Add HTML to be styled by the selectors. If any of the syntax above is not familiar, try searching MDN.

SPECIFICITY IN CSS

You may encounter scenarios where two selectors select the same HTML element. Consider the stylesheet below, with a p selector that sets paragraph text to blue. However, there is also a class that sets the text of selected elements to red.

.special {
  color: red;
}
 
p {
  color: blue;
}

 

Suppose that in our HTML document, we have a paragraph with a class of special. Both rules apply. Which selector prevails? Do you expect to see blue or red paragraph text?

<p class="special">What color am I?</p>

The CSS language has rules to control which selector is stronger in the event of a conflict. These rules are called cascade and specificity. In the code block below, we define two rules for the p selector, but the paragraph text will be blue. This is because the declaration that sets the paragraph text to blue appears later in the stylesheet. Later styles replace conflicting styles that appear earlier in the stylesheet. This is the cascade rule.

p {
  color: red;
} 

p {
  color: blue;
}

However, in the case of our earlier example with the conflict between the class selector and the element selector, the class prevails, rendering the paragraph text red. How can this happen even though a conflicting style appears later in the stylesheet? A class is rated as being more specific, as in having more specificity than the element selector, so it cancels the other conflicting style declaration.

PROPERTIES AND VALUES

At its most basic level, CSS consists of two components:

  1. Properties: These are human-readable identifiers that indicate which stylistic features you want to modify. For example, font-size, width, background-color.
  2. Values: Each property is assigned a value. This value indicates how to style the property.

The example below highlights a single property and value. The property name is color and the value is blue.

h1{
 color : blue;
Background-color:yellow;
}
P{
Color : red;
}
The Calc () function
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
.outer {
  border: 5px solid black;
}
.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

 

Transform functions

Another example would be the various values for transform, such as rotate().

<div class="box"></div>
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurpl;
  transform: rotate(0.8turn);
}

 

CSS RULES (@ RULES)

CSS @rules (pronounced "at-rules") give instruction for the css function or how it should behave. Some @rules are simple with just a keyword and a value. For example, @import imports a stylesheet into another CSS stylesheet:

@import "styles2.css";

 When you start making responsive designs with css, you will encounter the media querries rule very frequently. In this case the media querries sepcify rules for the alignment of html and css elements on a page in order to make them responsive to all screen sizes.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

SHORTHANDS

Some properties like font, background, border and margin are called shorthand properties. This is because shorthand properties set several values in a single line.

For example, this one line of code:

/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

is equivalent to these four lines of code:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

This one line:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

is equivalent to these five lines:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

COMMENTS

As with any coding work, it is best practice to write comments along with CSS. This helps you to remember how the code works as you come back later for fixes or enhancement. It also helps others understand the code.

CSS comments begin with /* and end with */. In the example below, comments mark the start of distinct sections of code. This helps to navigate the codebase as it gets larger. With this kind of commenting in place, searching for comments in your code editor becomes a way to efficiently find a section of code.

@media (min-width: 70em) {
  /* Increase the global font size on larger screens or windows
     for better readability */
  body {
    font-size: 130%;
  }
}
h1 {
  font-size: 1.5em;
}
/* Handle specific elements nested in the DOM */
div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

WHITESPACES

White space means actual spaces, tabs and new lines. Just as browsers ignore white space in HTML, browsers ignore white space inside CSS. The value of white space is how it can improve readability.

In the example below, each declaration (and rule start/end) has its own line. This is arguably a good way to write CSS. It makes it easier to maintain and understand CSS.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
} 


@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

The whitespces just make the CSS to be more manageable readable accesible and very clean. For your own projects, you will format your code according to personal preference. For team projects, you may find that a team or project has its own style guide.

SUMMARY

At this point, you should have a better idea about how CSS is structured. The next article,will cover the process of how the browser reads css on the web pages explains the process.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow