Style Code for your Website Design
In the previous session we describe the 3 major sections: Header, Body, and Footer in a typical website design.
The code language used to display information from your website design to Internet browsers is called HTML (Hyper-Text Markup Language). This universal language is compatible across different browsers such as Apple’s Safari, Google’s Chrome, or Microsoft’s Internet Explorer. HTML will only display content in its most basic form much like reading text printed on a typewriter.
Only displaying this type of HTML code on a website is boring so the inventors of websites created a type of code (almost like a second programming language) called Cascading Style Sheets or CCS. CCS describes how HTML content elements should be rendered on screens, on print, in speech, or other media formats.
For many website tools have helped speed up the design process by automatically create CCS code based on selections. Some of the countless choices CCS has to offer are:
- Font style, type, orientation, size, color
- Area background type, color
- Section size, margins, padding
- Events such has hover, touch, click
Although these tools are great for most of the time but not cover the unlimited CSS combinations has to offer. This is where having the basic knowledge of what CSS is and how it works.
Where is the CSS Located in your Website Design?
CSS can be found in two different areas on a typical website design. The first area and most uncommon is on the files that the HTML pages are created. A better practice used in website designs is to place all of the CSS in a separate file and reference it throughout the pages that it uses.
If you have access to your file structure of your website design and look for a file with .ccs extension. This is where the style code is stored. These files can be opened and changed with a simple text editor or a code editor like Dreamweaver.
How to Read and Understand CSS Code
Mentioned earlier, CCS code is almost a different programming language in its own. The uses can be range from simple to complex. In this article we will explain the basics of CCS code. To further your knowledge on CCS code there is a great resource online for learning all the aspects of Cascading Style Sheets.
Below is an example CCS:
header {width: 100%;
position: fixed;
background-color: #ffffff;
height: 120px;}
This style code relates to the “header” section of the website design. From this we can determine:
The width is 100% of the page
The position of the section is fixed
The background color is white (Hexadecimal value for white is #ffffff)
The height of the header section is 120 pixels
As you can see reading CCS code takes practice and experience to read.
An excellent design layout will structure CSS code so that it is organized and easy to read and make adjustments.
Too Technical? I don’t want to mess up my Website Design. How can I get Help?
Website developers are experts in CCS layouts. They have the knowledge and experience to make adjustments and changes to fine tune your website design.
Success Media Services can help website owners with their website design. We can make adjustments to existing websites or create a brand new website that is built for digital marketing.
Contact us today to see how we can help you deliver an effective website design that converts website visitors into customers.
Next we will discuss the importance of different kinds of navigation used on websites.