Css, Development

Marriage of HTML & CSS – A Perfect Website

Web technologies have advanced with the years and as such, the technologies that we are using today are very technical in nature. The needs of website owners have also grown immeasurably, resulting into customized and unique needs that must be satisfied. This aspect has made most web designers employ the latest technologies to satisfy those needs. The developmental technologies and web design that have dominated the contemporary web designing scene include HTML, CSS and JavaScript. These coding languages have separate effects that they add to a website. Some of the client needs are so complex that they require the combination of one or more of these techniques in order to bring the desired effects.

The marriage between HTML (Hyper Text Mark up Language) and Cascading Style Sheets (CSS) has brought the optimization of features from both technologies. HTML is specifically used in the structuring of content while CSS is used in the application of visual styles.

  • You may also like:

Collection of 30 Free CSS Templates For Your Inspiration
How to Setup Your Own Website in 4 Easy Steps

How CSS and HTML work together


Most WebPages are a combination of structure and style in that vary depending on the website. To the human eye, it may be difficult to interpret whether it is CSS, HTML or JavaScript that is used but the browser can clearly identify this difference.

Page display is a factor of so many processes that go on inside the computer. For a browser to know how to display images and text in the correct format on the web page, it has to know the structure of the page. This means that the page has to be written in a language that the browser can easily understand and interpret. HTML is one of the languages that the browser can easily understand and as such the browser can convert it into a document and then read and display the page on the web.

The structure of HTML

css structure

HTML uses tags to mark the different parts of a page. The tags, which are represented by letters, are enclosed in angular brackets that communicate with the browser so it knows what to display. For instance, paragraphs are marked by <p>.  The tags normally come in pairs- opening and closing tags. When the browser sees opening and closing paragraph tags for instance, it interprets that there should be a space in between paragraphs.

In addition to the paired tags, there are closing tags. These tags do not contain any text inside them, and therefore the browser does not display anything on the page. This way of structuring text makes a website well arranged and appealing to read. The images are properly put in their places, the paragraphs are well aligned and the tables are clearly embedded on the page. This gives an impression of a well organized page.

The topography of Cascading Style Sheets (CSS)

(Source: Meeshadesign)

Having learned from the previous paragraph how HTML gives the website a perfect look by knowing what information to display on the webpage, it is now critical to also understand how to tell the browser what the data should look like. The appearance of the data touches on areas such as the color of the text, the background appearance, the font size and style among other things as well. CSS is the technology which instructs browsers on how the page should look. Without CSS, the browser displays the default status of the web page content meaning black text against a white background. The font style for a default status is normally Times New Roman. It must be noted that such a webpage looks dull and unattractive and is rather a turn off for readers.

CSS is written in a way different from HTML. The combination of HTML and CSS can work together. While HTML specifies text in tags, CSS adds on by telling the browser that the text contained in the given paragraph should have a particular format, such as a bold red font.

The LINK tag in CSS tells the browser to link a given file. The href attribute and the type attribute in the same line tell the browser which file to link and the type of file as well. Another important attribute in CSS is the rel attribute. This attribute tells the browser the relationship between the current file and the other file that is being linked.

In order to give a website the perfect look, it is imperative that the correct usage of the HTML tags and the CSS link tags and attributes are observed. The codes for both CSS and HTML should also be put in different files to avoid mix ups. Storing the code in different files allows easier and quicker access to coding information. The marriage between CSS and HTML gives more meaning to a website as each technique brings out its own features which complement each other perfectly on a website.

One Comment

Leave a Reply

Show Buttons
Hide Buttons

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.