In our last class session we discussed moving from html to CSS. CSS stands for Cascading Style Sheets and is another form of code that in a way, has cascading code flowing from top to bottom, where children elements are nested within parent elements.We use CSS to manipulate the HTML markup language with a style sheet. In this context, a style refers to attributes such as Font, Position, Colour and Decoration.
Things we can achieve in CSS:
Font settings and size
Width and height of objects
Margins
Position
Colour
Gradients, drop shadows, basic special effects.
To link your HTML with CSS you have to place a code in the <head> section of the document.
<link href="css/mainstyles.css" rel="stlyesheet"
type="text/css />
The red section is where you will enter the path of your .css file. As you type, a 'browse' window will appear, allowing you to quickly select the file itself.
In order to change elements on the page you need to use a specific selector. Selectors are patterns used to select the elements you want to style.
Some options for this are
Natural Selectors (such as <h2>, <p> etc)
ID tags
Classes
If we used a natural selector to to the change the font size it would look like this-
h1 {
font-size: 40px;
}
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. when writing this out you have to place a hash tag followed by the id of the element.
#header {
width: 960px;
Height: 200px;
background-color: #0c3;
The class selector finds elements with the specific class.
To find elements with a specific class, write a full stop, followed by the name of the class:
.centre {
text-align: centre;
colour: red;
}
No comments:
Post a Comment