ADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)

Size: px

Start display at page:

Download "ADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)"

Brooke Carter
5 years ago
Views:

1 INTRO TO CSS

2 RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY

3 WEEK 1 HTML In Week 1 we were introduced to a basic definition of a website, followed by an introduction to HTML. We defined HTML as code that displays text on electronic devices, and then went on to examine the elements and tags that make up a basic HTML page. We also saw that naked HTML elements displayed in the browser didn t look good at all. This week we will be introduced CSS, and begin to explore how it is used to add some visual style to our HTML pages. We will also run through a few important ideas that will help you understand how css is applied.

4 What is CSS? CSS stands for Cascading Style Sheets. It allows you to attach style rules to your HTML elements such as <body>, <h1>, <p> or <a>. These rules define the presentational aspects of your web pages in other words, how your page looks. One of important roles of CSS is the separation of content from presentation. The major advantages of separating content from presentation are; increased accessibility, improved site performance, and most importantly decreased production and maintenance work.

5 Adding CSS There are three ways of inserting styles into your HTML document; Inline CSS Internal CSS External CSS

6 INLINE CSS Inline CSS is added directly to every HTML element on a page, this of course becomes very inefficient. <body style= width:1000px > <h1 style= font-size: 30px >TEST PAGE</h1> <p style= font-size: 14px >This is a paragraph</p> </body>

7 INTERNAL CSS Internal CSS is added to the head section of your HTML page - also inefficient, but a little better than inline style rules: <head> <style> body{ width:100px;} h1 { font-size:30px;} p { font-size: 14px;} </style> </head>

8 EXTERNAL CSS External CSS is the best and most efficient way to apply styles to a website/page, as it completely separates the presentation information into a separate document. This of course means you can use the same CSS file for multiple webpages. Pages using external css files link to the stylesheet with the <link> tag found inside the head section of a HTML page. <head> <link rel="stylesheet" type="text/css href= css/stylesheet.css"> </head>

10 CSS RULES External CSS files are made up of a collection of CSS rules. A CSS rule has two main parts: a selector followed by one or more declarations. Eg A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets

11 CSS RULES As we learnt last week with HTML, indenting your css will make your code far more readable. h1 { colour: blue; font-size:12px; }

12 EXERCISE 1

13 CSS VALUES - COLOR When defining css values there are many different options that can be used, and attempting to remember them can seem overwhelming! When defining the color of an element there are 16 color value keywords that can be used: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. You also have hexadecimal colours ranging from # (black) to #ffffff (white). In addition, RGB values may be expressed in percentage and decimal forms. Using programs like Photoshop enables you to select your color values from your designs very easily. h1 { color: black; } h1 { color: #000000;} h1 { color: rgb(0,0,0);}

14 CSS VALUES - SIZE When declaring size values, you will primarily use percent (%), ems (em) or pixels (px) to express any size values. Pixels are an absolute value, therefore, if you declare something as 300px, it will be exactly 300px. Percent and ems are relative values, meaning that the browser calculates the size of the element relative to its parent s size value. For example, if the font size is declared to be 20px in the body, and then 80% for paragraphs, paragraph fonts will display at 16 pixels. 1em is equal to the current font size. 2em means 2 times the size of the parent font. h1 {font-size: 20px;} h1 {font-size: 200%;} h1 {font-size: 2em;}

15 The CSS Box Model Another handy concept to grasp when working with CSS is that any element in your HTML file may be thought of as a box. Each box has a number of properties that you can manipulate with your style sheet, such as margin, border and padding properties etc.

16 EXERCISE 2

17 CSS SELECTORS A CSS selector is the part of the style rule that tells the browser which element in your HTML mark-up your styles should be applied to. CSS uses several different types of selectors to specifically target elements within a HTML document. These include type selectors, class selectors, id selectors and descendant selectors.

18 TYPE SELECTORS The type selector is the most basic form of css selector. It simply uses an elements name to apply style declarations to all instances of the the selected element. eg p { } margin: 1em;

19 CLASS SELECTORS (.) The Class Selector uses the class attribute added to any element in your HTML to target that instance of the element. In its simplest form, the mark-up would look like this. Class selectors can be applied to multiple elements within your HTML <p class= main-paragraph >This is the main paragraph</p>.main-paragraph { } color: red;

20 ID SELECTORS (#) The ID selector is very similar to the class selector, with an important distinction; the rule can only be applied once as each id attribute in an HTML document must be unique. <div id= contact"> This is some contact information </div> #contact { color: blue; }

21 DESENDANT SELECTORS The descendant selector s subject is the descendant of an element. In the following example, the selector targets the unordered list within the element with an id attribute value of navigation. <div id= navigation"> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul> </div> #navigation ul { margin: 0; padding: 0; background-color: #069; color: #fff; }

22 EXERCISE 3

23 CSS SPECIFICITY Specificity determines, which CSS rule is applied by the browsers. Specificity is usually the reason why your CSS-rules don t apply to some elements, although you think they should. Every selector has its place in the specificity hierarchy. If two selectors apply to the same element, the one with higher specificity wins. When selectors have an equal specificity value, the latest rule is the one that counts. When selectors have an unequal specificity value, the more specific rule is the one that counts. The last rule defined overrides any previous, conflicting rules. The embedded style sheet has a greater specificity than other rules. ID selectors have a higher specificity than attribute selectors. A class selector beats any number of element selectors.

Chapter 3 Style Sheets: CSS

WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON Chapter 3 Style Sheets: CSS 1 Motivation HTML markup can be used to represent Semantics: h1 means that an element is a top-level heading