Pre Course Requirements
To attend the CSS introduction course you should have everyday PC or Mac skills, and have attended the HTML fundamentals course or have proven similar working knowledge.
You will also need the ability to download and install some free software and browser extensions.
Learning Outcomes
- You will get a solid grasp of the CSS principals and how they apply to front end development.
- You will learn how to set up and apply your CSS code to your webpages.
- You will be able to apply sophisticated styling to text and typography.
- You will explore and understand how to layout and position web page elements with CSS.
- You will work with images and other CSS to create visually rich effects.
Course Outline
Introduction
- What is CSS and what can it be used for
- A quick review of HTML fundamentals
Setting up your environment
- Selecting and installing a code editor
- Working with different browsers
- Live browser preview
Adding your first CSS code
- Attaching CSS to HTML (the cascade)
- Creating and attaching a CSS file
- Adding embedded CSS
- Adding in-line CSS
- The CSS syntax and coding rules
- Browser specific prefixes
- Working with a reset style sheet
Exploring CSS selectors
- What is a CSS selector
- Tag Selectors
- Class selectors
- ID selectors
- Combination selectors
- Conditional selectors
- Pseudo selectors
- Specificity
Styling Text and Typography
- Specifying font size and colour
- Using different typefaces
- Using letter-spacing and line-height
- Working with web fonts and custom fonts
- CSS inheritance and efficiency
- Overriding styles using the cascade
Styling text-based links
- About link state and pseudo-classes/selectors
- About browser default styles
- Re-styling links
- Making links conditional to their destination
- Making a button
Layout Fundamentals
- The CSS Box Model
- Working with width and height
- Setting Borders
- Spacing with Padding Margin
- Adding the Box model up correctly
Controlling layout and position
- Using HTML elements as containers
- Nesting containers to suit you.
- Exploring Relative, Absolute and Fixed Positioning
- Placing positioned elements inside each other
- Control the Display of Layered Elements
- Using Floats
- A simple flexible 2 column layout
Working with images
- Adding images to your page with CSS
- Controlling placement and auto repeats
- Swapping text for images
- Using image containment
Newer CSS3 tricks
- Adding rounded corners to your layouts
- Adding drop shadows to text and containers
- Changing transparency with opacity and RGBA
- Creating bevel and infill effects
- Basic animations
Creating a print-friendly page
- Intro to media types and queries
- Using the @print media
- Showing and hiding elements
- Altering layout for print
- Changing font and font size
- Showing or hiding link information
Questions and Answers
Course Info
Sorry. No other course information available at the moment.
Please leave a Comment
If you have attended this course or would like to comment on it or join the discusson, please fill in the comments form.
Please note: You must register to add comments and they must be approved before appearing here.