What Is CSS?

CSS (Cascading Style Sheets) is a mark up language used to present semantics and formatting of a web page, CSS controls the overall look layout and format of a web page.

CSS is a style language that defines layout of the HTML file. HTML houses the information; CSS controls how the information is displayed. Before the founding of Cascading Style Sheets in 1996 - web designers used HTML to control the overall look and feel of a web page, this resulted in huge amounts of additional code as the HTML was repeated for every instance. With CSS a web designer can change the appearance of every page by simply altering one line of code, control layout of many documents from one single style sheet. Read more about What is HTML?

CSS is most commonly used to control layout, fonts, colour and spacing of a web page; although this is just scratching the surface and much more can be achieved through innovative use of CSS. CSS class selectors are used to enable share formatting from one file throughout your website as a whole.

CSS Benefits

  • CSS stands for Cascading Style Sheets
  • CSS define how the HTML elements are displayed on a web page.
  • CSS Styles are saved in external .css files.
  • External style sheets enable you to change the appearance and layout of all the pages in a Website, just by editing a single file.
  • CSS statement groups are always opened with a left pointing curly bracket “{”,
  • CSS statement groups are closed with a right pointing curly bracket “}”, statements that make up the group are ended with a semicolon “;”.

CSS Example

As an example of how HTML and CSS work we will explain the structure of this particular colums where you are currently reading.

<h1>My Heading</h1>
This HTML tag is used to display my headings for each part of the document, my heading is wrapped between the HTML tags but it is the use of CSS that is creating the font type, colour and size. As we move down the page under each title we have paragraph tags.

<p>the content of my page</p>
Again the content of each page is wrapped between HTML tags on this occasion inside paragraph tags, this will display the content in a paragraph format but it’s the CSS that controls the design and layout of the paragraph, like how wide the paragraph is, spacing, padding and like before controlling the design of the textual content itself.

CSS Code

#wrapper #footer #copyright {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: transparent;
width: 85%;
margin-left: auto;
color: #f7f7f7;
font-size: 12px;
margin-right: auto;
margin-top: 20px;
text-align: center;

css cascading style sheets example of code

comments powered by Disqus