3.4.2
CSS & JavaScript
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
CSS is one of the main languages used in the creation of web pages, alongside HTML and Javascript.
![Illustrative background for CSS](https://image-v2.cdn.app.senecalearning.com/2019-09/cfbb00d5-64b5-451b-985c-feff62dbd8a0/programmer-1653351_1280,h_400,q_80,w_640.png)
![Illustrative background for CSS ?? "content](https://image-v2.cdn.app.senecalearning.com/2019-09/cfbb00d5-64b5-451b-985c-feff62dbd8a0/programmer-1653351_1280,h_400,q_80,w_640.png)
CSS
CSS
- CSS stands for cascading style sheets.
- CSS describes how a web page written in HTML should look, in terms of style and formatting.
- CSS can be written once and applied throughout a website.
- This makes designing a webpage more efficient, especially when making changes.
![Illustrative background for CSS rules](https://image-v2.cdn.app.senecalearning.com/2020-08/1ec2d613-bf0c-40a6-a239-bac9dd32b196/Screenshot%202020-08-20%20at%2009.05.12-min,h_400,q_80,w_640.png)
![Illustrative background for CSS rules ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/1ec2d613-bf0c-40a6-a239-bac9dd32b196/Screenshot%202020-08-20%20at%2009.05.12-min,h_400,q_80,w_640.png)
CSS rules
CSS rules
- CSS rules are made up of selectors and declarations:
- Selectors identify the component of HTML that requires formatting.
- Declarations describe how the component should look.
![Illustrative background for Attributes](https://image-v2.cdn.app.senecalearning.com/2020-08/f065c964-ead1-444d-83e6-ac03efd67a75/code-css,h_400,q_80,w_640.jpg)
![Illustrative background for Attributes ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/f065c964-ead1-444d-83e6-ac03efd67a75/code-css,h_400,q_80,w_640.jpg)
Attributes
Attributes
- There are many different attributes you can change with CSS. For example:
- background-color.
- border-color.
- border-style.
- border-width.
- color (named and hex colours).
- font-family.
- font-size.
- height.
- width.
- Note the American spelling of 'color',
![Illustrative background for External CSS](https://image-v2.cdn.app.senecalearning.com/2020-08/9033ce58-05ec-4ac1-9cd9-c5127ef7a7d6/dual-screen-1745705_1280-min,h_400,q_80,w_640.png)
![Illustrative background for External CSS ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/9033ce58-05ec-4ac1-9cd9-c5127ef7a7d6/dual-screen-1745705_1280-min,h_400,q_80,w_640.png)
External CSS
External CSS
- External CSS is when the HTML and CSS code exist as separate, but linked files.
- This is the most common way to use CSS.
- To link a CSS file into an HTML file, we use the following syntax:
- "stylesheet" type"text/css" href="style.css">
![Illustrative background for Embedded CSS](https://image-v2.cdn.app.senecalearning.com/2020-08/b1a29aec-834b-4721-981d-0dd8cc9e1567/Screenshot%202020-08-20%20at%2009.05.14-min,h_400,q_80,w_640.png)
![Illustrative background for Embedded CSS ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/b1a29aec-834b-4721-981d-0dd8cc9e1567/Screenshot%202020-08-20%20at%2009.05.14-min,h_400,q_80,w_640.png)
Embedded CSS
Embedded CSS
- Embedded CSS is when CSS is put in <style></style> tags in the <head> part of the HTML code.
![Illustrative background for Inline CSS](https://image-v2.cdn.app.senecalearning.com/2020-08/b6df6e89-2774-4b08-b75c-f6b4e2155a94/Screenshot%202020-08-20%20at%2009.05.17-min,h_400,q_80,w_640.png)
![Illustrative background for Inline CSS ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/b6df6e89-2774-4b08-b75c-f6b4e2155a94/Screenshot%202020-08-20%20at%2009.05.17-min,h_400,q_80,w_640.png)
Inline CSS
Inline CSS
- Inline CSS is when CSS is put directly in the <body> of the HTML.
- This is ideal for solitary adjustments of formatting.
JavaScript
JavaScript
Javascript is a well-established and versatile scripting language used to add interactivity to a web page.
![Illustrative background for JavaScript](https://image-v2.cdn.app.senecalearning.com/2020-08/3cb7e123-50f9-4524-afe5-1726945a25dd/javascript-2189147_1280,h_400,q_80,w_640.png)
![Illustrative background for JavaScript ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/3cb7e123-50f9-4524-afe5-1726945a25dd/javascript-2189147_1280,h_400,q_80,w_640.png)
JavaScript
JavaScript
- JavaScript is a ‘client-side’ scripting language.
- This means it is run on the user’s computer, rather than on the webserver.
- The code is interpreted rather than compiled, meaning it can run on any type of computer or web browser.
- With client-side processing, actions can be completed without having to connect to the webserver.
- This makes actions quicker and more efficient.
![Illustrative background for Uses](https://image-v2.cdn.app.senecalearning.com/2020-08/cccfd391-b46c-472a-8738-05583d342691/button-click-mouse,h_400,q_80,w_640.jpg)
![Illustrative background for Uses ?? "content](https://image-v2.cdn.app.senecalearning.com/2020-08/cccfd391-b46c-472a-8738-05583d342691/button-click-mouse,h_400,q_80,w_640.jpg)
Uses
Uses
- JavaScript can be used to create an expanding navigation menu or change the colour of a button when the mouse hovers over it, for example.
- JavaScript can also be used to make in-browser games and interactive art.
1Components of a Computer
1.1Structure & Function of the Processor
1.2Types of Processors
2Software & Software Development
2.1Systems Software
2.2Applications Generation
2.3Software Development
3Exchanging Data
3.1Compression, Encryption & Hashing
3.3Networks
4Data Types, Data Structures & Algorithms
4.1Data Types
5Legal, Moral, Cultural & Ethical Issues
5.1Computing Related Legislation
6Elements of Computational Thinking
6.1Thinking Abstractly
6.2Thinking Procedurally
6.3Thinking Logically
7Problem Solving & Programming
7.1Programming Techniques
7.2Programming Construction
Jump to other topics
1Components of a Computer
1.1Structure & Function of the Processor
1.2Types of Processors
2Software & Software Development
2.1Systems Software
2.2Applications Generation
2.3Software Development
3Exchanging Data
3.1Compression, Encryption & Hashing
3.3Networks
4Data Types, Data Structures & Algorithms
4.1Data Types
5Legal, Moral, Cultural & Ethical Issues
5.1Computing Related Legislation
6Elements of Computational Thinking
6.1Thinking Abstractly
6.2Thinking Procedurally
6.3Thinking Logically
7Problem Solving & Programming
7.1Programming Techniques
7.2Programming Construction
![Go student ad image](/en-GB/revision-notes/_next/image?url=%2Fen-GB%2Frevision-notes%2Fimages%2Fgo-student-uk-ad.jpg&w=640&q=100)
Unlock your full potential with GoStudent tutoring
Affordable 1:1 tutoring from the comfort of your home
Tutors are matched to your specific learning needs
30+ school subjects covered