CSS stands for cascading style sheets and HTML stands for Hypertext markup language. Although the concept of using markup language has been quite old and it was used for formatting when people used to use DOS-based word processors and typesetting software, it became prominently known when web pages began to be created.
If you remember, in the beginning, most of the web pages either had .htm or .html. Whichever links ended with these extensions were considered to be HTML pages. The markup language came to be known as the hypertext markup language because you could create hyperlinks.
What is web but a collection of hyperlinks?
A hyperlink is created in the following manner:
<a href=”https://www.DoMyProgrammingHomework.io”>DoMyProgrammingHomework.io</a>
This piece of HTML creates the text “DoMyProgrammingHomework.io” in the text links to the DoMyProgrammingHomework.io website. The hypertext markup language may contain different elements on a web page. This is how the basic structure of an HTML page goes:
<html>
<head>
</head>
<body>
</body>
</html>Whatever you see on a web page, whatever is visible, whether it is the text, the images, or the videos, are put within the <body></body> HTML tags. Extra information that may help other software applications in the search engines like Google, get more information about your pages, such as the title of your web page, the description, and the keywords, is put within the <head></head> HTML tags.
How the information appears to the visitors is also decided by the various formatting tags. For example, to display a paragraph, the <p></p> tags are used. To display a big heading, the <h1></h1> tags are used.
Given below is a small example of a piece of HTML that appears as web page information to the visitor:
<h1>This is the main headline</h1>
<h2> This is a subheadline that can come under the main headline or anywhere on the page. </h2>
<p>This is a paragraph that contains general information. It may be an introductory para. It may be another paragraph in the middle of your web page. It may be some description. </p>
You will notice that most of the tags above have an opening tag and a closing tag. For example, each time you use <p> you also end it with a </p>. This is to tell your browser that the contents of a particular tag have ended and now it is time to consider another tag.
Not all HTML tags have an ending tag. For example, if you use the image tag you will notice that it does not have an ending tag.
<img src=”image-name.png” alt=”Image description.” />
This is because there is nothing to put within the opening and closing tags. You include the name of the image as an attribute and if you want to decide the width and the height of the image that can also be mentioned using an attribute.
An attribute is the extra bit of information that is supplied to the main tag. Basically, these tags tell the HTML rendering engine of your browser how to render your web page. There are many more tags that you can use to decide how your HTML page looks.
But if you don’t format these tags, they assume default characteristics set by your individual browser settings. What if you want to format your information in exactly the manner you want? You use the cascading style sheets.
Cascading style sheets, or CSS, can be the backbone of your website layout or at least, the web page layout. As the name suggests, this decides the style of your HTML tags. For example, if you have the paragraph tag <p>, each time this tag is used on your web page, you can decide the font name, the font color, the font size, the font weight, and whether it appears in italics or not, the background color, and practically every possible styling attribute that you may want for your text.
Here is a small example:
<style>
h2{
font-family: “Times New Roman”;
font-size: 18pt;
font-weight: bold;
color: #124078;
text-align: left
}
p {
font family: “Arial”;
font-size: 14pt;
color: #000000;
text-align: left;
}
</style>One of the biggest benefits of using a stylesheet is that whenever these tags are used, they inherit the style defined within the <style></style> tags. What happens if you don’t use the stylesheet?
Each time you use these tags and each time you want a consistent look and feel, you will have to enter all these attributes including the font name, the font size, the font color, and so on. It will bloat your source code and will also tremendously increase the amount of work you need to create individual web pages.
There is another benefit of using CSS. These days almost all the layouts are made using CSS definitions. For example, how your header appears, whether your main body content appears on the left or the right of the navigation sidebar, and how your footer appears, everything can be decided using the common stylesheet file.
This way, all your styling is universally applied to your entire website. You can completely change the look and feel of your website by making some small changes in the stylesheet file.
You can also read these posts:
- What is the R programming language used for?
- What is GUI programming?
- Is SQL a programming language?
- How should I list my programming skills in a resume?
- What does Java do?
What is a programming language?
To understand whether CSS or HTML is a programming language or not, you need to first understand what is a programming language. Even in terms of programming languages, there are two types of programming languages when it comes to making websites: server-side programming language and client-side programming language.
JavaScript is a client-side programming language. On the client side what we mean is, whatever happens, happens within your browser. If you right-click somewhere on a web page and in the context menu, you click on something called “View source code” you can see the source of the web page including the CSS, HTML, and JavaScript.
Whatever you can see in the source code is happening on the client-side. You are the client. So, everything that is happening, is happening inside your browser. A programming language helps you make your web page interactive.
For example, you can dynamically change the contents of the web page according to some action taken by the visitor. A familiar example would be checking whether someone is filling up your contact form in the right manner or not.
If someone tries to submit your contact form without adding an email ID, you can instantly generate an error message instructing the person that an email ID must be entered before the contact form can be submitted.
This can be achieved by JavaScript. You can also use JavaScript to store data in the cookies on a user’s computer. When you add items to your Amazon shopping cart, those items are stored in a cookie on your computer.
If you delete that particular cookie file from Amazon, all the items in your shopping cart will be gone. Similarly, if there is an interface on a web page that allows you to move items, it is achieved by JavaScript.
If you can drag and drop items into your shopping cart, it is happening with the help of JavaScript. We will come back to JavaScript again. A server-side programming language on the other hand is not visible when you view the source code.
It resides on the server-side. It functions dynamically. Coming back to the Amazon example, although JavaScript can be used to add items to your shopping cart, if you want to access your old orders, JavaScript cannot achieve that.
For that, you need a program that can access the database. The database can only be accessed by a server-side language. The simple reason is, if JavaScript could be used to access the database, it would pose a security risk because JavaScript is visible when someone views the source code on your web page.
A programming language allows you to control the flow of the action that is happening on your web page, dynamically, according to the current situation. For example, if you want to show different content to different people (content that is shown to people from the US might be different from the content shown to people from the UK), you use a programming language.
A programming language allows you to create decision trees. If this happens, do that, if that happens, do this, something like that. A programming language also allows you to execute a command or an action multiple times based on the number of times it needs to be executed.
If you want to check your old orders on Amazon, you may have multiple orders. Suppose, you have 20 old orders and all those orders need to be displayed. A loop will be executed that will go on display the item details until all the 20 items are accessed.
This can be only achieved with the help of a programming language. If you’re using a content management system to publish your website, something like WordPress or Joomla! you will notice that if you have 1100 web pages, it doesn’t mean those 1100 web pages physically exist on your server.
The contents of these 1100 web pages are stored in a database and whenever a particular page needs to be displayed to a visitor, the program fetches that particular page ID or post ID, retrieves the information, and then displays the information to the visitor.
This dynamic action is achieved with the help of a programming language like PHP. PHP is a server-side language. Since JavaScript is a client-side language, and as is apparent in the name, it is also called a script.
What is a scripting language?
As mentioned above, JavaScript is a scripting language. What is the difference between a programming language and a scripting language? It might just be a case of nomenclature but one of the major differences is that a programming language needs a compiler to run whereas a scripting language needs an interpreter.
In their true essence, all scripting languages are also programming languages. In terms of web design and web development, a scripting language resides within the source code of the web page. Something like JavaScript or VBScript.
They don’t allow you to access sensitive information but you can dynamically arrange and rearrange the contents of the web page with the help of a scripting language. you can also validate data using a scripting language.
You can say that they are the junior siblings of the programming languages. You cannot build an entire application using a scripting language like JavaScript, but JavaScript controls a big part of your application.
As an example, if you use Google Docs, a major part of the interface is run by a scripting language although the data is fetched by a programming language like Python, Java, or C++.
Why CSS and HTML are not programming languages?
It has been clearly explained above that you can dynamically manipulate the contents of a web page with a programming language whether it is JavaScript, PHP, or C++. Can you do the same with CSS and HTML? You cannot.
Yes, you can decide how your content appears on your web page with the help of CSS and HTML, but that is rendering. You can also place various elements on your web page using CSS but then again, this data is not being generated dynamically.
In fact, you can also hide and display information on your web page using CSS but CSS cannot decide dynamically when to display something and when to hide something. You need to code it.
Can you dynamically display HTML? Can you dynamically generate CSS? Yes, sure. But you will need to achieve that through a programming language. A programming language can allow you to dynamically write even the source code on a web page.
Since CSS and HTML cannot have multiple loops and since they cannot have decision trees and since they cannot dynamically generate content on your web pages, they cannot be called programming languages. Neither scripting languages.
How to mix up CSS, HTML and a programming language?
If you want to create a dynamic and responsive website or even a web page, you cannot shrug away from mixing up CSS, HTML, and a programming language like PHP or Java. What exactly does mix up CSS, HTML and a programming language mean?
It means using them collectively to their maximum benefit. We have already read above that a programming language helps you dynamically generate the contents of a web page using decision and conditional loops.
CSS and HTML on the other hand help you decide how your content must look when it has been generated. Revert to the example of WordPress. When you load a web page, the contents of the web page are dynamically extracted from the MySQL database.
Once the contents have been extracted, they are displayed depending on how your CSS and HTML have been defined. In a programming language used to create web applications, it is easier to mix up the programming code, CSS, and HTML.
In PHP, you can either use the echo or the print command to output HTML on a web page.
Here is an example:
<?php
print(“<p>This is a line that will be printed on the web page through PHP command. </p>”);
?>
As you can see, within the programming command you can embed the HTML tags along with the text that you want to display. What is the benefit? Explained below:
<?php
if($country==”USA”)
{
print(“<p>Welcome from the USA! </p>”);
}
else if($country==”Australia”)
{
print(“<p>Welcome from Australia! </p>”);
}
?>In the same way, you can dynamically generate the CSS code to change the look and feel of the elements on your web page based on a particular condition.
What is HTML5 and what are its features?
HTML5 is the latest evolution of HTML. Many functions that need add-ons are now included in HTML5. In terms of semantics, it allows you to clearly describe what your content is about. For example, you can have an article within the tags <article></article>, you can have a navigation section between the tags <na></nav>, and so on.
Also, previously, you needed to embed videos and pieces of audio. Or you needed to use a plug-in, for example, the flash plug-in. With HTML5-compatible browsers, you don’t need anything else to run video files within your browser.
You just need the following code:
<video width=”320″ height=”240″>
<source src=”my-video.mp4″ type=”video/mp4″>
</video>Can you become a web designer by simply knowing CSS and HTML?
Compared to a decade ago, websites these days are much more interactive and dynamic. Although, if you know advanced CSS – for example, theme designing for WordPress or Joomla! – you can somehow manage to eke out a decent career as a web designer, to be a serious candidate, someone worth hiring, a little bit of scripting you must know.
There is a difference between a web designer or a web developer, though. A web designer designs websites. You can use a graphic tool. For example, you can use Photoshop to create layouts visually.
There are many Adobe products that can help you create killer designs. A web developer can create web applications. A web developer is basically a programmer. If you are working as a web programmer, you are expected to know, besides JavaScript, PHP, Java, Python, C++, or Perl.
You don’t necessarily need to know all the languages, but some of these languages you must know. You obviously need to know HTML as well as HTML5 to be able to create web pages. Then comes CSS.
The most challenging is, creating DIV-based layouts. Web designers create layouts using either tables or HTML DIVs. DIVs can be completely controlled using CSS and this is where most web designers falter and if you can master this technique, you are in great demand.
Coming back to the moot question. Can you become a web designer solely by knowing CSS and HTML? Depends on the requirements of your employer. If no programming is needed, then sure, you can definitely become a web designer.
There is plenty of scopes to show your skills using just HTML and CSS. For example, creating stylesheets for advanced layouts can be quite challenging and in fact, quite a complex process.
Sometimes even programmers cannot create decent stylesheet-based layouts. Reputed web design companies expect you to be able to write HTML and stylesheets by hand. Using visual tools may be good sometimes, but the problem with visual tools is that you cannot exactly control the way your layout must turn out.
Besides, unless you know the basic nitty-gritty of how CSS and HTML work at the coding level, you won’t be able to do real web design. It is advised that you must know functional JavaScript.
Otherwise, you will always need to depend on a programmer for even small things like validating a basic contact form. Have you recently joined a web design or web development course to get a promotion or get a job as a web designer?
You can be a better designer by working on your web design and web development homework but sometimes you don’t have enough time and besides, some people are better learners when they actually see the examples (in the form of a completed homework assignment) right in front of their eyes.
Looking for web design and web development homework help?
From basic websites to complete portals, the experts at DoMyProgrammingHomework.io have been working in advanced HTML and CSS for many years. Some of them are veteran web designers.
Hence, when they do your homework, it will be top-notch. At the same time, they will complete your homework just the way a student would do. Yes, there is a big difference between how a professional write CSS and HTML and how a student writes it.
You may get CSS and HTML homework in the form of having to build a few web pages, a commercial website, or a complete portal. What sort of web design and web development assignment you get as your homework depends on the level of web designing course you’re doing?
You may be doing a dedicated web design course or it may be a part of your overall computer course. In both cases, we can help you complete your homework.
