CSS refers to Cascading Style Sheet. Normally using HTML, we can create the structure and content of a web page. But using the CSS, we can change the appearance of the web page that we created.

We can change the style, size, color, and font of text; padding and margins; border styles, and background colors using the CSS. It can also use to align elements on a page.

HOW DOES CSS WORK?

The “Cascading” part is an important part of CSS. In a style sheet, the browser reads style descriptions from top to bottom. This means that any previous styles identified earlier in the style sheet will be overridden by a style you identify later in the style sheet.

A style sheet can also replace another style sheet. This is how we will replace predefined styles from our blog themes or plugin widgets, as the last one read by the browser is generally our custom style sheet.

HOW CSS CAN BE APPLIED

By declaring unique styles for each element, CSS is applied to HTML elements on a web page. A declaration of style looks like this:

selector {           property: value;}

Let’s individually look at all of these parts:

The selector is the part of the content that we want to aim for and style. It can be an HTML element or Class Name.

We use the tag name without an opening and closing bracket when defining an HTML element. For example, the <body> (or body tag) would be: body

A Class Name starts with a dot. For example,

.city

Inside curly braces, properties and their respective values still live:

body {}

Properties are predetermined phrases within CSS that are recognized by all web browsers. They are items like:

font size, font-family, color, etc.

body {       font size:       font-family:       color:}

The value is the specific style or variable that you want to allocate a property to. For instance:

body {       font size: 24px;       font-family: Times new roman;       color: red;}

So, the above example tells the browser that we want to show all our page elements that are surrounded by a <body> tag, which should be Times new roman font, 24 pixels in size, and red.

CSS inclusion

Three ways of adding a style sheet are available.

  • External CSS
  • Internal CSS
  • Inline CSS

You can adjust the look of an entire website with an external style sheet, by changing one file only. Inside the <link> element, inside the header section, each HTML page must include a reference to the external style sheet file.

<!DOCTYPE html><html><head><link rel="stylesheet" href="mystyle.css"></head><body><h1>This is a heading</h1><p>This is a paragraph</p></body></html>

In any text editor, an external style sheet can be written and must be saved with the .css extension. The external .css file should not contain any HTML tags.

mystyle.css file

body {background-color: red;}h1 {color: green;margin-left: 10px;}

If one single HTML page has a unique style, an internal style sheet may be used. Inside the <style> element, the internal style is defined inside the head section of the HTML page.

<!DOCTYPE html><html><head><style>body {background-color: blue;}p {color: blue;margin-left: 20px;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph</p></body></html>

An inline style can be used for a single element to apply a specific style. Add the style attribute to the specific element to use the inline styles. Any CSS property can be included in the style attribute. Inline styles replace all other applicable styles.

<!DOCTYPE html><html><body><h1 style="color: blue; text-align: center;">This is a heading</h1><p style="color: brown;">This is a paragraph</p></body></html>

MULTIPLE ELEMENT DEFINING

Let’s say we want to create your page titles and subtitles using the same font and color, but show them in different font sizes (a common style request). We can individually define each HTML element such as this…

h1 {font size: 24px;font-family: Times new roman;color: red;}h2 {font size: 20px;font-family: Times new roman;color: red;}h3 {font size: 16px;font-family: Times new roman;color: red;}

But since the same font family and color values are shared by all 3 tags, that leads to a lot of duplication. We can instead describe several HTML elements together by separating them with commas, such as this:

h1, h2, h3 {font size: 24px;font-family: Times new roman;color: red;}

Now we can overwrite the font size to adjust only the font size of the h2’s and h3’s by specifying them just below:

h2 {font size: 20px;}h3 {font size: 16px;}

That’s how the cascade works! The font family and color do not need to be redefined because they have already been specified above. When you chose to create your font to something else, this also makes things simpler in the future. Just once instead of three times, you need to change it!

CSS Class

Now let’s say we didn’t want to have a border on those pictures on the web page, like, for instance, your pictures. To directly target them, we can add a class to those elements in the HTML. We’re introducing a class like that:

<img src="picture.jpg" class="picture" />

Whatever you like, you can name a class. You just want to name something that makes sense. Note also that in class names, there are never any spaces.

All class names begin in CSS with a dot. Now, after the previous image style (defined previous section), we go back into the CSS and add the following to override it:

.picture {border: 10%;}

It will instruct the browser to add this style definition only to image tags with the specified “picture” class. You can apply this class to any HTML element that you want to have a border around.

I wrote this blog mainly focusing on the beginners to the CSS. I hope this will be very helpful to understand CSS very easily.

My name is Nipuna Dilshan. I'm from Sri Lanka . I'm an undergraduate of University of Moratuwa, Sri Lanka.