Tuesday, 8 October 2013

Explain the features of the box model for CSS

In this section of my blog, I will be explaining the features of the box model for CSS.I will also describe the different layers of the box model as well as provide a diagram that illustrates the structure of a box model.

The diagram below shows the structure of a box model with the different layers and their names. Some of the layers are actually transparent.
Box model is a type of CSS design and layout coding. As the name suggests it's a box that web page developers use to wrap around elements or tags such as images or <p> Paragraph 1 </p>. The properties of the box model also allow  you to separate different elements or tags from each other.

The MARGIN provides a transparent space between the border, which is visible and the actual sides of the web browsers. Examples of MARGIN properties are "margin-top: 10px;" and "margin-right: 50px;".

The BORDER is a visible coloured outline around the padding and actual content. An example of BORDER properties is              "border: 10px dotted black;". There are different types of borders such as solid, dashed.

The PADDING is similar to MARGIN. It provides a space between the border and actual content. The colour of the space the PADDING provides is affected by the background colour of the box.

The CONTENT is the actual text and images found within the box.

Reference:

1: Box Model, 23/11/2013, http://bit.ly/H4hj0
Posted by at 1 comment:
Labels:

Explain how HTML files access CSS

In this section of my blog, I will be describing HTML and CSS and their purposes. I will be describing both languages separately in more depth. I will end this section of my blog with a conclusion where, I will state how both languages work together in the development of websites.

HTML stands for Hypertext Markup Language. HTML is a web development language. HTML files use link element to access CSS inside the head tag. This is an example of a link element found inside the head tag of an HTML file - <link rel="stylesheet" href="style.css">. HTML describes how text and pages are structured and laid out using different tags and attributes. An example of HTML tag is <a> </a> and a property is 'href='.

CSS is a meta language that stands for Cascading Style Sheets. It's used to design style sheets for HTML web pages that define the visual layout of a web page. CSS controls the colours, layout and fonts within a web page. Once a style sheet is created you can use it on any web page as long as you perform the necessary changes according to the specific web page. You can apply differently formatted style sheets to the same web pages and make them look completely different, whilst the text remains the same. An example of CSS tag is 'a:visited { }' and you put a property like        'text-decoration:none;' within the curly brackets. 

There are three ways HTML files access CSS. One of them is 'Inline'. This method requires you to type the CSS code within the HTML code. For example, you type in 'style=color:red;' within the <title> </title> tag. Another way is 'Internal'. This technique stores the CSS code in the head tag of a web page. An example would look like this "<head> <style> </style> </head>". The last and most appropriate way is 'External'. This technique uses CSS code from external file such as 'style sheet' to link it to the web page. The link element found in the head tag within the web page is "<link rel="stylesheet" href="style.css">".

--------------------------------------------------------------------------------------------------------------------------

References:

1: Can you explain how HTML files access CSS?, 01/11/2013, http://yhoo.it/18GuaOm

2: HTML & CSS, 01/11/2013, http://bit.ly/8Qjray





 
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)