Introduction to CSS

Introduction to CSS – Syntax, Selectors, Benefits | How Does CSS Work with HTML?

by

CSS is simple to learn and understand and provides powerful control over an HTMLDocument Presentation. We use CSS to define styles, layouts, variations in display for our Webpages. You can alter the look of an entire website by changing just one file. In this tutorial, we tried explaining why to use CSS and How does CSS works with HTML, the Benefits of CSS, etc. all in one place.

What is CSS?

CSS stands for cascading style sheets. In short, CSS is a design language that makes a website look more appealing than just plain or uninspiring pieces of text. Whereas HTML largely determines textual content, CSS determines visual structure, layout, and aesthetics. HTML is a markup language, and CSS is a style sheet language. Think “look and feel” when you think CSS.

CSS Syntax

A CSS includes style rules interpreted by the browser and then applies to all the elements in the document. Usually, a style rule includes a selector and a declaration block.

Selector => h1
Declaration => {color:blue;font size:12px;}
  • Selector always points to the HTML element we want to style.
  • Declaration block includes one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name, value, separated by a colon.
    For Example:
    -> color is property and green is value.
    -> font size is property and 16px is value.

CSS declaration will always end with a semicolon, and declaration blocks are enclosed within curly braces.

Read More:

CSS Selectors

CSS Selectors will find the HTML elements based on the element name, id, class, attribute, and more.

Universal Selectors: Instead of selecting any element of a specific type universal selector matches the name of any element type

* { 
color: #000000; 
}

It renders every element of our document in black.

Element Selector: Element Selector selects elements depending on the element name. You can choose all p elements on a page. Here all p elements are center-aligned with a text color red.

p {
text-align: center;
color: red;
}

Descendant Selector: If you want to apply a style to a particular element only when it is present in a particular element. Style Rule is applicable to em element only if it is present inside the ul tag

ul em {
color: #000000;
}

ID Selector: 

  • ID Selector utilizes the ID Attribute of an HTML Element to choose a specific element.
  • ID needs to be unique and should be present within a page. Thus, the ID Selector selects one unique element.
  • In order to choose an element with a specific ID, write a hash(#) Character followed by the element ID.

Style Rule is applicable to the HTML Element having id=”para1″;

#para1 {
text-align: center;
color: red;
}

Note: An ID Name can’t begin with a number.

Class Selectors: Class Selectors select the elements having a specific class attribute. In order to choose elements having a specific class write a period(.) character followed by class name.

Here all the HTML Elements having class=”center” will be in red and center aligned.
.center {
text-align: center;
color: red;
}

You can apply more than one class selector to a particular element.

Grouping Selectors: 

In case of having same style definitions as such

h1 {
text-align: center;
color: blue;
}

h2 {
text-align: center;
color: blue;
}

p {
text-align: center;
color: blue;
}

In order to minimalize the code, we can group the selectors. To group, selectors separate each selector with a comma. We have grouped selectors from the code above.

h1, h2, p {
text-align: center;
color: red;
}

Example Program using CSS

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

How Does CSS Work with HTML?

If HTML were the engine components of a car, CSS would be the body style and the paint job. A website can run without CSS, but it certainly isn’t pretty. CSS makes the front-end of a website shine and it creates a great user experience. Without CSS, websites would be less pleasing to the eye and likely much harder to navigate. In addition to layout and format, CSS is responsible for font color and more.

What are the Benefits of CSS?

There are a number of benefits of CSS and we have outlined some of them as such

1) Faster Page Speed: More code means slower page speed. And CSS enables you to use less code. CSS allows you to use one CSS rule and apply it to all occurrences of a certain tag within an HTML document.

2) Better User Experience: CSS not only makes web pages easy on the eye, it also allows for user-friendly formatting. When buttons and text are in logical places and well organized, user experience improves.

3) Quicker Development Time:  With CSS, you can apply specific formatting rules and styles to multiple pages with one string of code. One cascading style sheet can be replicated across several website pages. If, for instance, you have product pages that should all have the same formatting, look, and feel, writing CSS rules for one page will suffice for all pages of that same type.

4) Easy Formatting Changes: If you need to change the format of a specific set of pages, it’s easy to do so with CSS. There’s no need to fix every individual page. Just edit the corresponding CSS stylesheet and you’ll see changes applied to all the pages that are using that style sheet.

5) Compatibility Across Devices: Responsive web design matters. In today’s day and age, web pages must be fully visible and easily navigable on all devices. Whether mobile or tablet, desktop, or even smart TV, CSS combines with HTML to make responsive design possible.

Some topics of CSS are

  • Flexbox
  • CSS Grid
  • Centering with CSS
  • The CSS margin property
  • CSS Variables
  • CSS Transitions
  • CSS Animations