What is CSS | Types | Syntax | CSS with HTML and Example

What is CSS- A CSS stands for Cascading Style Sheets, It uses for a design a website. Means how website or web page will look and give better the user interface. This tutorial you will learn about a basic CSS stylesheet and how to use it with HTML code.

What is CSS , Types, Syntax, CSS with HTML and Example

Types of CSS

There is three type (ways to use) of Cascading Style Sheets

  • Inline CSS
  • Internal or Embedded CSS
  • External CSS

CSS Syntax

You must shining about how does CSS look like and its syntax?

Its different look for a different way of use like inline different with other. But for standard way define is used a External CSS.

If you have any tag and you want to change its design then you can do it with open “ { ” a curly braked and add code then close curly braked “ } ”.

See example trying to change a color of <p> tag, that write color then colon “ : then value then end with a semicolon ” ;. If You want more property then just in next line with property name and value within a closing curly bracket.

It will change the color for all of <p> tag of the webpages. Here are commonly used property in CSS – border, color, margin, padding, text-align, width, float, visibility, etc. There are so many properties in CSS.  

Example

A below code is based on external css file example.

How to use CSS in HTML?

As we know there is 3 type or ways to use CSS in HTML – inline, internal and external. Let’s See one by one how use it with HTML code (tags).

Inline CSS

With inline CSS you have to dine a css in the HTML tag, for example, you are using <p> tag than inside open this tag have to write style = “property: value;”>. See the below example a using CSS (color, font-size, font-style, test-align) with HTML.

Output and source code screenshot, a screenshot took with inception view, so you can see left side is output and right side is code.

Inline CSS example source code and example

Internal or Embedded CSS

It’s also a single HTML document CSS same as inline CSS. What is Single HTML documented – When a CSS and HTML code inside the same file. Internal CSS (Embedded CSS) and inline CSS both are example of it.

To define a Internal CSS you need to use <head> tag and inside it use <style>…</style>. here is One concept come a “class”, you have to use the class attribute to give a particular identity of the tag. So it will change only the single tag. In this example using a <div> tag, which is stand for division or a section in an HTML document.

Output and source code screenshot – You can also use <p> tag for this example.

Internal or Embedded CSSexample with HTML and output source code

External CSS

The last and most important External CSS, it uses a separate class and link to HTML page. The separate CSS class only contain a style property with the help of tag attributes of HTML (For Example class, id, etc).

The CSS file extension is dot CSS and you can give any name of it, for examplestyle.css“. To Link a Cascading Style Sheets you have to use <link> tag in a <head> tag with the file path.

Cascading Style Sheets –style.css

HTML file – MySite.html

Output and source code screenshot: Left Side is output and rise is resources then code.

A External CSS link to HTML file source code and output

Save a CSS File

Just like the html save the file, you have to save CSS file name with dot css extension. For an example can file – “style.css”. You can put any name for cascading style sheets.

Advantages of css

  • Easy maintenance
  • Fast webpage loading
  • Search engine friendly
  • Absolute positioning
  • Printer Friendly

Disadvantages of css

  • Cross-Browser Issues
  • Comes in Different levels – CS, CS1 to CS3
  • Fragmentation – what works with one browser may not always work with another.
  • Lack of security – Because it is an open text-based system, CSS doesn’t have the built-in security that will protect it from being overridden. Anyone who has a read/write access to a website can change the CSS file, alter the links or disrupt the formatting, whether by accident or design.

What does CSS stand for or CSS meaning?

CSS meaning is Cascading Style Sheets and its use for the style a webpage in Web Applications.

Why CSS used in HTML?

A CSS is used in with HTML code make your website more attractive. Without using CSS code in HTML webpage look very ugly, everything will be messed. CSS is controlling a tag (property) of HTML.

How to use a CSS or How to use a CSS file in HTML?

There are 3 ways, You can use a CSS with HTML first one is inline within a tag (e.g. <p>, <a>, <h1> etc). Second ways it used Internal CSS which required to give identity to tag and define is the style in <head> section. And last way is to create a separate CSS file and link to by using a <Link…> tag. Don’t forget to add rel attribute as rel=”StyleSheet”.

Do comment if you have any doubt and suggestion on this tutorial.

Note: The HTML and CSS code is tested on Safari browser.

OS : macOS 10.14 Mojave


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.